v-cursor

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

Пресет backdropBlur

Элемент в качестве маски и пресет backdropBlur

Показать код

        
          <button>Без v-cursor<button />
          <button v-cursor="{ stylePreset: 'colorBurn' }">Пресет colorBurn<button />
          <div v-cursor="{local: true, stylePreset: 'backdropBlur'}">Элемент в качестве маски и пресет backdropBlur<div />
          <button v-cursor="{height: '70px', width: '70px', background: 'red', mixBlendMode: 'color-dodge'}">Кастомные стили<button />

Checkbox Component

Согласен с Правилами обработки персональных данных

Текущее значение в поле: false

Link Component

Компонент ссылки с поддержкой вариантов стилей и иконок

Только иконка

С большой иконкой (32px)

Большая иконка

С маленькой иконкой (12px)

Маленькая иконка

Показать код

<Link to="/" label="Обычная ссылка" variant="regular" />
<Link to="/" label="Жирная ссылка" variant="bold" />
<Link to="/" label="Ссылка со стрелкой" icon="arrow" />
<Link to="/" label="Большая иконка" icon="arrow" iconSize="32px" />
<Link to="/" label="Маленькая иконка" icon="shopping-bag" iconSize="12px" />
<Link to="/">Пользовательский текст через слот</Link>

FileInput Component

Пример FileInput

Прикрепить карточку организации

Текущее значение в поле:

Пример с переносом текста

Прикрепить карточку организации

Текущее значение: не выбран

TextField Component

Текущее значение в поле:

SearchInput Component

PromtechIcon Component

Компонент для отображения SVG иконок проекта
Размер 16

arrow

name="arrow"

check

name="arrow"

burger-menu

name="burger-menu"

paperclip

name="paperclip"

shopping-bag

name="shopping-bag"

Показать код

<PromtechIcon name="arrow" :icon-size="16" />
<PromtechIcon name="burger-menu" :icon-size="16" />
<PromtechIcon name="paperclip" :icon-size="16" />
<PromtechIcon name="shopping-bag" :icon-size="16" />

Button Component

Компонент кнопки с поддержкой вариантов стилей, размеров и иконок. Может работать как button или router-link.

Primary Button (md)

Primary с иконкой справа

Primary Small

С иконкой слева

Только иконка

Кастомный gap (8px)

Ширина 100%

Фиксированная ширина 250px

С обработчиком @click

С обработчиком клика

С параметром

Disabled (клик не работает)

Как router-link (без @click)

Перейти на главную

Показать код

<Button label="Перейти к заказу" size="md" />
<Button label="Оставить заявку" trailingIcon="arrow" />
<Button label="Маленькая кнопка" size="sm" />
<Button label="С иконкой" leadingIcon="shopping-bag" />
<Button leadingIcon="burger-menu" iconSize="16px" />
<Button label="Большой gap" trailingIcon="arrow" iconGap="8px" />
<Button label="Во всю ширину" width="100%" />
<Button label="250px" width="250px" trailingIcon="arrow" />
<!-- С обработчиком клика -->
<Button label="Нажми меня" @click="handleClick" />
<Button label="Отправить форму" @click="handleSubmit" />
<Button label="Удалить #123" @click="deleteItem(123)" />
<!-- Disabled - клик не сработает -->
<Button label="Отключенная" disabled @click="handleClick" />
<!-- Router navigation -->
<Button label="Перейти на главную" to="/" />

Main Page Hero

Компонент для отображения hero-секции главной страницы cо старым видео

Надежные решения
для тяжелых условий

Горное оборудование
и сервис, которым доверяют профессионалы

Промышленная техника. Сервис. Запчасти. Всё под контролем.

Наши контакты

Всегда на связи для партнёров и клиентов