Этот проект разработан с использованием Vue.js, HTML и SCSS. Он предоставляет примеры компонентов пользовательского интерфейса и стилей типографики, которые могут быть использованы в других веб-приложениях.
-
Компоненты пользовательского интерфейса (UI):
- Прогресс-бары и прогресс-круги для отображения статуса выполнения задач.
- Радиокнопки для выбора одного из нескольких вариантов.
- Таблица для представления структурированных данных.
- Вкладки для организации контента по разделам.
-
Типографика:
- В проекте реализованы различные стили заголовков для демонстрации их внешнего вида.
-
Компоненты UI:
ProgressBar.vue
: Компонент прогресс-бара.ProgressCircle.vue
: Компонент прогресс-круга.Radiobutton.vue
: Компонент радиокнопки.BaseTable.vue
: Базовый компонент таблицы.TableRow.vue
: Компонент строки таблицы.TableColumn.vue
: Компонент столбца таблицы.Tabs.vue
: Компонент вкладок.
-
Представления (Views):
Index.vue
: Главная страница приложения.ButtonView.vue
: Демонстрация кнопок.TypographyView.vue
: Демонстрация типографики.CheckboxView.vue
: Демонстрация флажков.RadiobuttonView.vue
: Демонстрация радиокнопок.ProgressView.vue
: Демонстрация прогресс-баров и прогресс-кругов.InputView.vue
: Демонстрация текстовых полей ввода.TabsView.vue
: Демонстрация вкладок с контентом.TableView.vue
: Демонстрация таблицы с данными.
-
Глобальные файлы:
App.vue
: Основной компонент приложения.main.js
: Входная точка приложения.global.scss
: Глобальные стили для всего приложения.
- src/
- views/
Index.vue
ButtonView.vue
TypographyView.vue
CheckboxView.vue
RadiobuttonView.vue
ProgressView.vue
InputView.vue
TabsView.vue
TableView.vue
- components/
- ui/
Button.vue
- Checkbox/
Checkbox.vue
- Progress/
ProgressBar.vue
ProgressCircle.vue
Radiobutton.vue
- table/
BaseTable.vue
TableColumn.vue
TableRow.vue
Tabs.vue
- layout/
Layout.vue
- router/
index.js
- ui/
- styles/
global.scss
- views/
Чтобы запустить проект локально, выполните следующие шаги:
- Убедитесь, что у вас установлен Node.js.
- Клонируйте репозиторий на свой компьютер.
- Установите зависимости, выполнив команду
npm install
. - Запустите приложение, используя команду
npm run serve
.