Skip to content

K
kpp
Commit 3f51e028 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

no include-replace for forms

parent b67ac055
Show whitespace changes
Inline Side-by-side
Showing with 392 additions and 167 deletions
src/blocks/field-actions/field-actions.html
View file @ 3f51e028
<!--DEV <!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/field-actions/field-actions.html', {
"actions": "<button class=\"btn\">Отправить</button>"
})
-->
<div class="field-actions"> <div class="field-actions">
@@actions <button class="btn">Отправить</button>
</div> </div>
-->
src/blocks/field-checkbox/field-checkbox.html
View file @ 3f51e028
<!--DEV <!--DEV
Нужно убрать пробел между @-ами: <div class="field-checkbox">
<div class="field-checkbox__title">Стандартный флажок</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Использовать</span>
</label>
<div class="field-checkbox__help-text">Пояснение не обязательно.</div>
</div>
</div>
@ @include('blocks/field-checkbox/field-checkbox.html',{ <div class="field-checkbox">
"name": "Стандартные флажки", <div class="field-checkbox__title">Стандартные флажки</div>
"text": "Флажок", <div class="field-checkbox__input-wrap">
"mod": "", <label class="field-checkbox__name">
"helpText": "Есть общее название. При желании флажков можно написать несколько подряд." <input class="field-checkbox__input" type="checkbox" checked>
}) <span class="field-checkbox__name-text">Использовать</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Переиспользовать</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Нет</span>
</label>
</div>
</div>
@ @include('blocks/field-checkbox/field-checkbox.html',{ <div class="field-checkbox field-checkbox--custom">
"name": "Собственные флажки", <div class="field-checkbox__title">Собственный флажок</div>
"text": "Флажок", <div class="field-checkbox__input-wrap">
"mod": "custom", <label class="field-checkbox__name">
"helpText": "Есть общее название. При желании флажков можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS." <input class="field-checkbox__input" type="checkbox" checked>
}) <span class="field-checkbox__name-text">Да</span>
</label>
<div class="field-checkbox__help-text">Есть общее название. При желании флажков можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div>
</div>
--> <div class="field-checkbox field-checkbox--custom">
@@if(mod === ""){<div class="field-checkbox">}@@if(mod !== ""){<div class="field-checkbox field-checkbox--@@mod">} <div class="field-checkbox__title">Собственные флажки</div>
<div class="field-checkbox__title">@@name</div>
<div class="field-checkbox__input-wrap"> <div class="field-checkbox__input-wrap">
<label class="field-checkbox__name"> <label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked> <input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">@@text</span> <span class="field-checkbox__name-text">Да</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Нет</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Сто лет в обед</span>
</label> </label>
<div class="field-checkbox__help-text">@@helpText</div>
</div> </div>
</div> </div>
-->
src/blocks/field-file/field-file.html
View file @ 3f51e028
<!--DEV <!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/field-file/field-file.html', {
"name": "Выбор файлов",
"helpText": "Работа этого стилизованного поля требует Javascript-а. Но только работа. Стилизация — нет."
})
-->
<div class="field-file"> <div class="field-file">
<div class="field-file__name">@@name</div> <div class="field-file__name">Выбор файлов</div>
<label class="field-file__input-wrap"> <label class="field-file__input-wrap">
<input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple> <input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
<div class="field-file__name-text" data-button-text="Выбрать файл">Файлы не выбраны</div> <div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div>
<div class="field-file__help-text">@@helpText</div> <div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
</label> </label>
</div> </div>
-->
src/blocks/field-radio/field-radio.html
View file @ 3f51e028
<!--DEV <!--DEV
Нужно убрать пробел между @-ами: <div class="field-radio">
<div class="field-radio__title">Стандартная радиокнопка</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio">
<span class="field-radio__name-text">Да</span>
</label>
<div class="field-radio__help-text">Пояснение не обязательно.</div>
</div>
</div>
@ @include('blocks/field-radio/field-radio.html',{ <div class="field-radio">
"name": "Стандартные радиокнопки", <div class="field-radio__title">Стандартные радиокнопки</div>
"text": "Радиокнопка", <div class="field-radio__input-wrap">
"mod": "", <label class="field-radio__name">
"helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд." <input class="field-radio__input" type="radio" name="radio-demo" checked>
}) <span class="field-radio__name-text">Да</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo">
<span class="field-radio__name-text">Нет</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo">
<span class="field-radio__name-text">Не знаю</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
@ @include('blocks/field-radio/field-radio.html',{ <div class="field-radio field-radio--custom">
"name": "Собственные радиокнопки", <div class="field-radio__title">Собственная радиокнопка</div>
"text": "Радиокнопка", <div class="field-radio__input-wrap">
"mod": "custom", <label class="field-radio__name">
"helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS." <input class="field-radio__input" type="radio">
}) <span class="field-radio__name-text">Да</span>
</label>
<div class="field-radio__help-text">Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div>
</div>
--> <div class="field-radio field-radio--custom">
@@if(mod === ""){<div class="field-radio">}@@if(mod !== ""){<div class="field-radio field-radio--@@mod">} <div class="field-radio__title">Собственные радиокнопки</div>
<div class="field-radio__title">@@name</div>
<div class="field-radio__input-wrap"> <div class="field-radio__input-wrap">
<label class="field-radio__name"> <label class="field-radio__name">
<input class="field-radio__input" type="radio" checked> <input class="field-radio__input" type="radio" name="radio-demo-2" checked>
<span class="field-radio__name-text">@@text</span> <span class="field-radio__name-text">Да</span>
</label> </label>
<div class="field-radio__help-text">@@helpText</div> <label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2">
<span class="field-radio__name-text">Нет</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2">
<span class="field-radio__name-text">Не знаю</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div> </div>
</div> </div>
-->
src/blocks/field-range/field-range.html
View file @ 3f51e028
<!--DEV <!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/field-range/field-range.html',{
"name": "Range",
"properties": "min=\"1\" max=\"100\" step=\"5\" value=\"60\"",
"helpText": "<code>min=\"1\" max=\"100\" step=\"5\" value=\"60\"</code>, стилизован без JS."
})
-->
<div class="field-range"> <div class="field-range">
<div class="field-range__name">@@name</div> <div class="field-range__name">Range</div>
<div class="field-range__input-wrap"> <div class="field-range__input-wrap">
<input class="field-range__input" type="range" @@properties> <input class="field-range__input" type="range" min="1" max="100" step="1" value="70">
<div class="field-range__help-text">@@helpText</div> <div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code>, стилизован без JS.</div>
</div> </div>
</div> </div>
-->
src/blocks/field-select/field-select.html
View file @ 3f51e028
<!--DEV <!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/field-select/field-select.html')
-->
<label class="field-select"> <label class="field-select">
<div class="field-select__name">@@name</div> <div class="field-select__name">Селект</div>
<div class="field-select__select-wrap"> <div class="field-select__select-wrap">
<select class="field-select__select"> <select class="field-select__select">
@@options <optgroup label="Группа">
<option>Значение 1</option>
<option>Значение 2</option>
<option>Значение 3</option>
</optgroup>
<option>Значение 10</option>
</select> </select>
<small class="field-select__help-text">@@helpText</small> <small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
</div> </div>
</label> </label>
-->
src/blocks/field-select/img_to_bg/select-down.svg
View file @ 3f51e028
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 11" width="17" height="11"><path d="M.202 1.97L1.956.204A.61.61 0 0 1 2.43 0a.61.61 0 0 1 .47.204L8.5 5.84 14.1.204A.61.61 0 0 1 14.57 0a.61.61 0 0 1 .474.204l1.754 1.766a.618.618 0 0 1 .202.473.62.62 0 0 1-.202.476l-7.826 7.875A.61.61 0 0 1 8.5 11a.61.61 0 0 1-.472-.204L.202 2.92A.618.618 0 0 1 0 2.444c0-.203.067-.34.202-.475z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 11" width="17" height="11"><path fill="#B1B1B1" d="M.202 1.97L1.956.204A.61.61 0 0 1 2.43 0a.61.61 0 0 1 .47.204L8.5 5.84 14.1.204A.61.61 0 0 1 14.57 0a.61.61 0 0 1 .474.204l1.754 1.766a.618.618 0 0 1 .202.473.62.62 0 0 1-.202.476l-7.826 7.875A.61.61 0 0 1 8.5 11a.61.61 0 0 1-.472-.204L.202 2.92A.618.618 0 0 1 0 2.444c0-.203.067-.34.202-.475z"/></svg>
src/blocks/field-text/field-text.html
View file @ 3f51e028
<!--DEV <!--DEV
Нужно убрать пробел между @-ами: <label class="field-text">
<div class="field-text__name">Любое поле, выглядящее как текстовое</div>
@ @include('blocks/field-text/field-text.html',{ <div class="field-text__input-wrap">
"type": "text", <input class="field-text__input" type="text" placeholder="input[type=text]">
"name": "Имя", <div class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</div>
"placeholder": "Имя", </div>
"helpText":"Введите имя" </label>
})
-->
<label class="field-text"> <label class="field-text">
<div class="field-text__name">@@name</div> <div class="field-text__name">Многострочное текстовое поле</div>
<div class="field-text__input-wrap"> <div class="field-text__input-wrap">
@@if (type === 'textarea') {<textarea class="field-text__input" placeholder="@@placeholder"></textarea>}@@if (type !== 'textarea') {<input class="field-text__input" type="@@type" placeholder="@@placeholder">} <textarea class="field-text__input" placeholder="textarea"></textarea>
<div class="field-text__help-text">@@helpText</div> <div class="field-text__help-text">Обёртка — <code>label</code>.</div>
</div> </div>
</label> </label>
-->
src/blocks/field-toggler/field-toggler.html
View file @ 3f51e028
<!--DEV <!--DEV
Нужно убрать пробел между @-ами: <div class="field-toggler">
<div class="field-toggler__title">Переключатель-флажок</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox">
<span class="field-toggler__name-text">Использовать</span>
</label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
<div class="field-toggler">
<div class="field-toggler__title">Переключатели-флажки</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox" checked>
<span class="field-toggler__name-text">Использовать</span>
</label>
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox">
<span class="field-toggler__name-text">Не использовать</span>
</label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
@ @include('blocks/field-toggler/field-toggler.html',{ <div class="field-toggler">
"name": "Переключатель", <div class="field-toggler__title">Переключатель-радиокнопка</div>
"type": "checkbox", <div class="field-toggler__input-wrap">
"text": "Флажок", <label class="field-toggler__name">
"checked": "", <input class="field-toggler__input" type="radio">
"helpText": "Какое-то описание" <span class="field-toggler__name-text">Использовать</span>
}) </label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
-->
<div class="field-toggler"> <div class="field-toggler">
<div class="field-toggler__title">@@name</div> <div class="field-toggler__title">Переключатели-радиокнопки</div>
<div class="field-toggler__input-wrap"> <div class="field-toggler__input-wrap">
<label class="field-toggler__name"> <label class="field-toggler__name">
<input class="field-toggler__input" type="@@type" @@checked> <input class="field-toggler__input" type="radio" name="radio-demo-toggler" checked>
<span class="field-toggler__name-text">@@text</span> <span class="field-toggler__name-text">Использовать</span>
</label>
<label class="field-toggler__name">
<input class="field-toggler__input" type="radio" name="radio-demo-toggler">
<span class="field-toggler__name-text">Не использовать</span>
</label> </label>
<div class="field-toggler__help-text">@@helpText</div> <div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div> </div>
</div> </div>
-->
src/blocks_library.html
View file @ 3f51e028
...@@ -283,72 +283,215 @@ ...@@ -283,72 +283,215 @@
<div class="col-md-6"> <div class="col-md-6">
<form action="" class="form"> <form action="" class="form">
<fieldset> <fieldset>
<legend>Варианты разметки и модификаторы</legend> <legend>Варианты разметки и модификаторы</legend>
@@include('blocks/field-text/field-text.html',{
"type": "text", <label class="field-text">
"name": "Любое поле, выглядящее как текстовое", <div class="field-text__name">Любое поле, выглядящее как текстовое</div>
"placeholder": "input[type=text]", <div class="field-text__input-wrap">
"helpText":"Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля." <input class="field-text__input" type="text" placeholder="input[type=text]">
}) <div class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</div>
@@include('blocks/field-text/field-text.html',{ </div>
"type": "textarea", </label>
"name": "Многострочное текстовое поле",
"placeholder": "textarea", <label class="field-text">
"helpText": "Обёртка — <code>label</code>." <div class="field-text__name">Многострочное текстовое поле</div>
}) <div class="field-text__input-wrap">
@@include('blocks/field-checkbox/field-checkbox.html',{ <textarea class="field-text__input" placeholder="textarea"></textarea>
"name": "Стандартные флажки", <div class="field-text__help-text">Обёртка — <code>label</code>.</div>
"text": "Флажок", </div>
"mod": "", </label>
"helpText": "Есть общее название. При желании флажков можно написать несколько подряд."
}) <div class="field-checkbox">
@@include('blocks/field-checkbox/field-checkbox.html',{ <div class="field-checkbox__title">Стандартный флажок</div>
"name": "Собственные флажки", <div class="field-checkbox__input-wrap">
"text": "Флажок", <label class="field-checkbox__name">
"mod": "custom", <input class="field-checkbox__input" type="checkbox" checked>
"helpText": "Есть общее название. При желании флажков можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS." <span class="field-checkbox__name-text">Использовать</span>
}) </label>
@@include('blocks/field-radio/field-radio.html',{ <div class="field-checkbox__help-text">Пояснение не обязательно.</div>
"name": "Стандартные радиокнопки", </div>
"text": "Радиокнопка", </div>
"mod": "",
"helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд." <div class="field-checkbox">
}) <div class="field-checkbox__title">Стандартные флажки</div>
@@include('blocks/field-radio/field-radio.html',{ <div class="field-checkbox__input-wrap">
"name": "Собственные радиокнопки", <label class="field-checkbox__name">
"text": "Радиокнопка", <input class="field-checkbox__input" type="checkbox" checked>
"mod": "custom", <span class="field-checkbox__name-text">Использовать</span>
"helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS." </label>
}) <label class="field-checkbox__name">
@@include('blocks/field-toggler/field-toggler.html',{ <input class="field-checkbox__input" type="checkbox">
"name": "Переключатель", <span class="field-checkbox__name-text">Переиспользовать</span>
"type": "checkbox", </label>
"text": "Флажок", <label class="field-checkbox__name">
"checked": "", <input class="field-checkbox__input" type="checkbox">
"helpText": "Какое-то описание" <span class="field-checkbox__name-text">Нет</span>
}) </label>
@@include('blocks/field-select/field-select.html',{ <div class="field-checkbox__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
"name": "Селект", </div>
"options": "<optgroup label=\"Группа\"><option>Значение 1</option><option>Значение 2</option><option>Значение 3</option></optgroup><option>Значение 10</option>", </div>
"helpText": "Обёртка — <code>&lt;label&gt;</code>."
}) <div class="field-checkbox field-checkbox--custom">
@@include('blocks/field-range/field-range.html',{ <div class="field-checkbox__title">Собственный флажок</div>
"name": "Range", <div class="field-checkbox__input-wrap">
"properties": "min=\"1\" max=\"100\" step=\"1\" value=\"70\"", <label class="field-checkbox__name">
"helpText": "<code>min=\"1\" max=\"100\" step=\"1\" value=\"70\"</code>, стилизован без JS." <input class="field-checkbox__input" type="checkbox" checked>
}) <span class="field-checkbox__name-text">Да</span>
@@include('blocks/field-range/field-range.html',{ </label>
"name": "Range", <div class="field-checkbox__help-text">Есть общее название. При желании флажков можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
"properties": "min=\"1\" max=\"30\" step=\"5\" value=\"10\"", </div>
"helpText": "<code>min=\"1\" max=\"30\" step=\"5\" value=\"10\"</code>, стилизован без JS." </div>
})
@@include('blocks/field-file/field-file.html', { <div class="field-checkbox field-checkbox--custom">
"name": "Выбор файлов", <div class="field-checkbox__title">Собственные флажки</div>
"helpText": "Работа этого стилизованного поля требует Javascript-а. Но только работа. Стилизация — нет." <div class="field-checkbox__input-wrap">
}) <label class="field-checkbox__name">
@@include('blocks/field-actions/field-actions.html', { <input class="field-checkbox__input" type="checkbox" checked>
"actions": "<button class=\"btn\">Отправить</button>" <span class="field-checkbox__name-text">Да</span>
}) </label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Нет</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Сто лет в обед</span>
</label>
<div class="field-checkbox__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
<div class="field-radio">
<div class="field-radio__title">Стандартная радиокнопка</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio">
<span class="field-radio__name-text">Да</span>
</label>
<div class="field-radio__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-radio">
<div class="field-radio__title">Стандартные радиокнопки</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo" checked>
<span class="field-radio__name-text">Да</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo">
<span class="field-radio__name-text">Нет</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo">
<span class="field-radio__name-text">Не знаю</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
<div class="field-radio field-radio--custom">
<div class="field-radio__title">Собственная радиокнопка</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio">
<span class="field-radio__name-text">Да</span>
</label>
<div class="field-radio__help-text">Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div>
</div>
<div class="field-radio field-radio--custom">
<div class="field-radio__title">Собственные радиокнопки</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2" checked>
<span class="field-radio__name-text">Да</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2">
<span class="field-radio__name-text">Нет</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2">
<span class="field-radio__name-text">Не знаю</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
<div class="field-toggler">
<div class="field-toggler__title">Переключатель-флажок</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox">
<span class="field-toggler__name-text">Использовать</span>
</label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
<div class="field-toggler">
<div class="field-toggler__title">Переключатели-флажки</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox" checked>
<span class="field-toggler__name-text">Использовать</span>
</label>
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox">
<span class="field-toggler__name-text">Не использовать</span>
</label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
<label class="field-select">
<div class="field-select__name">Селект</div>
<div class="field-select__select-wrap">
<select class="field-select__select">
<optgroup label="Группа">
<option>Значение 1</option>
<option>Значение 2</option>
<option>Значение 3</option>
</optgroup>
<option>Значение 10</option>
</select>
<small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
</div>
</label>
<div class="field-range">
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<input class="field-range__input" type="range" min="1" max="100" step="1" value="70">
<div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code>, стилизован без JS.</div>
</div>
</div>
<div class="field-range">
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<input class="field-range__input" type="range" min="1" max="30" step="1" value="3">
<div class="field-range__help-text"><code>min="1" max="30" step="1" value="3"</code>, стилизован без JS.</div>
</div>
</div>
<div class="field-file">
<div class="field-file__name">Выбор файлов</div>
<label class="field-file__input-wrap">
<input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
<div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div>
<div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
</label>
</div>
<div class="field-actions">
<button class="btn">Отправить</button>
</div>
</fieldset> </fieldset>
</form> </form>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment