Введение в интерфейс чакры
Chakra UI — это простая, модульная и доступная библиотека компонентов, которая дает вам строительные блоки, необходимые для создания приложений React.
Официальный веб-сайт Chakra UI
Редактор HyperTheme для пользовательского интерфейса Chakra
Мощный визуальный редактор тем для вашего следующего проекта пользовательского интерфейса Chakra.
Мы создали инструмент, который помогает дизайнерам, разработчикам и компаниям создавать красивые темы за считанные минуты.
С помощью редактора HyperTheme вы можете настроить тему прямо в своем проекте. и экспортировать результат, все это в несколько кликов 🔥
🔗Попробуйте сейчас: hyperthe.me
С HyperTheme Pro вы можете редактировать:
🎨Цвета
🔤Размеры шрифта
🔤Шрифты
🔤 Высота линий
🔤Интервал между буквами
🟣Радиус
🔲Тени
↔️ Интервал
Дополнительные функции
🎨Генератор палитр
📗Интеграция с Google Шрифтами
⏪Отменить/Повторить
📦Неограниченный экспорт (Typescript или Javascript)
🔄Бесплатные обновления
В ближайшее время особенности:
📚Несколько тем
☁️Сохранить тему в облаке
🏠 Сохраняйте тему прямо в своем проекте
🔥Редактор темы пользовательского интерфейса материалов
Установка (бесплатная версия):
1) Установить с помощью NPM:
npm i @hypertheme-editor/chakra-ui
или если вы используете пряжу:
yarn add @hypertheme-editor/chakra-ui
2) Настроить ThemeEditorProvider
Добавьте компонент <ThemeEditorProvider />
чуть ниже <ChakraProvider />
, как в этом примере для NextJS:
import * as React from 'react' import { ChakraProvider } from '@chakra-ui/react' import theme from '../my-theme' import { ThemeEditorProvider } from "@hypertheme-editor/chakra-ui"
function App({ Component, pageProps }) { return ( <ChakraProvider theme={theme}> <ThemeEditorProvider> <Component {...pageProps} /> </ThemeEditorProvider> </ChakraProvider> ) }
export default App
3) Добавьте кнопку ThemeEditorDrawerButton
Добавьте <ThemeEditorDrawerButton />
там, где вам это нужно, компонент предоставляет ChakraUI ButtonProps, поэтому вы можете разместить его там, где хотите, и изменить поведение кнопки:
import * as React from 'react' import { Box } from '@chakra-ui/react' import { ThemeEditorDrawerButton } from '@hypertheme-editor/chakra-ui'
function Layout() { return ( <Box> ...rest of layout <ThemeEditorDrawerButton pos="fixed" bottom={4} right={2} /> </Box> ) }
export default Layout
Наслаждаться
Теперь у вас есть редактор тем для ваших проектов ChakraUI. Нажмите кнопку «Экспорт», чтобы получить удаляемую тему в формате js или ts в ZIP-архиве.
Установка (версия Pro):
1. Получите лицензионный ключ
Hypertheme Editor PRO размещается в частном реестре NPM, доступном по лицензии.
У вас нет лицензионного ключа? (Получить лицензию PRO)
Получить лицензию
2. Настройте свой проект
Создайте файл .npmrc в корневой папке вашего проекта со следующим содержимым:
@hypertheme-editor-pro:registry=https://npm.hyperthe.me
registry=https://registry.npmjs.com
3. Войдите в Hypertheme Editor PRO NPM.
Чтобы войти в приватный реестр, вы должны запустить npm run login, когда вас попросят использовать гипертему в качестве имени пользователя и ваш лицензионный ключ в качестве пароля:
$ npm login --registry=https://npm.hyperthe.me
Username: hypertheme Password: <YOUR_LICENSE_KEY> Email: (this IS public) <YOUR_EMAIL>
Logged in as hypertheme on https://npm.hyperthe.me/.
4. Установите его
Установить с помощью NPM:
npm i @hypertheme-editor-pro/chakra-ui
Или с пряжей:
yarn add @hypertheme-editor-pro/chakra-ui
5. Настроить
Установка очень проста и быстра:
- Добавьте компонент
<ThemeEditorProvider />
чуть ниже компонента. - Добавьте компонент
<ThemeEditorDrawerButton />
.
Вот пример:
import * as React from "react" import { ChakraProvider } from "@chakra-ui/react" import { ThemeEditorProvider, ThemeEditorDrawerButton } from '@hypertheme-editor-pro/chakra-ui' import theme from './my-theme'
function App() { return ( <ChakraProvider theme={theme}> <ThemeEditorProvider> <ThemeEditorDrawerButton pos="fixed" bottom={4} right={2} /> </ThemeEditorProvider> </ChakraProvider> ) }
6.Наслаждайтесь
Теперь у вас есть встроенный редактор в вашем проекте.
Кредиты
Разработано с 💖 автором