вернуться на разводящую

Компоненты, используемые в вёрстке

Модалки

modal--product link

modal--filters link

modal--product-cart link

Кнопки

Пример вызова ссылок

+btn({type: "link", href: "#", content: "Войти"}) +btn({type: "link", href: "#", content: "Выбрать"}) +btn({type: "link", href: "#", content: "Закрыть"}) +btn({type: "link", href: "#", content: "Закрыть"}) +btn({type: "link", href: "#", content: "Закрыть"})

Пример вызова кнопок

+btn({type: "button", btnType: "button", content: "Войти"})
+btn({type: "button", btnType: "submit", mod: "btn--black", content: "Выбрать"})
+btn({type: "button", btnType: "button", mod: "btn--red", content: "Закрыть"})
+btn({type: "button", btnType: "button", mod: "btn--red", icon: "search"})
+btn({type: "button", btnType: "button", mod: "btn--black", icon: "cart"})
+btn({type: "button", btnType: "button", icon: "close"})
+btn({type: "button", btnType: "button", icon: "close"})
+btn({type: "button", btnType: "button", icon: "close", mod: "btn--round"})
+btn({type: "button", btnType: "button", icon: "refresh", mod: "btn--round btn--white"})

Переменная для атрибута data-close

+btn({type: "button", btnType: "button", icon: "close", mod: "btn--black", data: "search"})
+btn({type: "button", btnType: "button", icon: "delete", mod: "btn--round"})

Чекбоксы / радио

Пример вызова чекбоксов

+input-toggle({name: "input-toggle-test", text: "Товар в наличии"})
+base-radio({name: "input-checkbox-test"}, [{value: "40", id: "test-radio-1"}, {value: "170", id: "test-radio-2", checked: "true"}])

Пример вызова радио

Размер

+base-radio({name: "input-radio-test"}, [{value: "40", id: "test-radio-1"}, {value: "170", checked: "true", id: "test-radio-2"}])
+base-radio({name: "input-radio-test-2", mod: "radio--ellips radio--white"}, [{value: "Цена по возрастанию", id: "test-radio-3", checked: "true"}, {value: "Цена по убыванию", id: "test-radio-4"}])

Инпут

+base-input({type: "tel", placeholder: "Телефон"})
+base-input({type: "email", placeholder: "E-mail"})
+base-input({type: "pass", placeholder: "Пароль"})
+base-input({type: "text", placeholder: "Имя"})
+base-input({type: "text", placeholder: "Имя", mod: "custom-input--gray"})

Селект

Выберите торговую точку
  • Пушкинская
  • Звенигородская
+base-select({name: "select-example", placeholder: "Выберите торговую точку"}, [{value: "Пушкинская", id: "id-test-1"}, {value: "Звенигородская", id: "id-test-2"}])
Выберите торговую точку
  • Пушкинская
  • Звенигородская
+base-select({name: "select-example", mod: "custom-select--gray", placeholder: "Выберите торговую точку"}, [{value: "Пушкинская", id: "id-test-1"}, {value: "Звенигородская", id: "id-test-2"}])