rewindui

Введение

Построенная специально для использования с CSS React и Tailld, Rewind-UI предлагает ряд доступных, высоко настраиваемых компонентов, которые можно легко интегрировать в любой проект React. Rewind-UI поставляется с набором стилей по умолчанию, которые можно легко настроить с использованием классов CSS Taillid. Кроме того, каждый компонент может быть параметризован с использованием набора реквизитов, который можно использовать для изменения стилей по умолчанию компонента.

Установка

Rewind-UI доступен в виде пакета NPM и может быть установлен с помощью следующей команды:

npm install @rewind-ui/core

Конфигурация

Rewind-UI предназначен для использования с CSS React и Taillid. Чтобы использовать Rewind-UI, вы должны сначала установить ReactJS и Taillide CSS в вашем проекте. Кроме того, вы также должны установить следующие пакеты NPM:

npm install tailwind-scrollbar @tailwindcss/forms @tailwindcss/typography

После установки CSS Tailwind вы должны настроить его для работы с Rewind-UI. Для этого вы должны сначала создать файл tailwind.config.js в корневом каталоге вашего проекта. Затем добавьте следующий код в этот файл конфигурации:

Настоятельно рекомендуется добавлять только необходимые файлы стиля, чтобы избежать раздутого файла CSS

 module . exports = {
  content : [
    './src/**/*.{html,jsx,tsx}' ,
    // you can either add all styles
    './node_modules/@rewind-ui/core/dist/theme/styles/*.js' ,
    // OR you can add only the styles you need
    './node_modules/@rewind-ui/core/dist/theme/styles/Button.styles.js' ,
    './node_modules/@rewind-ui/core/dist/theme/styles/Text.styles.js'
  ] ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    require ( 'tailwind-scrollbar' ) ( { nocompatible : true } ) ,
    require ( '@tailwindcss/forms' ) ( {
      strategy : 'class' // only generate classes
    } )
  ]
} ;

Использование

Для начала использования компонентов Rewind-UI просто добавьте следующее оператор Import в верхнюю часть вашего компонента React:

 import { Button } from '@rewind-ui/core' ;

Затем вы можете использовать компонент в коде JSX:

 < Button > Click Me </ Button >

Характеристики

Каждый компонент имеет набор стилей по умолчанию, которые могут быть параметризованы с использованием соответствующих реквизитов. Например, компонент Button имеет синий цвет по умолчанию и средний размер. Эти значения можно изменить, установив реквизит color и size на компонент:

 < Button color = "black" size = "sm" > Click Me </ Button >

Более того, стиль компонента можно настроить, передавая ему обычную опору className . Эта опора может быть использована для переопределения стилей по умолчанию компонента. Например, следующий код изменит вес шрифта кнопки на полуживку:

Rewind-UI использует Tailwind-Merge для объединения классов по умолчанию с классами, которые вы предоставляете в className позиции и разрешают любые возможные конфликты.

  < Button color = "black" size = "sm" className = "font-semibold" > Click Me </ Button >

Варианты

Пытаясь не заставить пользователя использовать несколько свойств снова и снова, мы создали variant . Вариант-это в основном предварительно определенный набор свойств, которые можно использовать для настройки компонента. Например, компонент Button имеет вариант success , который можно использовать для создания кнопки успеха, похожей на начальную загрузку:

  < Button variant = "success" > Click Me </ Button >

Вы можете прочитать больше о вариантах каждого компонента на соответствующей странице документации.

Настройка

Все компоненты Rewind-UI очень настраиваемы. Это означает, что вы можете легко изменить стили по умолчанию компонента, переопределив соответствующие классы CSS Tailwind. Вы можете прочитать больше о настройке стиля на тематической странице.

Кредиты

Особая благодарность следующим людям:

• Джо Белл - за его удивительное управление дисперсионной библиотеки с открытым исходным кодом, которое является основой системы тематического развития Rewind.
• Джек Херрингтон - за то, что вдохновил меня начать строить Rewind -UI.
• Shadcn - для его проектов с открытым исходным кодом (таксономия и пользовательского интерфейса), которые помогли мне создать эту документацию.

Особая благодарность следующим командам:

• React - для создания React.
• Tailwind Labs - для создания Tailwind CSS.
• Vercel - Для создания следующей. JS и их потрясающих шаблонов с открытым исходным кодом.
• Ploating-UI-для создания плавающей за плюс.
• Фосфора - для создания семейства иконок фосфора.