Mecha provides some built-in elements that you can use to enhance the user interface and interaction of your plugin page. These elements will be available only when you are logged in. Although you can still load them manually so that these elements can be available publicly (like what I’ve done on this page), but this is not recommended since you have the ability to make similar things as a plugin that is not as complicated as these.
Button
I recommend you to use the button class names in accordance with the button function. These classes, by default, will not affect the overall appearance. Appearance will be changed only when you give CSS declarations to the button classes.
Class
Usage
.btn
The base class. Use this class to make links and other span elements to be look like a push button.
.btn-default
Default class name for the default button appearance.
.btn-action
This class is intended to represent a button that functions to execute an action (for example, save or update data).
.btn-accept
This class is intended to represent a button that functions to accept something.
.btn-begin
This class is intended to represent a button that functions to start doing something.
.btn-construct
This class is intended to represent a button that functions to create or build something.
.btn-destruct
This class is intended to represent a button that functions to destruct, delete or remove something.
.btn-reject
This class is intended to represent a button that functions to reject something.
Use this class to make the text input size becomes smaller.
.input-block
Use this class to expand the text input into 100% width of its parent container.
.textarea-small
Use this class to make the text area size becomes smaller.
.textarea-block
Use this class to expand the text area into 100% width of its parent container.
.textarea-expand
Use this class to expand the text area height so that it can be used to write something with more liberal.
.code
Use this class to represent that the text input is intended to be used as a source code input, not just a regular text/sentence input. For the text area elements, adding this class will also automatically activate the MTE plugin to the text area so that you can do, for example, smart code indentation.
.MTE
Use this class to activate the MTE plugin without having to make the text area text display turned into monospaced font.
.MTE-ignore
Extend this class with the .code class to make the text area text display turned into monospaced font without having to activate the MTE plugin on it.
Attribute
Usage
data-MTE-config
Use this attribute to override the default MTE plugin configuration data. The attribute value must be written in a valid JSON format.
Use this class to make the select box size becomes smaller.
.select-block
Use this class to expand the select box into 100% width of its parent container.
Check Box
Mecha will automatically changes the default check box appearance into a custom check box appearance.
Check Box Markup
Although Mecha will automatically changes the default check box appearance into a custom check box appearance, I would still recommend you to set up the HTML markup of each check box item like this:
// `Form::checkbox($name, $value, $check, $text, $attr, $indent)`
echo Form::checkbox('agree', 1, true, 'I agree to the term of service.');
Check Box Demo
Check Box Options
Attribute
Usage
data-connection
Use this attribute to make a “Ceck/Uncheck All” interaction on the check box. The value of data-connection attribute must be the same with the check boxes name attribute you want to connect.
<input type="checkbox" data-connection="blood[]">
Check Box Hooks
Hook
Description
on_checkbox_change
Will be triggered on every check box change event.
on_checkbox_check
Will be triggered on every check box check event.
on_checkbox_uncheck
Will be triggered on every check box uncheck event.
Radio
Mecha will also automatically changes the default radio appearance into a custom radio appearance.
The default grid system consists of six columns–based division. This is just a basic grid system implementation. There aren’t any specific standards for the break–points. You decide them:
Extend this class with the base .grid-group class to remove the gaps between grids.
<div class="grid-group no-gap"> … </div>
Tab
Tab allows you to put some parts of the page into a single region. Only one section that will be visible, while the others can be visible only if you click on the tab button of the related hidden section.
Note: ID on the tab section and the corresponding URL hash on the tab button are not required as long as you arrange the tabs and its sections in the same order:
Extend these custom attributes to the <input type="file"> element:
Attribute
Usage
data-icon-ready
Icon class for the accepting state.
data-icon-error
Icon class for the rejecting state.
data-accepted-extensions
List of lower–cased comma–separated allowed file extensions.
Note: The JavaScript file extensions validator that uses data-accepted-extensions attribute is just a helper for user interface interaction. You have to do the actual file validation in the server side.