Skip to content

K
kpp
Commit 63361c5b authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Чекбоксы и радиокнопки

parent d450a30b
Hide whitespace changes
Inline Side-by-side
Showing with 254 additions and 166 deletions
src/blocks-library.pug
View file @ 63361c5b
......@@ -193,30 +193,78 @@ block content
+block-lib('field-text', 'Текстовое поле', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-text/readme.md
+field-text({
type: 'text',
title: 'Текстовое поле',
placeholder: 'Как заполнять',
helpText: 'Подсказка',
})
+field-text({
title: 'Многострочное текстовое поле',
textarea: true,
placeholder: 'Как заполнять',
helpText: 'Подсказка',
helpText: 'Подсказка под полем',
isTextarea: true,
mods: '',
attrs: {
name: 'test',
placeholder: 'Подсказка',
}
})
+field-text({
type: 'number',
title: 'Текстовое поле (number), ошибочный ввод',
placeholder: 'Как заполнять',
helpText: 'Подсказка',
props: 'Подсказка',
title: 'Текстовое поле',
helpText: 'Описание ошибки',
mods: 'error',
inputAttrs: {'id': '200', 'max': '200', 'min': '2'},
})
+field-text()
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-text/field-text.pug
+block-lib('field-checkbox', 'Флажок/чекбокс', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-checkbox/readme.md
+field-checkbox([
{
title: 'Чекбокс без группы',
helpText: 'Отдельно расположенный чекбокс',
attrs: {
name: 'check0',
}
},
])
+field-checkbox([
{
title: 'Чекбокс первый',
helpText: 'И, возможно, единственный',
mods: 'error',
attrs: {
name: 'check1',
checked: true,
}
},
{
title: 'Чекбокс второй',
helpText: 'А, нет. Не единственный...',
attrs: {
name: 'check2',
}
},
], 'Общее необязательное название')
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-checkbox/field-checkbox.pug
+block-lib('field-radio', 'Радиокнопки', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-radio/readme.md
+field-radio([
{
title: 'Первый',
helpText: 'И, возможно, единственный',
attrs: {
name: 'radio',
checked: true,
}
},
{
title: 'Второй',
helpText: 'А, нет. Не единственный...',
attrs: {
name: 'radio',
}
},
], 'Общее необязательное название')
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-radio/field-radio.pug
.burger.blocks-library__menu-toggler(data-toggle="off-canvas")
......
src/blocks/alert/alert.pug
View file @ 63361c5b
......@@ -6,14 +6,14 @@ mixin alert(title, mods)
//- title {string} - заголовок
//- mods {string} - стилевые модификаторы
//- Вызов:
//- +alert()
//- p Успех
//- +alert('Внимание!', 'warning, some-mod-name')
//- p Текст
//- +alert()
//- p Сообщение без модификаторов
//- +alert('Заголовok', 'danger')
//- p Проблема
+alert()
p Успех
+alert('Внимание!', 'warning, some-mod-name')
p Текст
+alert()
p Сообщение без модификаторов
+alert('Заголовok', 'danger')
p Проблема
-
//- список модификаторов
......
src/blocks/btn/btn.pug
View file @ 63361c5b
......@@ -7,9 +7,9 @@ mixin btn(text, mods, isInput)
//- mods {string} - список модификаторов
//- isInput {bool} - флаг «это тег input»
//- Вызов:
//- +btn('Кнопка-ссылка')(href='/') - есть href, это точно ссылка
//- +btn('Кнопка-input', '', true) - есть флаг isInput, это input
//- +btn('Кнопка-button', 'success') - нет href, нет isInput — это button
+btn('Кнопка-ссылка')(href='/') - есть href, это точно ссылка
+btn('Кнопка-input', '', true) - есть флаг isInput, это input
+btn('Кнопка-button', 'success') - нет href, нет isInput — это button
-
// список модификаторов
......
src/blocks/burger/burger.pug
View file @ 63361c5b
//- Все примеси в этом файле должны начинаться c имени блока (burger)
mixin burger(label, targetId, className)
mixin burger(label, targetId, switchableClass)
//- Принимает:
//- label {string} - описание, значение атрибута aria-label
//- targetId {string} - атрибут id целевого элемента (без символа #), на котором по клику будет меняться класс
//- className {string} - класс, добавляемый/убираемый с целевого элемента
//- label {string} - описание, значение атрибута aria-label
//- targetId {string} - атрибут id целевого элемента (без символа #), на котором по клику будет меняться класс
//- switchableClass {string} - класс, добавляемый/убираемый с целевого элемента
//- Вызов:
//- +burger('Показать пример кода', 'burger-code', 'blocks-library__code--shown')
//- +burger('Показать ничто')(data-some="SOME")
+burger('Показать пример кода', 'burger-code', 'blocks-library__code--shown')
+burger('Показать ничто')(data-some="SOME")
-
label = label || 'Toggle block ' + targetId
if (typeof(targetId) !== 'undefined' && targetId !== '') attributes['data-target-id'] = targetId
if (typeof(className) !== 'undefined' && className !== '') attributes['data-target-class-toggle'] = className
if (typeof(switchableClass) !== 'undefined' && switchableClass !== '') attributes['data-target-class-toggle'] = switchableClass
button.burger(aria-label=label)&attributes(attributes)
span= label
src/blocks/close/close.pug
View file @ 63361c5b
......@@ -5,7 +5,7 @@ mixin close(label)
//- Принимает:
//- label {string} - описание, значение атрибута aria-label
//- Вызов:
//- +close('Закрыть')
+close('Закрыть')
button.close(aria-label=label)&attributes(attributes)
span= label
src/blocks/code/code.pug
View file @ 63361c5b
......@@ -3,9 +3,9 @@
mixin code()
//- Вызов:
//- +code()
//- code <div class="some">...</div>
//- code <div class="some">...</div>
+code()
code <div class="some">...</div>
code <div class="some">...</div>
pre.code&attributes(attributes)
block
src/blocks/field-checkbox/field-checkbox.html deleted 100644 → 0
View file @ d450a30b
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/field-checkbox/field-checkbox.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="field-checkbox">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" id="" name="" checked>
<span class="field-checkbox__name-text">Текст у флажка</span>
</label>
</div>
<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" id="" name="" checked>
<span class="field-checkbox__name-text">Текст у флажка</span>
</label>
<div class="field-checkbox__help-text-wrap">
<div class="field-checkbox__help-text">Пояснение</div>
</div>
</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" id="" name="">
<span class="field-checkbox__name-text">Текст у флажка</span>
</label>
</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" id="" name="">
<span class="field-checkbox__name-text">Текст у флажка</span>
</label>
</div>
</div>
-->
src/blocks/field-checkbox/field-checkbox.pug 0 → 100644
View file @ 63361c5b
//- Все примеси в этом файле должны начинаться c имени блока (field-checkbox)
mixin field-checkbox(checkboxes, title)
//- Принимает:
//- checkboxes {array}
//- {
//- title: '' {string} - текст рядом с чекбоксом
//- helpText: '' {string} - пояснение под полем
//- mods: '' {string} - модификаторы блока
//- attrs: { {object} - любые атрибуты для input
//- type: {string}
//- placeholder: {string}
//- ...
//- }
//- },
//- ...
//- Вызов:
+field-checkbox([
{
title: 'Чекбокс0',
helpText: 'Подсказка',
attrs: {
name: 'check0',
}
},
])
+field-checkbox([
{
title: 'Чекбокс1',
helpText: 'Подсказка',
mods: 'error',
attrs: {
name: 'check1',
checked: true,
}
},
{
title: 'Чекбокс2',
helpText: 'Подсказка',
mods: 'error',
attrs: {
name: 'check2',
}
},
], 'ОбщееНазваниеБлока')
.field-checkbox&attributes(attributes)
if(typeof(title) !== 'undefined' && title)
.field-checkbox__title!= title
each checkbox in checkboxes
-
var allMods = '';
if(typeof(checkbox.mods) !== 'undefined' && checkbox.mods) {
var modsList = checkbox.mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' field-checkbox__input-wrap--' + modsList[i].trim();
}
}
.field-checkbox__input-wrap(class=allMods)
label.field-checkbox__name
input.field-checkbox__input(type='checkbox')&attributes(checkbox.attrs)
span.field-checkbox__name-text!= checkbox.title
if(typeof(checkbox.helpText) !== 'undefined' && checkbox.helpText)
.field-checkbox__help-text-wrap
.field-checkbox__help-text!= checkbox.helpText
src/blocks/field-checkbox/field-checkbox.scss
View file @ 63361c5b
......@@ -83,6 +83,7 @@ $line-height: 1.375em !default;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
transition: opacity $transition-time;
box-shadow: 1px 2px 0 #fff, inset 0 -2px 0 #fff;
@at-root input:checked ~ & {
opacity: 1;
......
src/blocks/field-checkbox/readme.md 0 → 100644
View file @ 63361c5b
В стилевом файле есть закомментированные фрагменты для замены нативного элемента своим (svg).
src/blocks/field-radio/field-radio.html deleted 100644 → 0
View file @ d450a30b
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/field-radio/field-radio.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="field-radio">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" id="" checked>
<span class="field-radio__name-text">Текст у радиобаттона</span>
</label>
</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" id="" name="demo-radio" checked>
<span class="field-radio__name-text">Текст у радиобаттона</span>
</label>
<div class="field-radio__help-text-wrap">
<div class="field-radio__help-text">Пояснение.</div>
</div>
</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" id="" name="demo-radio">
<span class="field-radio__name-text">Текст у радиобаттона</span>
</label>
</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" id="" name="demo-radio">
<span class="field-radio__name-text">Текст у радиобаттона</span>
</label>
</div>
</div>
-->
src/blocks/field-radio/field-radio.pug 0 → 100644
View file @ 63361c5b
//- Все примеси в этом файле должны начинаться c имени блока (field-radio)
mixin field-radio(radiobuttons, title)
//- Принимает:
//- radiobuttons {array}
//- {
//- title: '' {string} - текст рядом с чекбоксом
//- helpText: '' {string} - пояснение под полем
//- mods: '' {string} - модификаторы блока
//- attrs: { {object} - любые атрибуты для input
//- type: {string}
//- placeholder: {string}
//- ...
//- }
//- },
//- ...
//- Вызов:
+field-radio([
{
title: 'Радиокнопка1',
helpText: 'Подсказка',
mods: '',
attrs: {
name: 'radio',
checked: true,
}
},
{
title: 'Радиокнопка2',
helpText: 'Подсказка',
mods: '',
attrs: {
name: 'radio',
}
},
], 'ОбщееНазваниеБлока')
.field-radio&attributes(attributes)
if(typeof(title) !== 'undefined' && title)
.field-radio__title!= title
each checkbox in radiobuttons
-
var allMods = '';
if(typeof(checkbox.mods) !== 'undefined' && checkbox.mods) {
var modsList = checkbox.mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' field-radio__input-wrap--' + modsList[i].trim();
}
}
.field-radio__input-wrap(class=allMods)
label.field-radio__name
input.field-radio__input(type='radio')&attributes(checkbox.attrs)
span.field-radio__name-text!= checkbox.title
if(typeof(checkbox.helpText) !== 'undefined' && checkbox.helpText)
.field-radio__help-text-wrap
.field-radio__help-text!= checkbox.helpText
src/blocks/field-radio/readme.md 0 → 100644
View file @ 63361c5b
В стилевом файле есть закомментированные фрагменты для замены нативного элемента своим (svg).
src/blocks/field-text/field-text.pug
View file @ 63361c5b
......@@ -4,26 +4,26 @@ mixin field-text(props)
//- Принимает:
//- props {
//- title: '' {string} - текст с названием (выводится над полем)
//- type: '' {string} - тип для input [text|email|number...]
//- placeholder: '' {string} - подсказка в поле
//- name: '' {string} - атрибут name у input/textarea
//- inputAttrs: {} {object} - дополнительные атрибуты для input/textarea
//- mods: '' {string} - модификаторы блока
//- textarea: false {bool} - флаг input/textarea
//- helpText: '' {string} - пояснение под полем
//- title: '' {string} - текст с названием (выводится над полем)
//- isTextarea: false {bool} - флаг input/textarea
//- helpText: '' {string} - пояснение под полем
//- mods: '' {string} - модификаторы блока
//- attrs: { {object} - любые атрибуты для input/textarea
//- type: {string}
//- placeholder: {string}
//- ...
//- }
//- }
//- Вызов:
//- +field-text({
//- title: 'Текст',
//- type: 'text',
//- placeholder: '',
//- name: '',
//- inputAttrs: {'id': 'some-input-id', 'max': '200', 'min': '2'},
//- mods: '',
//- textarea: false,
//- helpText: '',
//- })
+field-text({
title: 'Название',
isTextarea: true,
helpText: 'Подсказка',
mods: '',
attrs: {
name: 'comment',
}
})
-
if(typeof(props) === 'undefined') {
......@@ -41,17 +41,13 @@ mixin field-text(props)
if(typeof(props.title) !== 'undefined' && props.title)
span.field-text__name!= props.title
span.field-text__input-wrap
if(typeof(props.textarea) !== 'undefined' && props.textarea)
if(typeof(props.isTextarea) !== 'undefined' && props.isTextarea)
textarea.field-text__input(
placeholder=props.placeholder ? props.placeholder : ''
name=props.name ? props.name : ''
)&attributes(props.inputAttrs)
)&attributes(props.attrs)
else
input.field-text__input(
type=props.type ? props.type : 'text'
placeholder=props.placeholder ? props.placeholder : ''
name=props.name ? props.name : ''
)&attributes(props.inputAttrs)
type=(typeof(props.attrs) !== 'undefined' && props.attrs.type) ? props.attrs.type : 'text'
)&attributes(props.attrs)
if(typeof(props.helpText) !== 'undefined' && props.helpText)
span.field-text__help-text!= props.helpText
block
src/blocks/main-nav/main-nav.pug
View file @ 63361c5b
......@@ -3,9 +3,9 @@
mixin main-nav(selectedID)
//- Принимает:
//- selectedID {string} - id пункта меню, указанное в main-nav.json
//- selectedID {string} - id пункта меню ( по умолчанию — из main-nav.json)
//- Вызов:
//- +main-nav('1')
+main-nav('1')
nav.main-nav#nav&attributes(attributes)
+burger('Показать главное меню', 'nav', 'main-nav--open')(class="main-nav__toggler")
......
src/blocks/main-nav/readme.md
View file @ 63361c5b
По умолчанию данные меню берутся из `main-nav/main-nav.json` и передаются в компилятор pug (см. `gulpfile.js`).
По получению ссылками фокуса на их родителей с `.main-nav__item` добавляется модификатор `.main-nav__item--show-child`, что позволяет работать со вложенными меню с клавиатуры (предусмотрено 3 уровня).
На малых ширинах преобразуется в мобильный вид, скрывается/показывается по клику на бургер, если JS включен (на `html` есть класс `js`).
src/blocks/menu/menu.pug
View file @ 63361c5b
......@@ -5,19 +5,19 @@ mixin menu(menu)
//- Принимает:
//- menu {array} - массив с пунктами меню
//- Вызов:
//- -
//- var myMenu = [
//- {
//- 'text':'Пункт1',
//- 'url':'/',
//- },
//- {
//- 'text':'Пункт2',
//- 'url':'/',
//- 'mods': 'separator, active',
//- },
//- ];
//- +menu(myMenu)
-
var myMenu = [
{
'text':'Пункт1',
'url':'/',
},
{
'text':'Пункт2',
'url':'/',
'mods': 'separator, active',
},
];
+menu(myMenu)
-
if (typeof(menu) === 'undefined') {
......
src/blocks/thumb/thumb.pug
View file @ 63361c5b
......@@ -8,8 +8,8 @@ mixin thumb(url, alt, width, height)
//- width {string} - соотв. атрибут тега картинки
//- height {string} - соотв. атрибут тега картинки
//- Вызов:
//- +thumb('img/joker.jpg', 'Джокер', 300, 200)
//- +thumb('img/joker.jpg', 'Джокер', 300)
+thumb('img/joker.jpg', 'Джокер', 300, 200)
+thumb('img/joker.jpg', 'Джокер', 300)
- if (typeof(url) !== 'undefined')
img.thumb(src=url, alt=alt, width=width, height=height)&attributes(attributes)
......
src/pug/mixins.pug
View file @ 63361c5b
......@@ -9,3 +9,5 @@ include ../blocks/alert/alert.pug
include ../blocks/menu/menu.pug
include ../blocks/btn/btn.pug
include ../blocks/field-text/field-text.pug
include ../blocks/field-checkbox/field-checkbox.pug
include ../blocks/field-radio/field-radio.pug
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