Создание сложного пользовательского интерфейса в React, такого как панель инструментов, может быть сложной задачей, если вы делаете это с нуля. К счастью, вам не нужно этого делать.
Одной из лучших библиотек компонентов, которую вы можете использовать, является Tremor, которая позволяет создавать современные, отзывчивые информационные панели в React без особых усилий. Узнайте, как использовать Tremor для создания информационных панелей в React.
Что такое тремор?
Tremor — это современная низкоуровневая библиотека компонентов пользовательского интерфейса с открытым исходным кодом для создания информационных панелей в React. Tremor строится на основе Tailwind CSS, React и Recharts (еще одна библиотека построения диаграмм на основе компонентов для React). Кроме того, он использует иконки от Heroicons.
Он может похвастаться более чем 20 компонентами со всем необходимым для создания фантастического аналитического интерфейса, такого как диаграммы, карточки и элементы ввода. Библиотека включает в себя небольшие модульные компоненты, такие как значки, кнопки, раскрывающиеся списки и вкладки, которые можно комбинировать для создания полноценных информационных панелей.
Что отличает Tremor, так это то, что он очень самоуверен, поэтому, если вы согласны с решениями библиотеки, вы можете мгновенно запустить профессионально выглядящую панель инструментов.
Конечно, Tremor поддерживает настройку и позволяет легко сделать это с помощью системы реквизитов React.
Как начать работать с тремором
Начать с создание нового приложения React используя создать-реагировать-приложение пакет (или Vite, если вы предпочитаете это).
В вашей системе уже должны быть установлены Node.js и npm. Вы можете подтвердить это, запустив узел --версия а потом нпм --версия в командной строке. Если какая-либо команда отсутствует, вы можете установить их с помощью простого процесса; см. это руководство по установка Node.js и npm в Windows, например.
Настройка вашего проекта React с помощью Tremor
- Откройте свой терминал и перейдите в нужный каталог, используя CD команда.
- Бегать npx create-реагировать на тремор-учебник по приложению. Эта команда создаст новое приложение React с именем тремор-учебник в вашей системе в текущем каталоге.
- Переключитесь в каталог приложения, запустив cd тремор-учебник.
- Установите Tremor в свой проект React, используя следующую команду:
npm установить @tremor/реагировать - После того, как вы установили Tremor, импортируйте пакет в свой App.js (или main.jsx если вы использовали Vite), добавив следующую строку внизу вашего импорта:
Импортировать"@тремор/реагировать/расстояние/esm/tremor.css";
Хотя Tremor использует Tailwind CSS, вам не нужно устанавливать его в приложение React, чтобы использовать библиотеку. Это связано с тем, что в Tremor уже настроен Tailwind. Однако, если вы хотите, ознакомьтесь с нашим руководством по установка Tailwind CSS в React.
Затем установите Heroicons в свой проект с помощью следующей команды:
npm i [email protected] @тремор/реакцияТеперь давайте удалим ненужный код в нашем источник/App.js файл. Вот наш стартовый код в App.js:
Импортировать"./Приложение.css";
Импортировать"@тремор/реагировать/расстояние/esm/tremor.css";
экспортпо умолчаниюфункцияПриложение() {
возвращаться (
Наша потрясающая панель управления React</h1>
</div>
);
}
Далее создайте выделенный компоненты подпапка в вашем источник папка. В этом компоненты папку, создайте новую Dashboard.js файл и добавьте следующий код:
функцияПанель приборов() {
возвращаться<див>Панель приборовдив>;
}
экспортпо умолчанию Панель приборов;
Импортируйте компонент Dashboard в App.js добавив следующий оператор после других импортов:
Импортировать Панель приборов от"./компоненты/панель инструментов";
Наконец, отобразите компонент в своем приложении React, добавив ниже h1 элемент.
Создание панели инструментов с помощью Tremor
Чтобы с минимумом хлопот создать полноценный дашборд с помощью Tremor, выберите один из доступных блоков. Блоки — это готовые макеты, состоящие из различных небольших модульных компонентов.
Хорошей отправной точкой является блоки тремора раздел, в котором представлены различные типы готовых блочных компонентов, которые вы можете использовать. Например, оболочки макета позволяют объединять различные компоненты для создания информационной панели.
Сначала добавьте следующий код в свой Dashboard.js файл:
Импортировать {
Карта,
Заголовок,
Текст,
КолГрид,
площадьДиаграмма,
Индикатор,
метрика,
флекс,
} от"@тремор/реакция";функцияПанель приборов() {
возвращаться (
Панель управления продажами<<span>/Title></span><br> <text>Это пример панели управления, созданной <span>с</span> Tremor.<<span>/Text></span></text>
{/* Основной раздел */}
"mt-6">
"h-96" />
</Card> {/* Раздел KPI */}
2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
{/* Заполнитель для установки высоты */}
"h-28" />
</Card>
</ColGrid>
</main>
);
}экспорт по умолчанию Панель управления;
Блок оболочки содержит различные компоненты, вы импортируете в начало файла. Если вы просмотрите это в своем браузере, вы увидите только два пустых блока.
Вы можете заполнить свои блоки готовыми компонентами Tremor, такими как диаграмма, карточка или таблица. Вы можете получать данные из API (REST или GraphQL) или хранить их в массиве объектов прямо внутри вашего компонента.
Чтобы добавить компонент в блок оболочки, замените строка со следующим:
Performance<<span>/Title></span><p><text>Comparicance между продажами и Прибыль<<span>/Text></span></text></p>
<p><areachart></areachart> marginTop=<span>"mt-4"</span><br> data={data}<br> category={[<span>"Продажи"</span>, <span>"Прибыль"</span>]}<br> dataKey=<span>"Месяц"</span><br> colors={[<span>"индиго"</span>, <span>"фуксия"</span>]}<br> valueFormatter={ valueFormatter}<br> height=<span>"h-80"</span><br>/></p>
После что добавьте следующий массив перед оператором return (это данные, которые будут отображаться в основном разделе панели инструментов):
// Данные для отображения в в основной раздел
const data = [
{
Месяц: "21 января",
Продажи: 2890,
Прибыль: 2400,
},
{
Месяц: "Фев 21 дюйм,
Продажи: 1890,
Прибыль: 1398,
},
// ...
{
Месяц: "22 января",
Продажи: 3890,
Прибыль: 2980,
},
];const valueFormatter = (число) =>< /span>
$ ${Международный.NumberFormat("нас").format (number).toString()};
Далее добавьте следующий код в файл после valueFormatter:
// Данные для отображения в KPI раздел
const Categories = [
{
title: "Продажи",
metric: "12 699 долл. США",
процентное значение: 15,9,
целевое значение: "$ 80 000 дюймов,
},
{
заголовок: "Прибыль",
показатель: "45 564 долл. США" span>,
процентное значение: 36,5,
целевое значение: "125 000 долл. США",
},
{
заголовок: "Клиенты",
показатель: "1072",
процентное значение: 53.6,
target: "2,000",
},
{
title: "Годовой обзор продаж",
показатель: "201 072 долл. США",
процентное значение: 28,7,
target: "$700,000",
},
];
Для categories массив объектов, вам необходимо сопоставить каждый объект, чтобы отобразить данные в отдельных компонентах Card. Сначала удалите компонент Карточка в разделе KPI, а затем замените его этим кодом:
{categories.map((item) => span> (
{item.title}</Text>
{item.metric}</Metric>
"mt-4" >
>{`${item.percentageValue}% (${item.metric} )`}</Text> {item.target}</Text>
</Flex>
marginTop="mt-2"
/>
</Card>
))}
И все. Вы создали свою первую панель мониторинга с помощью Tremor. Просмотрите панель инструментов, запустив npm start. Это должно быть похоже на скриншот выше.
Настройка компонентов Tremor
Tremor позволяет настраивать с помощью реквизита. Вам потребуется просмотреть документацию компонента, который вы хотите настроить, и проверить все включенные свойства со значениями по умолчанию.
Например, если у вас есть
С легкостью создавайте сложные информационные панели React
Благодаря таким библиотекам компонентов, как Tremor, вам не нужно создавать каждый отдельная часть вашего пользовательского интерфейса с нуля. Использование такой библиотеки, как Tremor, поможет вам сэкономить время и избавиться от головной боли при создании сложных адаптивных пользовательских интерфейсов.
