TemainfoSoftware / truly-ui

Truly-UI - Web Angular UI Components for Desktop Applications (Electron, NW, APP JS)
http://truly-ui.com
Other
215 stars 35 forks source link

Question: can I make a tl-button inline? #322

Closed JPGygax68 closed 5 years ago

JPGygax68 commented 5 years ago

I'd like to have a text field immediately followed by an "open folder" button (i.e., a file/folder picker). But the div element created by tl-button has display: block. What would you recommend?

EDIT: I noticed that tl-input puts the actual input field into a table-div as a table-cell. Is there a way to sneak an additional component into that table-div?

abalad commented 5 years ago

You can use the textAfter property of tl-input and clickAddon event as well:

Check this out: https://stackblitz.com/edit/truly-ui-simple-e6jr4y

JPGygax68 commented 5 years ago

Thank you! Can I create an icon button too?

abalad commented 5 years ago

But then you will have to use the property [iconBefore] or [iconAfter] You can check this example and others in the documentation: http://truly-ui.com/input Ex.

<tl-input [iconBefore] = "'ion ion-card'" [iconAfter] = "'ion ion-social-usd'"> </ tl-input>
JPGygax68 commented 5 years ago

Works perfectly, thanks again! I'm sorry, that was in the docs, I don't know how I missed it.