button widget - button class tc-btn-rounded

23 views
Skip to first unread message

A Gloom

unread,
Jul 17, 2019, 2:18:28 PM7/17/19
to TiddlyWikiDocs
This from a post I had posted in the users group but may be of interest to documenters

as always, just a suggestion/heads up note

I didn't see 'tc-btn-rounded' listed along with

Tip: Set class to tc-btn-invisible tc-tiddlylink to have a button look like an internal link.

works with images such as TW core svg's

<$button class='tc-btn-rounded' style="margin:2px 0px; padding:5px; border:solid 2px;"><$action-navigate $to="#Create new bookmark"/> {{$:/core/ui/Buttons/new-tiddler}}</$button>



recreates the new tiddler button (with the + icon) found above the search bar but with your own button action

also works with text to create circle or oval buttons:

<$button class='tc-btn-rounded' style="margin:2px 0px; padding:5px; border:solid 2px;"><$action-navigate $to="#Create new bookmark"/>555</$button>


creates an oval button labeled 555

the dimensions/shape of the circle/oval determined by:

a single character produces a circle

a single line of several characters produces an oval, width determined by length of word

additional lines of text would increase the height of the oval as would adfusting the padding of the style attribute

the circle/oval size/shape can also be fine tuned using padding-top, padding-bottom, padding-right, padding-left
Reply all
Reply to author
Forward
0 new messages