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 — Компонент для отображения иерархических данных.

Мы продолжаем развивать и расширять библиотеку, добавляя новые компоненты и улучшая существующие.