Mikio Syntax
Text
<text color="#e59c09" size=24px weight=bold line-height=2 background-color="FFFFee" text-decoration="underline red double 2px" > \\
color=(color name or hex), size:=(px, em, rem or %), weight=(normal, bold, bolder or number thickness), background-color=(color name or hex), line-height=(Positive integer), text-decoration=(underline, overline, line-through, "underline red double 5px"</text>
RESULT
color=(color name or hex), size:=(px, em, rem or %), weight=(normal, bold, bolder or number thickness), background-color=(color name or hex), line-height=(Positive integer), text-decoration=(underline, overline, line-through, “underline red double 5px”
Tab Group
<tab-group pills>
<tab title="A tab" pills>
Tab Group can have pills or without it. You can have anything in a tab. Tabs can have title & can be disabled.
</tab>
<tab title="Second tab">
Contains of Second Tab. Third Tab is disabled.
</tab>
<tab disabled title="The third tab">
Third Tab is disabled.
</tab>
</tab-group>
RESULT
Tab Group can have pills or without it. You can have anything in a tab. Tabs can have title & can be disabled.
Contains of Second Tab. Third Tab is disabled.
Third Tab is disabled.
Small Text
This is normal Text <small>and this is small</small>Understood?
Result
This is normal Text and this is small Understood?
Placeholder Text
<placeholder text="some text" color=gray text-color=red height=4em width=15em>
Result
Pagenation
<pagenation>
<pagenation-item url="wiki:B">
<pagenation-item url="wiki:A">
</pagenation>
Result
List Group
this list works even under cards & Boxes
<listgroup width=50%>
<listgroup-item active> <listgroup flush> removes borders.</listgroup-item>
<listgroup-item disabled><listgroup horizontal> lists items in a row</listgroup-item>
<listgroup-item>Morbi leo risus</listgroup-item>
</listgroup>
Result
- <listgroup flush> removes borders.
- <listgroup horizontal> lists items in a row
- Some Text
Button
Remember that the colors of the Button as well as Alert are based on same name to color relation.
<button primary width=10%>Primary</button>
<button secondary shadow-large>Secondary</button>
<button success shadow-small>Success</button>
<button danger shadow>Danger</button>
<button warning>Warning</button>
<button info>Info</button>
<button light>Light</button>
<button dark>Dark</button>
<button link>Link</button>
RESULT
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link
ALERT
Same color & Shadow style as per Button
<alert danger shadow-large width=50em dismissible >A simple secondary alert - check it out!</alert>
Result
BADGE
Every config option similar to Button
<button large>Notifications <badge light>4</badge></button>
Result
Notifications 4