Differences

This shows you the differences between two versions of the page.

--- wiki:syntax:common_attributes [Wednesday, June 14, 2023 01:31 AM] – removed - external edit (Unknown date) 127.0.0.1
+++ wiki:syntax:common_attributes [Sunday, July 16, 2023 11:49 PM] (current) – Nathan C. McGuire
@@ Line 1: / Line 1: @@
+====== 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>