Skip to content

moysklad/html-marketplace-1.0-uikit

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

html-marketplace-1.0-uikit

Типографика

HTML заголовки, начиная с <h1> до <h3>, доступны к использованию. Если нет необходимости использовать именно теги, то для них есть классы ".h1" до ".h3". Они отлично подходят для <div> или <span>.

Для абзацев используется тег <p>. Если необходимо показать ошибку, то к нему добавляется класс ".error". Так же доступен тег <caption>, который предназначен для описания содержания таблиц. Если нужно просто отобразить похожий стиль в тексте, то для этого есть класс ".caption".

Поля

Для добавления обычного текстового поля используется <input class="ui-input">. Для добавления поля для Выбора из списка используется <select class="ui-select">, внутри которого находятся варианты внутри своих <option>. Если нужно сделать Выпадающий список, то вместо ".ui-select" указывается класс ".ui-select-custom".

Кнопки добавляются с помощью тега <button class="button">. По умолчанию кнопка серая, но с помощью добавления дополнительного класса ".button--success" её можно переопределить в зеленый цвет, подходящий для обозначения положительного выбора.

Для добавления чекбокса/флажка используется конструкция на базе тега <label class="option check">. Внутри находится сам тег <input class="check__input">, тег <span class="check__box"> для отображения кастомизированного внешнего вида, и <span class="check__text"> для добавления текста выбора.

Для добавления радиокнопки/переключателя используется конструкция на базе тега <label class="option radio">. Внутри находится сам тег <input class="check__input">, тег <span class="check__box"> для отображения кастомизированного внешнего вида, и <span class="check__text"> для добавления текста выбора.

Вкладки

Вкладки добавляются в блоки <div class="tabs js-tabs"> или <div class="tabs-border js-tabs">. Шапка вкладок представляет собой список <ul class="tabs__buttons"> или <ul class="tabs-border__buttons">. Пункты идут подряд друг за другом и являются элементами списка <li class="tabs__button js-tabs-button"> или <li class="tabs-border__button js-tabs-button">. Активный пункт в шапке помечается классом ".b-active". Сам контент располагается в <div class="tabs__items"> или <div class="tabs-border__items">, который разбит на несколько блоков <div class="tabs__item js-tabs-item"> или <div class="tabs-border__item js-tabs-item">. Активный блок помечается классом ".b-active". Классы с префиксом js-* необходимы для инициализации и работы вкладок. Класс ".tabs" и ".tabs-border" отвечают за внешний вид. Количество пунктов должно быть равно количеству блоков с контентом.

Всплывающие окна

Для вызова всплывающего окна нужно добавить к кнопке <button class="button"> класс ".js-popup-open". Чтобы кнопка открывала нужное окно, и в ней, и в самом окно указывается одинаковый data-name. Всплывающее окно представляет собой блок <div class="popup js-popup-window b-hide">, в котором находятся <div class="popup__overlay js-popup-close"> для затемнения фона и <dialog class="popup__body" open>, что является самим окном. Заголовок располагается в блоке <div class="popup__title">, а контент в блоке <div class="popup__content">. Для закрытия окна используется кнопка <button class="popup__close js-popup-close">. Для взаимодействия с окном можно добавить блок <div class="buttons">, в который размещаются как одна, так и несколько кнопок <button class="button">. Для закрытия окна нажатием на них, так же используется класс ".js-popup-close".

Таблицы

Таблица добавляется тегом <table class="ui-table">. Навигация в таблице находится в подвале <tfoot> внутри блока <div class="ui-table__pager">. Элементы управления располагаются в <div class="ui-table__buttons"> и добавляются с помощью <a href="#" class="ui-table__link"><button class="ui-table__button" title=""></button></a>. Для отображения количества страниц используется блок <div class="ui-table__count">.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published