sparrow ui

참새 UI

엔터프라이즈급 UI 디자인 언어 및 React(Vue 、Svelte) UI 라이브러리. HTML에 적응하고 HTML을 컴파일했습니다.

특징

• ? 웹 애플리케이션용으로 설계된 엔터프라이즈급 UI입니다.
• ? 즉시 사용 가능한 고품질 마이크로 라이브러리.
• ? 예측 가능한 정적 유형을 사용하여 TypeScript로 작성되었습니다.
• 설계 리소스 및 개발 도구의 전체 패키지입니다.

• ? 모든 세부 사항에 대한 강력한 테마 사용자 정의.

• ? 초적응능력

• ? 어떤 프레임워크에도 얽매이지 마세요
• ? 프로그레시브 웹 앱(PWA) 지원.

? 환경지원

• 최신 브라우저 및 Internet Explorer 11(폴리필 포함)
• 서버 측 렌더링
• 전자

IE / 엣지	파이어폭스	크롬	원정 여행	전자
IE11, 엣지	최근 2개 버전	최근 2개 버전	최근 2개 버전	최근 2개 버전

? 설치하다

  npm i @sparrowend/ui

  yarn add @sparrowend/ui

  pnpm add @sparrowend/ui

? 용법

• jsx

   import { Button } from '@sparrowend/ui' ;
  const App = ( ) => (
  < >
      < Button type = "primary" > PRESS ME </ Button >
  </ >
  ) ;

  스타일을 수동으로 가져옵니다.

   import '@sparrowend/ui/dist/spui.css' ;
  // or
  // import '@sparrowend/ui/es/button/style';

• HTML

   < html >
      < link href = 'dist/spui.css' > </ link >
      < script src = "dist/spui.js" > </ script >
      or
      < script type = "module" >
          import { Message } from 'dist/spui-es.js';
          Message.error('the end');
      </ script >
      < sp-button > click me </ sp-button >
  </ html >

• 지도 가져오기

        < html >
        < link href = 'dist/spui.css' > </ link >
        < script type = "importmap" >
            {
                "imports" : {
                    "sparrow-ui" : "dist/spui-es.js"
                }
            }
        </ script >
        < script type = "module" >
            import { Message } from 'sparrow-ui';
            Message.error('sucessful');
        </ script >
    </ html >

• 노드(컴파일 ---> 모두)

  • 아트 템플릿

    <!--layout.art-->
    < ! doctype html >
    < html >
      < head >
        < meta charset = "utf-8" >
          < title > { { block 'title' } } My Site { { / block } } </ title >
          < link href = 'dist/spui.css' > </ link >
          < script src = "dist/spui.js" > </ script >
    
          { { block 'head' } }
            < link rel = "stylesheet" href = "main.css" >
          { { / block } }
    
      </ head >
      < body >
          { { block 'content' } } { { / block } }
      </ body >
    </ html > 

     { { if user } }
        < h2 > { { user . name } } </ h2 >
        < sp - button > Thanks ! </ sp - button >
    { { / if}}

    • ejs 等同

⌨️ 개발

GitHub용 무료 온라인 개발 환경인 Gitpod를 사용하세요.

또는 로컬로 복제:

$ git clone [email protected]:lianglei-git/sparrow-ui.git
$ cd sparrow-ui
$ npm install
$ npm run start

? 기여

모든 기여를 환영합니다. [email protected] 으로 연락주세요.

? 감사해요!