Введение в интерфейс чакры

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.Наслаждайтесь

Теперь у вас есть встроенный редактор в вашем проекте.

Кредиты

Разработано с 💖 автором

Гипертинг