@z-it/ui NPM | npm.io

UI библиотека

Введение

Это UI-библиотека, предоставляющая набор готовых компонентов и стилей, которые помогут вам быстро создавать интерфейсы для веб-приложений. Библиотека включает в себя компоненты, такие как кнопки, иконки и другие элементы интерфейса, а также предоставляет возможности для кастомизации темы.

Начало работы

Установка библиотеки

Для добавления библиотеки в ваш проект используйте один из следующих способов:

npm i @z-it/ui

или

yarn add @z-it/ui

Импорт стилей

После установки библиотеки, для использования стилей, добавьте соответствующие файлы в ваш основной файл стилей (например, src/main.scss):

/* Базовые стили */
@use '@z-it/ui/scss/fonts.scss';
@use '@z-it/ui/scss/variables.scss';
@use '@z-it/ui/scss/main.scss';

/* Стили для компонентов */
@use '@z-it/ui/scss/Button.scss';
@use '@z-it/ui/scss/Icon.scss';

Подключение плагина

Перед использованием компонентов из библиотеки, необходимо подключить setupUI плагин в точке входа в ваше приложение.

Пример подключения плагина:

import { createApp } from 'vue'
import { setupUI } from '@z-it/ui'
import App from './App.vue'

const app = createApp(App)
app.use(setupUI)
app.mount('#app')

Использование компонентов

Для использования компонентов библиотеки, импортируйте их в вашем проекте и добавляйте в шаблон.

Пример использования компонента Button:

<script
  lang="ts"
  setup
>
  import { Button } from '@z-it/ui'
</script>

<template>
  <button>Нажми меня!</button>
</template>

Настройка пользовательской темы

Переопределение переменных

Вы можете настроить тему библиотеки, изменяя значения переменных, объявленных в файле @z-it/ui/scss/variables.scss. Например можно переопределить следующие переменные:

--font-family-primary: 'Open Sans', Arial, Helvetica, sans-serif;
--font-family-secondary: Montserrat, Arial, Helvetica, sans-serif;

Чтобы применить свои стили, создайте или отредактируйте файл variables.scss в вашем проекте и подключите его после подключения базовых стилей библиотеки.

@use 'path/to/your/custom/variables.scss';

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

Поддерживаемые компоненты

На данный момент в библиотеке доступны следующие компоненты:

Account — Компонент для отображения информации о пользователе (аватар, имя, email).
ActionMenu — Компонент для отображения меню с действиями.
ActionMenuItem — Элемент в меню с действиями.
Avatar — Компонент для отображения изображения пользователя.
Brand — Компонент для отображения логотипа.
Button — Компонент для отображения различных кнопок и ссылок.
Chip — Компонент для маркировки (категоризации) элементов с использованием ключевых слов.
ChipGroup — Компонент для отображения группы маркированных элементов с возможностью свернуть список до одного.
Icon — Графические иконки для интерфейса.
Image — Компонент для отображения изображений.
Layout — Компонент для создания гибких макетов.
Menu — Компонент для отображения списка навигации.
MenuItem — Элемент меню, представляющий отдельный пункт в навигации.
Notice — Компонент для отображения уведомлений в пунктах меню.
Popover — Компонент для отображения всплывающих окон с контентом при взаимодействии с элементом.
ResizableBox — Компонент для ресайза оборачиваемого компонента по любой из выбранных осей X/Y.
Scrollbar — Кастомизируемый скроллбар с поддержкой различных настроек.
Sidebar — Компонент для добавления сайдбара.
SidebarToggler — Компонент для переключения состояния сайдбара.
Status — Компонент для отображения статуса доставки/блокировки и т.п.
SubMenu — Компонент для отображения вложенного меню.
SubMenuItem — Элемент вложенного меню.
Switch — Переключатель для управления состоянием (включено/выключено).
Tree — Компонент для группировки иерархических элеменов c использованием компонента TreeItem.
TreeItem — Компонент для отображения иерархических данных.