xu_ui

xui - библиотека легких компонентов пользовательского интерфейса на основе реагирования

XUI - это легкая библиотека компонентов, основанную на React, разработанном автором. В настоящее время он не полагается на какую-либо стороннюю библиотеку компонентов пользовательского интерфейса. Он поддерживает импорт по требованию и может быть настроен. Официальный адрес веб-сайта веб-сайт: xui-библиотека легких компонентов пользовательского интерфейса на основе React

Если вы думаете, что доступ к официальному адресу веб -сайта слишком медленный, вы можете напрямую перейти к адресу GitHub: xui - легкая библиотека компонентов пользовательского интерфейса на основе React

Были разработаны следующие компоненты пользовательского интерфейса:

• Кнопка кнопки компонент
• Компонент номера логотипа значка
• Компонент приглашения предупреждения о предупреждении
• Ящик ящика в сборе
• Компонент пробега Progress Progress
• Коммутатор в сборе
• Тег тег тег компонент страницы
• Модальные легкие и практические модальные компоненты окна
• Компонент икона (вторичная инкапсуляция на основе реаги-иконов)
• Компонент ввода ввода
• Спиновая нагрузка компонентов
• Уведомление уведомления
• Компонент приглашения сообщения сообщения
• Пустой пустой компонент состояния
• Компоненты экрана скелета скелета, специально подготовленные для личных сайтов

Компоненты в разработке:

• Форма Форма Компонент
• Компонент списка таблиц
• Меню меню компоненты
• Компонент раскрывающейся раскрывающейся коробки

Более качественные и легкие компоненты будут разработаны в будущем, поэтому, пожалуйста, следите за обновлениями.

Технологическая реализация и версия

Эта библиотека компонентов разработана на основе следующей технической версии:

• React: 16.8.6
• React-Dom: 6.8.6
• классные имена

Документ демонстрация

использовать

1. Установка

 npm install @ alex_xu / xui

Или установите его с пряжей

 yarn add @ alex_xu / xui 

2. Используйте

 import { 
  Button ,
  Skeleton ,
  Empty ,
  Progress ,
  Tag ,
  Switch ,
  Drawer ,
  Badge ,
  Alert
} from '@alex_xu/xui'
import { useState } from 'react'
import styles from './index.css'

export default function ( ) {
  const [ visible , setVisible ] = useState ( false )
  let show = ( ) => { setVisible ( true ) }
  let close = ( ) => { setVisible ( false ) }
  return (
    < div className = { styles . normal } >
      < Button className = { styles . btn } > default </ Button >
      < Button className = { styles . btn } type = "warning" > warning </ Button >
      < Button className = { styles . btn } type = "primary" > primary </ Button >
      < Button className = { styles . btn } type = "info" > info </ Button >
      < Button className = { styles . btn } type = "pure" > pure </ Button >
      < Button className = { styles . btn } type = "primary" shape = "circle" > circle </ Button >
      < Button className = { styles . mb16 } type = "primary" block > primary & block </ Button >
      < Button type = "warning" shape = "circle" block onClick = { show } > circle & block </ Button >
      { /* <Skeleton /> */ }
      < Progress
        percent = { 10 }
      />
      < Progress
        percent = { 50 }
        themeColor = "#009933"
      />
      < Progress
        percent = { 50 }
        width = { 240 }
      />
      < Progress
        percent = { 30 }
        width = { 240 }
        textColor = "#fff"
      />
      < Progress
        percent = { 50 }
        width = { 200 }
        themeColor = "#FF6666"
        hiddenText
      />
      < Progress
        percent = { 10 }
        themeColor = "#6699FF"
        statusScope = { [ [ 18 , 'red' ] , [ 40 , 'orange' ] ] }
      />
      < Progress
        percent = { 20 }
        themeColor = "#6699FF"
        statusScope = { [ [ 18 , 'red' ] , [ 40 , 'orange' ] ] }
      />
      < div className = { styles . mb16 } > </ div >
      < Tag > Html </ Tag >
      < Tag closable > react </ Tag >
      < Tag color = "#FF99CC" > Css3 </ Tag >
      < Tag color = "#06c" closable > react </ Tag >
      < Tag color = "rgb(135, 208, 104)" > Node </ Tag >
      < div className = { styles . mb16 } > </ div >
      < Switch onText = "on" offText = "off" size = "small" />
      < Badge text = "ddd" status = "warning" > 6666ngd </ Badge >
      < div className = { styles . mb16 } > </ div >
      < Alert message = "success tip" />
      < Alert message = "success tip" type = "success" />
      < Alert message = "success tip" type = "error" />
      < Alert message = "success tip" type = "info" />
      < Alert message = "success tip" type = "info" closable />
      < Alert message = "success tip" description = "skfjdsalajdfjadkfjaldfhjaskdn你好,欢迎光临" closable type = "success" />
      < Empty />
      < Drawer visible = { visible } onClose = { close } destroyOnClose >
        < h3 >我是标题</ h3 >
        < br />
        < input type = "text" />
        < br />
        < textarea />
      </ Drawer >
    </ div >
  )
}

Документация API

Для строительства, пожалуйста, обратитесь к конкретному методу использования:

• Нанесение рук, чтобы реализовать легкий и расширяемый компонент модальной коробки (модальный)
• «Опытный в конструкции компонента React/Vue» и сотрудничать с порталами React для реализации мощного компонента ящика
• «Опытный в конструкции компонента React/Vue» за 5 минут для реализации компонента тега и компонента пустого компонента (пустого состояния)
• «Опытный в дизайне компонента React/Vue» использует чистые CSS для создания кнопки MaterialUI. Нажмите на анимацию и инкапсулируйте ее в компонент React
• «Опытный в разработке компонентов React/Vue» для быстрого реализации настраиваемого компонента Progress Band
• «Опытный в дизайне компонентов React/Vue» на основе вторичной инкапсуляции JSonEditor предварительного просмотра в реальном времени компонент редактора JSON (версия React)

Техническая связь и обратная связь

WeChat: Qunqiujinkou

Добро пожаловать, чтобы предложить больше проблем, чтобы сделать библиотеку компонентов более надежной