sparrow ui

UI นกกระจอก

ภาษาการออกแบบ UI ระดับองค์กรและไลบรารี UI ของ React (Vue 、Svelte) ปรับให้เข้ากับ HTML และ HTML ที่คอมไพล์แล้ว

คุณสมบัติ

• - UI ระดับองค์กรที่ออกแบบมาสำหรับแอปพลิเคชันเว็บ
• - ไมโครไลบรารีคุณภาพสูงแบบแกะกล่อง
• - เขียนใน TypeScript ด้วยประเภทคงที่ที่คาดเดาได้
• แพ็คเกจทรัพยากรการออกแบบและเครื่องมือการพัฒนาทั้งหมด

• - การปรับแต่งธีมอันทรงพลังในทุกรายละเอียด

• - ความสามารถในการปรับตัวที่ยอดเยี่ยม

• - อย่ายึดติดกับกรอบใดๆ
• - รองรับ Progressive Web Apps (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 等同

⌨️ การพัฒนา

ใช้ Gitpod ซึ่งเป็นสภาพแวดล้อมการพัฒนาออนไลน์ฟรีสำหรับ GitHub

หรือโคลนในเครื่อง:

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

- มีส่วนร่วม

ฉันยินดีต้อนรับทุกการมีส่วนร่วม โปรดติดต่อฉันที่ [email protected]

- ขอบคุณ!