xu_ui

XUI - Perpustakaan Komponen UI Berbasis Berbasis Bereaksi

XUI adalah pustaka komponen ringan berdasarkan React yang dikembangkan oleh penulis. Saat ini tidak bergantung pada pustaka komponen UI pihak ketiga mana pun. Ini mendukung impor sesuai permintaan dan dapat disesuaikan. Situs Web Alamat Situs Web Resmi: XUI—-Perpustakaan Komponen UI Ringan Berbasis Reak

Jika menurut Anda akses ke alamat situs web resmi terlalu lambat, Anda dapat langsung pindah ke alamat github: XUI - perpustakaan komponen UI ringan berdasarkan React

Komponen UI berikut telah dikembangkan:

• Komponen tombol
• Komponen nomor logo lencana
• Peringatan Komponen Prompt Peringatan
• Majelis Laci Laci
• Komponen Bar Kemajuan Kemajuan
• Unit sakelar sakelar
• Tag Tag Tag Page Component
• Modal Komponen Jendela Modal Ringan dan Praktis
• Komponen ikon (enkapsulasi sekunder berdasarkan reaksi-ikon)
• Komponen kotak input input
• Komponen pemuatan putaran
• Pemberitahuan Pemberitahuan
• Pesan Pesan Komponen Kotak Prompt
• Komponen keadaan kosong kosong
• Komponen layar kerangka kerangka yang disiapkan khusus untuk situs web pribadi

Komponen yang sedang dikembangkan:

• Komponen bentuk bentuk
• Komponen Daftar Tabel
• Komponen Menu Menu
• Komponen kotak dropdown dropdown

Komponen yang lebih berkualitas tinggi dan ringan akan dikembangkan di masa depan, jadi tetaplah disini.

Implementasi dan Versi Teknologi

Perpustakaan Komponen ini dikembangkan berdasarkan versi teknis berikut:

• Bereaksi: 16.8.6
• React-dom: 6.8.6
• nama kelas

Demo dokumen

menggunakan

1. Instalasi

 npm install @ alex_xu / xui

Atau pasang dengan benang

 yarn add @ alex_xu / xui 

2. Gunakan

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

Dokumentasi API

Untuk konstruksi, silakan merujuk ke metode penggunaan spesifik:

• Hand-Souching Untuk Mengimplementasikan Komponen Kotak Modal (Modal) yang Ringan dan Dapat Diperluas
• "Mahir dalam Desain Komponen React/Vue" dan bekerja sama dengan Portal React untuk mengimplementasikan komponen laci yang kuat
• "Mahir dalam Desain Komponen React/Vue" dalam 5 menit untuk mengimplementasikan komponen tag dan komponen komponen kosong (keadaan kosong)
• "Mahir dalam Desain Komponen React/Vue" menggunakan CSS murni untuk membuat tombol materialUI klik animasi dan merangkumnya menjadi komponen reaksi
• "Mahir dalam Desain Komponen React/Vue" untuk dengan cepat mengimplementasikan komponen bilah kemajuan yang dapat disesuaikan
• "Mahir dalam Desain Komponen React/Vue" berdasarkan enkapsulasi sekunder jsonEditor dari komponen editor JSON pratinjau real-time (Versi React)

Komunikasi teknis dan umpan balik

WeChat: Qunqiujinkou

Selamat datang untuk mengusulkan lebih banyak masalah untuk membuat pustaka komponen lebih kuat