xu_uiダウンロードxu_uiソースコードのダウンロード

xu_ui

サードパーティ製コンポーネント

1.0.0

ダウンロード

XUI-反応ベースの軽量UIコンポーネントライブラリ

XUIは、著者によって開発されたReactに基づいた軽量コンポーネントライブラリです。現在、サードパーティのUIコンポーネントライブラリに依存していません。オンデマンドのインポートをサポートし、カスタマイズできます。公式ウェブサイトアドレスウェブサイト：XUI——反応ベースの軽量UIコンポーネントライブラリ

公式のウェブサイトの住所へのアクセスが遅すぎると思われる場合は、githubアドレスに直接移動できます：xui-反応に基づく軽量UIコンポーネントライブラリ

次のUIコンポーネントが開発されました。

ボタンボタンコンポーネント
バッジロゴ番号コンポーネント
警告警告プロンプトコンポーネント
引き出し引き出しアセンブリ
Progress Progress Barコンポーネント
スイッチスイッチアセンブリ
タグタグページのコンポーネント
モーダルの軽量で実用的なモーダルウィンドウコンポーネント
アイコンコンポーネント（React-Iconsに基づく二次カプセル化）
入力入力ボックスコンポーネント
スピンローディングコンポーネント
通知通知
メッセージメッセージプロンプトボックスコンポーネント
空の空の状態コンポーネント
スケルトンスケルトンスクリーンコンポーネントは、個人のウェブサイト用に特別に準備されています

開発中のコンポーネント：

フォームフォームコンポーネント
テーブルリストコンポーネント
メニューメニューコンポーネント
ドロップダウンドロップダウンボックスコンポーネント

将来、より高品質で軽量コンポーネントが開発されるため、ご期待ください。

テクノロジーの実装とバージョン

このコンポーネントライブラリは、次の技術バージョンに基づいて開発されています。

反応：16.8.6
React-Dom：6.8.6
classNames

ドキュメントデモ

使用

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ポータルと協力して、強力な引き出しコンポーネントを実装する
タグコンポーネントと空のコンポーネント（空）コンポーネントを実装するために5分で「React/Vueコンポーネント設計に熟練している」
「React/Vueコンポーネントの設計に熟練する」では、純粋なCSSを使用してMaterialuiボタンをクリックし、それを反応コンポーネントにカプセル化します
カスタマイズ可能な進行状況バーコンポーネントをすばやく実装するための「React/Vueコンポーネント設計に熟練する」
jsoneditorに基づく「React/vueコンポーネント設計に熟練している」リアルタイムプレビューJSONエディターコンポーネント（Reactバージョン）のセカンダリカプセル