Описание

Quark — это дизайн-система продуктов Гринатома. Правила, которых мы придерживались при разработке, легли в основу принципов дизайн-системы.

1. Простота: Мы стремимся к интуитивному взаимодействию пользователя с продуктом.
2. Отзывчивость: Интерфейс должен находиться в контакте с пользователем — отвечать на его вопросы и подсказывать верный путь.
3. Эффективность: Функциональность в приоритете над стилистикой.
4. Развитие: Мы совершенствуем нашу дизайн-систему каждый день.

В основе стилизации компонентов лежит styled-components

Поддержка браузеров

| Firefox | Chrome | Safari | | --------- | --------- | --------- | | Последние 2 версии | Последние 2 версии | Последние 2 версии

Быстрый старт

Таблицы используют под капотом компоненты и иконки из пакетов @quark-uilib/components и @quark-uilib/icons. Поэтому для корректной работы таблицы дополнительно установите эти пакеты.

Установите пакеты

NPM

npm i @greenatom/table @quark-uilib/components @quark-uilib/icons

YARN

yarn add @greenatom/table @quark-uilib/components @quark-uilib/icons

Подключите стили и шрифты

Выберите один из вариантов подключения стилей.

Подключение в корне проекта

import React from "react";
import "@quark-uilib/components/styles/index.css";

Подключение в файле стилей

@import "~@quark-uilib/components/styles/index.css";

Пример кода для быстрого старта

import React from "react";
import { createRoot } from "react-dom/client";
import Table from "@greenatom/table";

const App = () => {
  const column = [{ field: "make" }, { field: "model" }, { field: "price" }];

  const rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxster", price: 72000 }
  ];

  return (
    <Table column={column} rowData={rowData} />
  )
};

const root = createRoot(document.getElementById('root'));
root.render(<App />);