xu_ui

XUI - Biblioteca de componentes de interfaz de usuario ligera basada en React

XUI es una biblioteca de componentes livianos basada en React desarrollada por el autor. Actualmente no confía en ninguna biblioteca de componentes de UI de terceros. Admite la importación a pedido y se puede personalizar. Sitio web de la dirección oficial del sitio web: XUI-Biblioteca de componentes de la interfaz de usuario livianas basadas en reacción

Si cree que el acceso a la dirección oficial del sitio web es demasiado lento, puede moverse directamente a la dirección de GitHub: Xui: una biblioteca de componentes de interfaz de usuario livianas basada en React

Se han desarrollado los siguientes componentes de la interfaz de usuario:

• Componente del botón del botón
• Componente de número de logotipo de insignia
• Componente de solicitud de advertencia de alerta
• Ensamblaje del cajón
• Componente de la barra de progreso de progreso
• Conjunto de interruptor
• Etiqueta etiqueta etiqueta componente de página
• Componentes modales modales y prácticos de ventana modal
• Componente de icono (encapsulación secundaria basada en react-icons)
• Componente de cuadro de entrada de entrada
• Componentes de carga de giro
• Notificación Notificación
• Mensaje Mensaje Aplicado Cuadro componente
• Componente de estado vacío vacío
• Skeleton Componentes de pantalla de esqueleto especialmente preparados para sitios web personales

Componentes en desarrollo:

• Componente de formulario de formulario
• Componente de la lista de tabla
• Menú Componentes de menú
• Componente de cuadro desplegable desplegable

Se desarrollarán más componentes de alta calidad y livianos en el futuro, así que estén atentos.

Implementación de tecnología y versión

Esta biblioteca de componentes se desarrolla en función de la siguiente versión técnica:

• Reaccionar: 16.8.6
• React-Dom: 6.8.6
• nombres de clase

Demostración de documento

usar

1. Instalación

 npm install @ alex_xu / xui

O instálelo con hilo

 yarn add @ alex_xu / xui 

2. Use

 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 >
  )
}

Documentación de API

Para la construcción, consulte el método de uso específico:

• Toque a mano para implementar un componente de caja modal (modal) liviano y extensible
• "Competente en diseño de componentes React/Vue" y coopere con los portales React para implementar un poderoso componente de cajón
• "Competente en diseño de componentes React/Vue" en 5 minutos para implementar un componente de etiqueta y un componente de componente vacío (estado vacío)
• "Competente en el diseño de componentes React/Vue" utiliza CSS puro para crear la animación de clic del botón MaterialUi y encapsularlo en el componente React
• "Competente en diseño de componentes React/Vue" para implementar rápidamente un componente de barra de progreso personalizable
• "Competente en el diseño de componentes React/Vue" basado en la encapsulación secundaria de JSONEditor de un componente de editor JSON de vista previa en tiempo real (versión React)

Comunicación técnica y comentarios

WeChat: Qunqiujinkou

Bienvenido para proponer más problemas para que la biblioteca de componentes sea más robusta