Table of Contents
Common Attributes
https://github.com/nomadjimbob/mikioplugin/wiki/Common-Attributes
Common Attributes are available on most elements across the Mikio Plugin range.
Alignment
Aligns an element on the page
<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 %
.
<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>
Height
Sets the height of the element. Sizes can be in %
, px
, rem
or em
.
<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 %
.
![](https://wiki.osageschools.org/_media/wiki/syntax/district.jpg)
![](https://wiki.osageschools.org/_media/wiki/syntax/district.jpg)
![](https://wiki.osageschools.org/_media/wiki/syntax/district.jpg)
![](https://wiki.osageschools.org/_media/wiki/syntax/district.jpg)
<box width=10em round=.25em>{{: district.jpg?nolink|}}</box> <box width=10em round=.5em>{{: district.jpg?nolink|}}</box> <box width=10em round=40px>{{: district.jpg?nolink|}}</box> <box width=10em round=100%>{{: district.jpg?nolink|}}</box>
Shadow
Adds a shadow to an element.
<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.
<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
<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>
Tooltip
Adds a tooltip that is displayed when the cursor hovers over Hover me
<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 #
<button url="http://www.my_anchor.com/">Go to my_anchor</button>
Vertical Alignment
Sets the elements vertical alignment
<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
.
<alert danger width=20em shadow> <icon fa exclamation-triangle>This is a danger alert with a set width and shadow </alert>
Set Attributes
https://github.com/nomadjimbob/mikioplugin/wiki/Set-Attributes
Mikio Plugin has a special element named setattr
that can be used on a page, allowing the reuse of common attributes across several other elements using the attr
attribute with a value of the name of the setattr
.
<setattr name=mybox border-width=1px border-color=green> <setattr name=otherbox border-width=2px border-color=blue>
The above sets elements that have the attribute attr=mybox
to have the attributes border-width=1px
and border-color=green
while elements that have the attribute attr=otherbox
to have the attributes border-width=2px
and border-color=blue
<box attr=mybox>The box</box> <box attr=otherbox>The box 2</box> <box attr=mybox>The box 3</box> <box attr=otherbox>The box 4</box>