vienna-ui
v11.30.0
Published
Raiffeisenbank Design System
Downloads
918
Keywords
Readme
ViennaUI
Raiffeisenbank Design System
Установка
Для установки библиотеки React компонентов:
$ npm i vienna-ui
$ yarn add vienna-ui
Дизайн Система Vienna.UI содержит еще 6 пакетов: vienna.icons
, vienna.react-use
, vienna.tokens
, vienna.ui-primitives
, vienna.ui-theme
, vienna.utils
Любой из приведенных выше пакетов также можно установить, вызвав:
$ npm i <package-name>
$ yarn add <package-name>
Использование
В пакете vienna-ui
находятся компоненты дизайн-системы, которые содержат собранные js
файлы (скомпилированные через Babel).
import React form 'react';
import ReactDOM from 'react-dom';
import { Body, Button } from 'vienna-ui';
import { PlusRing } from 'vienna.icons';
const App = (
<Button design='accent'>
Кнопка <PlusRing />
</Button>
);
ReactDOM.render(app, document.getElementById('root'));
Компоненты
- Accordion
- Alarm
- Alert
- Avatar
- Badge
- Body
- Breadcrumbs
- Button
- Calendar
- Card
- Checkbox
- Chips
- ComboButton
- Counter
- CssGrid
- CustomTable
- Datepicker
- DatePickerBeta
- DateTimePicker
- DatepickerRange
- Drawer
- DropList
- EmptyState
- FileLoader
- FileLoaderButton
- Filter
- Flex
- FormField
- Grid
- Groups
- Header
- Hint
- Input
- InputMask
- InputAccount
- InputCard
- InputDate
- InputDateRange
- InputDigital
- InputNumber
- InputPassword
- InputPhone
- InputSlider
- Link
- Logotype
- Modal
- Monthpicker
- Multiselect
- Notifications
- Pagination
- PaymentLogo
- Popover
- Progressbar
- Radio
- RoundIcon
- Search & Suggest
- Select
- Sidebar
- Spinner
- Stepper
- Switcher
- Table
- Tabs
- Textarea
- Timer
- Toolbar
- Tooltip
- Typography
- UserProfile
- Whitespace
- Wizard
Кастомизация компонентов
Компоненты можно кастомизировать с помощью ThemeProvider
и токенов
Технологический стек и браузеры
Компоненты дизайн-системы разработаны с использованием react@18
, styled-components@6
. Мы поддерживаем стабильные версии следующих браузеры:
- Chrome (2 latest)
- Firefox (2 latest)
- Safari (2 latest)
- Yandex (2 latest)
- Edge (2 latest)