xu_ui 다운로드 xu_ui 소스 코드 다운로드

xu_ui

타사 구성 요소

1.0.0

다운로드

XUI- 반응 기반 경량 UI 구성 요소 라이브러리

Xui는 저자가 개발 한 반응을 기반으로 한 경량 구성 요소 라이브러리입니다. 현재 타사 UI 구성 요소 라이브러리에 의존하지 않습니다. 주문형 가져 오기를 지원하며 사용자 정의 할 수 있습니다. 공식 웹 사이트 주소 웹 사이트 : XUI—— 반응 기반 경량 UI 구성 요소 라이브러리

공식 웹 사이트 주소에 대한 액세스가 너무 느리다고 생각되면 GitHub 주소로 직접 이동할 수 있습니다. XUI- REACT를 기반으로 한 가벼운 UI 구성 요소 라이브러리

다음 UI 구성 요소가 개발되었습니다.

버튼 버튼 구성 요소
배지 로고 번호 구성 요소
경고 경고 프롬프트 구성 요소
서랍 서랍 어셈블리
진행 상황 바 구성 요소
스위치 스위치 어셈블리
태그 태그 페이지 페이지 구성 요소
모달 경량 및 실용적인 모달 창 구성 요소
아이콘 구성 요소 (React-ICon에 기초한 2 차 캡슐화)
입력 입력 상자 구성 요소
스핀 로딩 구성 요소
알림 알림
메시지 메시지 프롬프트 상자 구성 요소
빈 상태 구성 요소를 비우십시오
스켈레톤 골격 화면 구성 요소는 개인 웹 사이트를 위해 특별히 준비되었습니다

개발중인 구성 요소 :

양식 구성 요소
표 목록 구성 요소
메뉴 메뉴 구성 요소
드롭 다운 드롭 다운 박스 구성 요소

향후 고품질 및 경량 구성 요소가 개발 될 것이므로 계속 지켜봐 주시기 바랍니다.

기술 구현 및 버전

이 구성 요소 라이브러리는 다음 기술 버전을 기반으로 개발되었습니다.

반응 : 16.8.6
반응 -M : 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 구성 요소 설계에 능숙하고"반응 포털과 협력하여 강력한 서랍 구성 요소를 구현합니다.
태그 구성 요소와 빈 구성 요소 (빈 상태) 구성 요소를 구현하기 위해 5 분 안에 "React/Vue 구성 요소 설계에 능숙합니다"
"React/VUE 구성 요소 디자인에 능숙 함"순수한 CSS를 사용하여 Materialui 버튼을 만들어 애니메이션을 클릭하고 반응 구성 요소로 캡슐화합니다.
사용자 정의 가능한 진행률 바 구성 요소를 신속하게 구현하기 위해 "React/Vue 구성 요소 설계에 능숙합니다"
실시간 미리보기 JSON 편집기 구성 요소 (REACT 버전)의 JSONEDITOR 2 차 캡슐화를 기반으로 "REACT/VUE 구성 요소 설계 능력"