Common Attributes - nomadjimbob/mikioplugin GitHub Wiki

Common Attributes are available on most elements across the Mikio Plugin range.

Alignment

Aligns an element on the page

Example Syntax

<alert dark align-left width=20em>This is a dark alert aligned left</alert>
<alert dark align-center width=20em>This is a dark alert aligned center</alert>
<alert dark align-right width=20em>This is a dark alert aligned right</alert>

Border

Applies a border to the element.

border-color: sets the borders color. Supports CSS based values such as HEX and RGBA.
border-width: sets the borders width. Supports px, em, rem and %. Can also be formatted to support different widths for each side. round: sets the border radius. Supports px, em, rem and %.

Example Syntax

<box width=10em text-center border-color=#ffff00>This is some text</box>
<box width=10em text-center border-color=green border-width=10px>This is some text</box>
<box width=10em text-center border-color=green border-width="10px 0 10px 0">This is some text</box>
<box width=10em text-center border-color=rgba(0,0,0,.5) border-width=4px>This is some text</box>
</row>

Height

Sets the height of the element. Sizes can be in %, px, rem or em.

Example Syntax

<box width=10em height=10em border-color=pink>This is some text</box>

Rounded Corners

Adds rounded corners (or border radius) to an element. Supports px, em, rem and %.

Example Syntax

<box width=10em round=.25em>{{:badgeduino_002b.jpg?nolink|}}</box>
<box width=10em round=.5em>{{:badgeduino_002b.jpg?nolink|}}</box>
<box width=10em round=40px>{{:badgeduino_002b.jpg?nolink|}}</box>
<box width=10em round=100%>{{:badgeduino_002b.jpg?nolink|}}</box>

Shadow

Adds a shadow to an element.

Example Syntax

<button>No shadow</button>
<button shadow>Normal shadow</button>
<button shadow-large>Large shadow</button>
<button shadow-small>Small shadow</button>

Styles

Styles elements using the standard Bootstrap colors. Supports the styles:

  • primary
  • secondary
  • success
  • danger
  • warning
  • info
  • light
  • dark

Example Syntax

<alert>A simple primary alert - check it out!</alert>
<alert secondary>A simple secondary alert - check it out!</alert>
<alert success>A simple success alert - check it out!</alert>
<alert danger>A simple danger alert - check it out!</alert>
<alert warning>A simple warning alert - check it out!</alert>
<alert info>A simple info alert - check it out!</alert>
<alert light>A simple light alert - check it out!</alert>
<alert dark>A simple dark alert - check it out!</alert>

Text Alignment

Aligns text within an element

Example Syntax

<card title="Special title treatment" width=18em text-left>
With supporting text below as a natural lead-in to additional content.
<button>Go somewhere</button>
</card>

<card title="Special title treatment" width=18em text-center>
With supporting text below as a natural lead-in to additional content.
<button>Go somewhere</button>
</card>

<card title="Special title treatment" width=18em text-right>
With supporting text below as a natural lead-in to additional content.
<button>Go somewhere</button>
</card>

Text Decoration

Applies text decorations within an element

Example Syntax

<text text-decoration=underline>The colorful flowers bloomed vibrantly in the lush garden under the warm, golden sun.</text>
<text text-decoration=overline>The colorful flowers bloomed vibrantly in the lush garden under the warm, golden sun.</text>
<text text-decoration=line-through>The colorful flowers bloomed vibrantly in the lush garden under the warm, golden sun.</text>
<text text-decoration="underline red double 5px">The colorful flowers bloomed vibrantly in the lush garden under the warm, golden sun.</text>

Tooltip

Adds a tooltip that is displayed when the cursor hovers over

Example Syntax

<button tooltip="This is not a good tip">Hover me</button>

URL

Some elements support a URL attribute that opens a page when the user clicks.

  • External web pages are required to begin with http:// or https://
  • Wiki pages can be written as the direct namespace
  • Anchors must begin with #

Example Syntax

<button url="http://www.my_anchor.com/">Go to my_anchor</button>

New Tab

You can also append newtab attribute into the element and the URL will open in a new tab within the browser.

<button url="http://www.my_anchor.com/" newtab>Go to my_anchor</button>

Vertical Alignment

Sets the elements vertical alignment

Example Syntax

<box width=10em height=10em border-color=black vertical-align=middle>My text</box>

Width

Sets the width of the element. Sizes can be in %, px, rem or em.

Example Syntax

<alert danger width=20em shadow>
  <mikio-icon fa exclamation-triangle>This is a danger alert with a set width and shadow
</alert>
⚠️ **GitHub.com Fallback** ⚠️