====== Common Attributes ======
[[doku>plugin:mikioplugin|Mikio Plugin]]

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>

<code ->
<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>
</code>

===== 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%% %%''%''.
<row>
<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>

<code ->
<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>
</code>

===== 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>

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

===== Rounded Corners =====
Adds rounded corners (or border radius) to an element. Supports%% %%''px'',%% %%''em'',%% %%''rem''%% %%and%% %%''%''.
<row>
<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>
</row>
<code ->
<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>
</code>

===== Shadow =====
Adds a shadow to an element.
<row>
<button>No shadow</button>
<button shadow>Normal shadow</button>
<button shadow-large>Large shadow</button>
<button shadow-small>Small shadow</button>
</row>
<code ->
<button>No shadow</button>
<button shadow>Normal shadow</button>
<button shadow-large>Large shadow</button>
<button shadow-small>Small shadow</button>
</code>

===== 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>
<code ->
<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>
</code>

===== Text Alignment =====
Aligns text within an element
<row>
<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>
</row>
<code ->
<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>
</code>

===== Tooltip =====
Adds a tooltip that is displayed when the cursor hovers over
<button tooltip="This is not a good tip">Hover me</button>
<code ->
<button tooltip="This is not a good tip">Hover me</button>
</code>

===== 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>
<code ->
<button url="http://www.my_anchor.com/">Go to my_anchor</button>
</code>

===== Vertical Alignment ====
Sets the elements vertical alignment
<box width=10em height=10em border-color=black vertical-align=middle>My text</box>
<code ->
<box width=10em height=10em border-color=black vertical-align=middle>My text</box>
</code>

===== 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>
<code ->
<alert danger width=20em shadow>
<icon fa exclamation-triangle>This is a danger alert with a set width and shadow
</alert>
</code>

===== 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''.

<code ->
<setattr name=mybox border-width=1px border-color=green>
<setattr name=otherbox border-width=2px border-color=blue>
</code>

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''

<code ->
<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>
</code>

<setattr name=mybox border-width=1px border-color=green>
<setattr name=otherbox border-width=2px 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>