xu_ui

XUI - Bibliothèque de composants d'interface utilisateur légers basés sur React

XUI est une bibliothèque de composants légers basée sur React développée par l'auteur. Il ne s'appuie actuellement sur aucune bibliothèque de composants d'interface utilisateur tierce. Il prend en charge l'importation à la demande et peut être personnalisé. Site Web d'adresse officielle du site Web: XUI— - Bibliothèque de composants d'interface utilisateur légers basés sur la réaction

Si vous pensez que l'accès à l'adresse officielle du site Web est trop lent, vous pouvez directement passer à l'adresse GitHub: XUI - Une bibliothèque de composants d'interface utilisateur légère basée sur React

Les composants d'interface utilisateur suivants ont été développés:

• Composant du bouton du bouton
• Composant de numéro de logo de badge
• Composant invite d'avertissement d'alerte
• Assemblage du tiroir
• Composant de la barre de progression Progress
• Assemblage de l'interrupteur de l'interrupteur
• TAG TAG TAG Page
• Composants de fenêtre modaux légers et pratiques modaux
• Composant icône (encapsulation secondaire basée sur les icons REACT)
• Composant de la boîte d'entrée d'entrée
• Composants de chargement de spin
• Notification de notification
• Message Message Invite Box Component
• Composant d'état vide vide
• Composants d'écran squelettes squelettes spécialement préparés pour les sites Web personnels

Composants en cours de développement:

• Composant de formulaire
• Composant de liste de table
• Menu composants du menu
• Composant de boîte déroulante déroulante

Des composants plus de haute qualité et légers seront développés à l'avenir, alors restez à l'écoute.

Implémentation et version de la technologie

Cette bibliothèque de composants est développée en fonction de la version technique suivante:

• réagir: 16.8.6
• react-dom: 6.8.6
• noms de classe

Document Demo

utiliser

1. Installation

 npm install @ alex_xu / xui

Ou l'installez avec du fil

 yarn add @ alex_xu / xui 

2. Utiliser

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

Documentation API

Pour la construction, veuillez vous référer à la méthode d'utilisation spécifique:

• Toujours à la main pour implémenter un composant modal léger et extensible (modal)
• "Compétion dans la conception des composants React / Vue" et coopérez avec les portails React pour implémenter un puissant composant de tiroir
• "Compétions dans la conception des composants React / Vue" en 5 minutes pour implémenter un composant de balise et un composant de composant vide (état vide)
• "Compétion dans la conception des composants React / Vue" utilise Pure CSS pour créer le bouton MaterialUi cliquez sur l'animation et le encapsuler dans le composant React
• "Compétion dans la conception des composants React / Vue" pour implémenter rapidement un composant de barre de progression personnalisable
• "Compétions dans la conception des composants React / Vue" basée sur l'encapsulation secondaire JSONEditor d'un composant JSON Editor Aperçu en temps réel (version React)

Communication technique et commentaires

WeChat: Qunqiujinkou

Bienvenue pour proposer plus de problèmes pour rendre la bibliothèque de composants plus robuste