Vueland

Русский

English

Русский

English

Оформление

CCol ​

Колонка в 12-колоночной сетке. Всегда используется внутри CRow. Ширина задаётся числом от 1 до 12.

Размеры колонок ​

Все 12 колонок в действии — от 1/12 до полной ширины.

4
4
4
6
6
3
9
1
2
3
4
5
6
7
8
9
10
11
12
Показать код
vue
<template>
  <!-- Три равные колонки -->
  <c-row>
    <c-col cols="4"><div>4</div></c-col>
    <c-col cols="4"><div>4</div></c-col>
    <c-col cols="4"><div>4</div></c-col>
  </c-row>

  <!-- Две половины -->
  <c-row>
    <c-col cols="6"><div>6</div></c-col>
    <c-col cols="6"><div>6</div></c-col>
  </c-row>

  <!-- Асимметрия -->
  <c-row>
    <c-col cols="3"><div>3</div></c-col>
    <c-col cols="9"><div>9</div></c-col>
  </c-row>
</template>

Адаптивные карточки товаров ​

На мобилке карточки складываются в стек, на sm — по 2, на md+ — по 3.

🎧
Audio
Wireless Headphones
Premium sound with active noise cancellation and 30h battery.
$129
⌚
Wearable
Smart Watch Pro
Health tracking, GPS, and AMOLED display in a slim design.
$249
📸
Camera
Compact Camera
48MP sensor, optical zoom, and 4K video in your pocket.
$399
Показать код
vue
<template>
  <c-row>
    <c-col v-for="card in cards" :key="card.id" cols="12" sm="6" md="4">
      <c-card>…</c-card>
    </c-col>
  </c-row>
</template>

Offset и Order ​

Offset
cols="4" offset="4"
cols="3"
offset="6"
Order — DOM order: A · B · C
A order 3
B order 1
C order 2
Показать код
vue
<template>
  <!-- Offset: центрировать блок шириной 4 колонки -->
  <c-row>
    <c-col cols="4" offset="4">По центру</c-col>
  </c-row>

  <!-- Order: визуальный порядок без изменения DOM -->
  <c-row>
    <c-col cols="4" order="3">A — показывается последним</c-col>
    <c-col cols="4" order="1">B — показывается первым</c-col>
    <c-col cols="4" order="2">C — показывается вторым</c-col>
  </c-row>
</template>

Props ​

Проп
Тип
По умолчанию
Описание
cols
string | number
null
Ширина колонки (1–12)
offset
string | number
null
Левый отступ в колонках
order
string | number
null
Визуальный порядок (CSS order)

Адаптивные пропы ​

Для каждого брейкпоинта (xs, sm, md, lg, xl, xxl):

Проп
Тип
Описание
xs … xxl
string | number
Ширина колонки начиная с этого брейкпоинта
offset-xs … offset-xxl
string | number
Левый отступ начиная с этого брейкпоинта
order-xs … order-xxl
string | number
Визуальный порядок начиная с этого брейкпоинта

Значения брейкпоинтов по умолчанию: xs ≥ 0 px · sm ≥ 600 px · md ≥ 960 px · lg ≥ 1280 px · xl ≥ 1920 px · xxl ≥ 2560 px.

Кастомные имена брейкпоинтов, настроенные через @vueland/utils-jit, не становятся новыми пропами. Для них используйте сгенерированные классы, например class="tablet-6" или :class="{ 'tablet-4': compact }".

CSS-переменные ​

CCol не определяет собственных CSS-переменных. Ширина, offset и order задаются сгенерированными классами сетки.

Слоты ​

Слот
Описание
default
Содержимое колонки

См. также ​