This page should be used when creating and testing new designs to find usability and/or design issues. {{ lipsum|replace({'…': '.'}) }}
{{ linksum|raw }} {{ lipsum }}
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Table content | {{ lipsum }} | {{ m.icon('check-lg') }} |
| Another content | Lorem ipsum | {{ m.icon('x-lg') }} |
{{ linksum|raw }}
{{ lipsum }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum }}
{{ color|capitalize }}: {{ linksum|raw }}
{% for type in types %} {{ type|capitalize }} {% endfor %}
{% for type in types_buttons %} {{ f.button(type|capitalize, {'btn_type': type, 'name': 'button-' ~ type}) }} {% endfor %}
{{ shortsum }}
f.input(id, label, opt)
{{ f.input('form-input-text', 'Text field', {
'value': 'Value',
}) }}
{{ f.input('form-input-text-label-icons', 'Text field with required and info icon', {
'value': 'Value',
'required_icon': true,
'info': 'Very important field info!',
}) }}
{{ f.input('form-input-text-hidden-label', 'Hidden label', {
'value': 'Hidden label',
'hide_label': true,
}) }}
{{ f.input('form-input-text-disabled', 'Disabled', {
'disabled': true,
'value': 'Value',
}) }}
{{ f.input('form-input-text-readonly', null, {
'type': 'Readonly',
'readonly': true,
'value': 'w/o label',
}) }}
f.password(id, label, opt)
{{ f.input('form-input-password', 'Password', {
'type': 'password',
'value': 'Value',
}) }}
f.number(id, label, opt)
{{ f.number('form-input-number', 'Number field', {
'type': 'number',
'value': 42,
}) }}
{{ f.number('form-input-number-label-icons', 'Number field with required and info icon', {
'type': 'number',
'value': 42,
'required_icon': true,
'info': 'Very important field info!',
}) }}
{{ f.number('form-input-number-disabled', 'Disabled', {
'disabled': true,
'value': 42,
}) }}
{{ f.number('form-input-number-readonly', 'Readonly', {
'readonly': true,
'value': 42,
}) }}
{{ f.number('form-input-number-wo-label', null, {
'type': 'number',
'value': 42,
}) }}
f.textarea(id, label, opt)
{{ f.textarea('form-input-textarea', 'Textarea', {
'rows': 2,
'value': lipsum,
}) }}
{{ f.textarea('form-input-textarea-label-icons', 'Textarea with required and info icon', {
'required_icon': true,
'info': 'Very important field info!',
'rows': 2,
'value': lipsum,
}) }}
{{ f.textarea('form-input-textarea-wo-label', null, {
'required_icon': true,
'rows': 2,
'value': 'w/o label',
}) }}
f.textarea(id, label, data, opt)
{{ f.select('form-input-select-1', 'Select 1', {
'opt1': 'Option 1',
'opt2': 'Option 2',
'opt3': 'Another option',
'opt4': 'A looooooooong item item item item',
}) }}
{{ f.select(
'form-input-select-2',
'Select 2',
{
'sh': 'Bash',
'js': 'JavaScript',
'p': 'PHP',
'py': 'Python',
},
{
'selected': 'js',
},
) }}
{{ f.select('form-input-select-2', 'Select 3', selectOptions, {
'selected': 'option_7',
}) }}
{{ f.select('date-select', 'Date select', dateSelectOptions) }}
f.button(label, opt)
f.submit(label, opt)
f.delete(label, opt)
f.checkbox(id, label, opt)
{{ f.checkbox('form-input-checkbox', 'Checkbox 1', {
'checked': true, 'value': '1',
}) }}
{{ f.checkbox('form-input-checkbox-2', 'Checkbox 2', {
'checked': false, 'value': '2',
}) }}
{{ f.checkbox('form-input-checkbox-3', 'Checkbox 3', {
'checked': false, 'value': '3',
}) }}
f.switch(id, label, opt)
{{ f.switch('form-switch', 'Switch') }}
{{ f.switch('form-switch-checked', 'Switch (checked)', {
'checked': true,
}) }}
{{ f.switch('form-switch-disabled', 'Switch (disabled)', {
'disabled': true,
}) }}
hidden(name, value)
{{ f.hidden('hidden-name', 'hidden value') | escape }}
3.1415926535897932384626433832795
Li Europan lingues es membres del sam familie.
Lor separat existentie es un myth.
Por scientie, musica, sport etc, litot Europa usa li sam vocabular.angel(){{ m.angel() }}
icon(icon_name){{ m.icon('star') }}
iconBool(true){{ m.iconBool(true) }} {{ m.iconBool(false) }}
alert(message, type){{ m.alert('Test content', 'info') }}
user(user, opt)
{{ m.user(demo_user) }}
{{ m.user(demo_user_2, {'pronoun': true}) }}
button(label, url, type, size){{ m.button('Label', '#', 'info', 'sm') }}