Справочник
Сборка даёт базовые компоненты, сетку, иконки, кнопки, формы, модалки, минимальная стилизация и базовый функционал позволяют кастомизировать её как угодно
Общее
.site - обертка разметки, содержит в себе:
- Header -
~/components/Header.vue -
Main - содержимое страницы, обёрнуто в
.site__content, по умолчания растягивется на всю высоту страницы прижимая футер книзу экрана - Footer -
~/components/Footer.vue
.flex - класс для флекс блока
.flex-с - класс для флекс блока с align-items: center
.like-link -
добавляет блоку стилизацию ссылки
Шрифты грузятся в папку ~/assets/fonts и подключаются в файле
~/assets/less/fonts, там же прописываются шрифтовые классы
$device -
Справка по модулю , служит для определения устройства пользователя, не работает с ssr
$global - доступ к глобальным методам, можно ыбло бы подключать миксины, но я не хочу, все
методы описываются в файле ~/plugins/global.js путем добавления новых свойств в объект
global
При желании можно разнести методы по разным глобальным переменным
SEO
Установлен модуль @nuxtjs/sitemap
Справка по модулю
Добавлен файл ./static/robots.txt с деолтным содержимым
Не забудте поменять адрес сайта в настроках sitemap и в robots.txt
Переходы
fade - выход из прозрачности
<transition name='fade'></transition>
Директивы
v-bsl - блокировка прокрутки сайта,
документация
v-click-outside - обработка клика вне элемента,
документация
Переменные
Переменная: значение по умолчанию- описание@spacer: 16px;- отступ между колонок сетки@spacerMd: 10px;- отступ между колонок сетки для планшетов@spacerSm: 10px;- отступ между колонок сетки для мобильных@columnCount: 12;- количество колонок@baseWidth: 100% / @columnCount;- ширина колонки в процентах@siteWidth: 1280px;- ширина сайта/контейнера@containerPadding: 64px;- отступы контейнера@containerPaddingMd: 32px;- отступы контейнера для планшетов@containerPaddingSm: 16px;- отступы контейнера для мобильных@large: 1600px;- ширина десктопа до@largeStart: @medium + 1px;- ширина десктопа от@medium: 768px;- ширина планшета до@mediumStart: @small + 1px;- ширина планшета от@small: 414px;- ширина мобильного до@sm: ~'screen and (max-width: @{small} )';- @media для мобильных@md: ~'screen and (max-width: @{medium} )';- @media для планшетов@notsm: ~'screen and (min-width: @{mediumStart} )';- @media для планшетов и десктопов@supersm: ~'screen and (max-width: 320px )';- @media для маленьких мобильных@mainZ: 10;- базовый z-index@baseFont: 'Circe', 'Arial', serif;- основной шрифт@baseFontSize: 14px;- основной размер шрифта@headerFont: 'Circe', 'Arial', serif;- шрифт заголовков@primary: #000;- основной цвет@secondary: #ddd;- дополнительный цвет@accent: red;- цвет акцента
Работа с медиа-запросами
.foo{
display: block; // на больших (от 769px) - блок
@media @md{
display: inline; // на средних (от 415px до 768px) инлайн
.bar{
display: block;
}
}
@media @sm{
display: none; // на малых (до 414px) скрыто
}
@media @notsm{
background: #ccc // не на малых экранах (от 415px) - серый фон
}
@media @supersm{
display: flex; // на очень маленьких экранах (до 320px) - флекс, и без фона
}
}
Контейнер
.container - органичение ширины сайта, максимальная ширина указывается в
~/assets/less/vars.less
.container-ignore - служит для вписывания блока внутрь контейнера игнорируя отступы
контейнера
Сетка
GridRow - компонент сетки, отвечает за количество колонок, атрибуты:
fullwidth: Boolean (false)- ряд строго вписывается в родительский блок, не компенсируя отступы колонокsize: Number (12)- указывает на количество колонок в ряду, по умолчанию 12, для смены нужно@columnCountв~/assets/less/vars.lessи значение атрибута по умолчанию в файле компонента~/components/grid/Row.vue
GridCol - компонент сетки, отвечает за колонку, атрибуты:
size: String ('12,12,12')- указывает на ширину колонки в ряду, по синтаксис - 'lg,md,sm' - ширина колонки для десктопа, планшета и мобилки, число не может быть больше текущего количествва колонок у рядаsize: Boolean (false)- центрует колонку посередине рядаend: Boolean (false)- прижимает колонку к правому краю рядаpadding-left: Boolean (false)- оставляет только левый отступ колонкиpadding-right: Boolean (false)- оставляет только правый отступ колонкиno-padding: Boolean (false)- убирает отступы колонки, полезно для fullwidth ряда
<GridRow>
<GridCol no-padding size='4,6,12'>1</GridCol>
<GridCol padding-left size='4,6,12'>lorem</GridCol>
<GridCol size='4,6,12'>3</GridCol>
<GridCol size='4,6,12'>4</GridCol>
<GridCol padding-right size='4,6,12'>ipsum</GridCol>
<GridCol size='4,6,12'>6</GridCol>
</GridRow>
<GridRow fullwidth :size='3'>
GridCol size='1,2,3'>1</GridCol>
<GridCol size='2,2,3'>2</GridCol>
<GridCol size='3'>3</GridCol>
</GridRow>
<div class='container-ignore'>
<GridRow fullwidth>
<GridCol size='4,6,12'>1</GridCol>
<GridCol size='2,6,12'>2</GridCol>
<GridCol size='2,6,12'>3</GridCol>
<GridCol size='4,6,12'>4</GridCol>
</GridRow>
</div> Иконки
Для работы с конками используется модуль
@nuxtjs/svg-sprite, cпрайт генерируется из иконок в папке
~/assets/icons
Компонент svg-icon, атрибуты:
name: String ('')- название иконки, равно названию необходимого файла из~/assets/iconswidth: String ('')- желаемая ширина иконкиheight: String ('')- желаемая высота иконки
В коде иконки можно заменить цвета на
currentColor и она начнет принимать цвет родтеля (см. пример с кнопками). Иконка
вписывается в указанные размеры, либо использует встроенные.
<div class='flex-c'>
Иконка с крестиком - <svg-icon name='close' width='24' height='24' />
</div>
Кнопки
UiButton - компонент кнопки, атрибуты:
to: String|Null (null)- адрес ссылки, если передать этот атрибут, то button заменится на nuxt-linkwide: Boolean (false)- растягивает конпку на всю ширину родителяcentered: Boolean (false)- центрует кнопку внутри родителя, можно применять во flex-блокахdisabled: Boolean (false)- блокирует кнопкуhollow: Boolean (false)- кнопка без фона с обводкойdark: Boolean (false)- устанавливает цвет фона из less-переименной@primary[color]: Boolean (false)- название цвета кнопки, при необходимости дописывается в компоненте кнопки, генерирует класс .button--[color], который можно стилизовать
<div class='flex'>
<UiButton>Базовая кнопка</UiButton>
<UiButton dark>Тёмная кнопка</UiButton>
<UiButton green>Зелёная кнопка</UiButton>
<UiButton hollow>Кнопка с обводкой</UiButton>
<UiButton disabled green>Зелёная заблокированная кнопка</UiButton>
<UiButton hollow>Кнопка с иконкой <svg-icon name='close' width='24' height='24' /></UiButton>
</div>
Формы
Все поля и настройки формы описываются в data компонента
UiForm - основной компонент формы, атрибуты:
form: Object ({})- все параметры и свойства формы и её полей
...
data() {
return {
form: {
hideSubmit: false // Скрывать или нет кнопку отправки
submit: { // Кнопка отправки формы
label:'Отправить форму' // подпись кнопки
callback: () => { // функция выполняемая при отправке формы
this.form.submit.label = this.form.fields.input1.value
},
},
agree: { // показыват чекбокс с согласием на обработку пд
checked: false, // рядом с кнопкой отправки формы, кнопка заблокированная пока чекбокс не выбран
type: 'checkbox',
label: 'Даю согласие на обработку <a href='#' target='_blank'>персональных данных</a>',
},
fields: { // список полей формы
input1: { // одиночное поле формы
value: 'Value', // значение поля
label: 'input1 label', // подпись поля
placeholder: 'Placeholder', // плейсхолдер поля
type: 'email', // тип поля, любой из валидных типов
required: true, // обязательное поле
validationMessage: '', // текст ошибки валидации (с сервера )
},
group1: { //группа полей формы
childs: { //список полей группы
input2: {
value: 'Value',
label: 'input2 label',
placeholder: 'Placeholder',
type: 'select', // селект
hasSearch: true, // фильтрация элементов селекта
options: { // элементы селекта
0: 'Option 1',
1: 'Option 2',
},
},
input3: {
value: 'Value',
label: 'input3 label',
placeholder: 'Placeholder',
},
},
},
},
},
}
},
...
<UiForm :form='form'></UiForm>
Слайдер
Используется компонент обортка для
Splide slider UiSlider
атрибуты:
options: Object ({})- параметры слайдера
...
data(){
return {
sliderOptions: {
perPage: 4,
gap: '32px',
},
}
}
...
<UiSlider :options='sliderOptions'>
<splide-slide>
<img src='https://picsum.photos/200/300' />
</splide-slide>
<splide-slide>
<img src='https://picsum.photos/200/300' />
</splide-slide>
...
</UiSlider>
Модальное окно
UiModal - отображает содержимое в модальном окне, атрибуты:
open: Boolean (false)- состояние модалки, открыто/закрытоposition: String ('')- Положение окна, писать через пробел нужное положение top / bottom, left / right, по умолчанию окно находится по центру
...
data(){
return {
isModalOpen: false,
}
}
...
<UiButton dark @click.native='isModalOpen = true'
>Открыть модальное окно</UiButton
>
<UiModal
v-model='isModalOpen'
:open='isModalOpen'
position='top right'
>
<h3>Простое модальное окно</h3>
</UiModal>