Простой набор стилей на основе uni-app

Быстрый старт

Установите этот файл в папку static, а затем импортируйте его в App.vue:

<style lang="scss"></style>

внутри которого следует использовать следующий код:

@import "static/styles/index.scss";

Теперь вы можете использовать стили из этого набора в вашем проекте.

Как использовать

Размер шрифта

Набор стилей предоставляет класс f-x, где x — это число от 1 до 300 (включительно).

Пример:

<view class="f-20"></view>

Класс .f-20 определяется внутри набора стилей следующим образом:

.f-20 {
	font-size: 20rpx;
}

Жирность шрифта

.fw-small {
	font-weight: 600;
}
.fw-medium {
	font-weight: 700;
}
.fw-large {
	font-weight: 800;
}
.fw-none {
	font-weight: normal;
}

Выравнивание текста

.tal {
	text-align: left;
}
.tac {
	text-align: center;
}
.tar {
	text-align: right;
}
.tie {
	text-indent: 2em;
}

Внешние и внутренние отступы

Набор стилей определяет множество классов для внешних и внутренних отступов, таких как p-x, p-l-x и т.д., где x принимает значения:

• четные числа от 0 до 600 (включительно)
• числа от 0 до 600, которые делятся на 5, такие как 5, 25, 50, 75 и т.д.

Пример:

Если вам нужно установить левый внешний отступ равным 60rpx:

<view class="m-l-60"></view>

Класс .m-l-60 определяется внутри набора стилей следующим образом:

.m-l-60 {
	margin-left: 60rpx;
}

Аналогично можно определить и другие отступы.

Если вам нужно установить одновременно левые и правые внешние отступы равными 60rpx:```html

Аналогично можно установить верхние и нижние внешние отступы равными 60rpx:

```html
<view class="m-y-60"></view>

Для внутренних отступов используется аналогичный подход.

Flex-разметка

Набор стилей предлагает широкий спектр классов для реализации flex-разметки, позволяющих удовлетворять большинству требований к flex-узлам.

Пример:

<view class="flex-sb"></view>

Этот класс позволяет узлам внутри элемента прижаться к сторонам и центрироваться по вертикали. Для изменения способа центрирования узлов по оси, перпендикулярной основной оси, можно использовать класс .flex-aifs.

<view class="flex-vfe"></view>

Этот класс позволяет узлам внутри элемента располагаться по вертикали с конца. Класс .flex-vfe меняет направление основной оси на вертикальное, а класс .flex-aifs позволяет изменить способ центрирования узлов по оси, перпендикулярной основной оси.

Дополнительные варианты flex-стилей можно найти в исходном коде файла flex.scss.

Ширина и высота

Стилевая библиотека определяет набор классов ширины и высоты, таких как w-x и h-x, где x принимает значения в соответствии с правилами:

• 2-1000 (может быть равно 1000)

Пример

Если мы хотим определить ширину 426rpx:

<view class="w-426"></view>

Этот класс .w-426 определяется внутри стилистой библиотеки следующим образом:```css .w-426 { width: 426rpx; }

И так далее.

### Проценты ширины и высоты

Стилевая библиотека также определяет набор классов процентной ширины и высоты, таких как `w-xp` и `h-xp`, где `x` принимает значения согласно следующим правилам:

+ 1–100 (может быть равно 100)

Пример

Если мы хотим определить высоту `66%`:

```html
<view class="h-66p"></view>

Этот класс .h-66p определяется внутри стилистической библиотеки следующим образом:

.h-66p {
  height: 66%;
}

И так далее.

Высота строки

Стилевая библиотека определяет набор классов высоты строки, таких как lh-x, где x принимает значения согласно следующим правилам:

• 10–1000 (может быть равно 1000)

Пример

Если мы хотим определить высоту строки 32rpx:

<view class="lh-32"></view>

Этот класс .lh-32 определяется внутри стилистической библиотеки следующим образом:

.lh-32 {
  line-height: 32rpx;
}

И так далее.

Расположение

.pos {
  position: relative;
}
/* Фиксированное расположение */
.pos-fixed {
  position: fixed !important;
}
/* Вязкое расположение */
.pos-sticky {
  position: sticky !important;
}

Расположение позиций

Пример

<view class="p-ct"></view>

Этот класс .p-ct определяется внутри стилистической библиотеки следующим образом:

.p-ct {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

Дополнительные способы расположения можно найти в исходном коде файла pos.scss.