designsystemet Download - designsystemet ดาวน์โหลดซอร์สโค้ดดาวน์โหลด

designsystemet

ส่วนประกอบของบุคคลที่สาม

1.0.0

ดาวน์โหลด

DesignSystemet

เกี่ยวกับ DesignSystemet

DesignSystemet เป็นชุดขององค์ประกอบการออกแบบที่สำคัญส่วนประกอบและรูปแบบที่สามารถใช้ในการสร้างบริการสาธารณะ

เป้าหมายของเราคือการสร้างประสบการณ์ที่สอดคล้องและใช้งานง่ายในโซลูชั่นดิจิตอลสำหรับบริการสาธารณะทำให้มีประสิทธิภาพและเชื่อถือได้มากขึ้น

- ลิงค์

หนังสือนิทาน - ดูตัวอย่างสำหรับส่วนประกอบ React

หน้าร้าน - เอกสารทั่วไปเกี่ยวกับระบบการออกแบบ

Theme - Theme Builder

- แพ็คเกจ

@digdir/designsystemet - CLI สำหรับ DesignSystemet

@digdir/designsystemet-theme - ธีมสำหรับ DesignSystemet

@digdir/designsystemet-css - สไตล์สำหรับส่วนประกอบ

@digdir/designsystemet-react - ปฏิกิริยาการใช้งานของส่วนประกอบ DesignSystemet

เริ่มต้นใช้งาน

ทำตามขั้นตอนเหล่านี้เพื่อเริ่มต้นด้วยส่วนประกอบ React

1. ติดตั้งแพ็คเกจ

ขึ้นอยู่กับความต้องการและเทคโนโลยีของคุณติดตั้งแพ็คเกจที่เกี่ยวข้อง

npm i @digdir/designsystemet
npm i @digdir/designsystemet-css
npm i @digdir/designsystemet-theme 
npm i @digdir/designsystemet-react

1.1 ธีมที่กำหนดเอง

คุณสามารถสร้างธีมของคุณเองเพื่อใช้กับแพ็คเกจ DesignSystemet ได้โดยไปที่นักสร้างธีมของเรา

การออกแบบของระบบ DesignSystemet ถูกกำหนดโดยใช้การออกแบบ Tokens สิ่งนี้ทำเพื่อให้คุณสามารถใช้โทเค็นสตูดิโอเพื่อซิงค์ธีมของคุณในรหัสด้วยชุด DesignSystemet Figma UI นอกเหนือจากการให้ความยืดหยุ่นในอนาคต

เรียกใช้ npx @digdir/designsystemet tokens build เพื่อสร้างไฟล์ CSS สำหรับธีมที่กำหนดเองของคุณ (จาก Design-Tokens) การใช้ไฟล์ธีม CSS ที่สร้างขึ้นของคุณเองคุณสามารถข้ามไปได้โดยใช้แพ็คเกจ @digdir/designsystemet-theme

2. ฟอนต์

คุณมีอิสระที่จะใช้ตัวอักษรใด ๆ กับส่วนประกอบ

ส่วนประกอบได้รับการออกแบบและพัฒนาโดยใช้แบบอักษรอินเตอร์ดังนั้นการเปลี่ยนแปลงอาจเกิดขึ้นหากใช้แบบอักษรที่แตกต่างกัน

เพิ่มอินเตอร์ฟอนต์ (ไม่บังคับ)

เพิ่มแท็ก <link> ใน <head> และตั้งค่า font-family เป็น Inter ในไฟล์ CSS ส่วนกลางของคุณ

font-feature-settings เพิ่มหางให้กับตัวพิมพ์เล็ก L 's

HTML

 < link
  rel =" stylesheet "
  href =" https://altinncdn.no/fonts/inter/inter.css "
/>

CSS

 body {
  font-family : 'Inter' , sans-serif;
  font-feature-settings : 'cv05' 1 ; /* Enable lowercase l with tail */
}

หากคุณเลือกที่จะติดตั้งตัวอักษรในวิธีที่แตกต่างอย่าลืมรวมน้ำหนักแบบอักษร 400 , 500 และ 600

3. ใช้องค์ประกอบปฏิกิริยา

 import '@digdir/designsystemet-theme' ;
import '@digdir/designsystemet-css' ;

import { Button } from '@digdir/designsystemet-react' ;

< Button variant = 'secondary' > I am a button! </ Button > ;

@digdir/designsystemet-theme และ @digdir/designsystemet-css จะต้องนำเข้าเพียงครั้งเดียว

4. เพิ่มประเภท typescript สำหรับสี

เนื่องจากชื่อสีขึ้นอยู่กับชุดรูปแบบที่ใช้คุณต้องเพิ่มสิ่งต่อไปนี้ใน tsconfig.json ของคุณเพื่อใช้สีทั้งหมดของคุณในส่วนประกอบที่มีเสา data-color :

เมื่อใช้ `@digdir/designsystemet-theme`

 {
  // ...other settings
  "compilerOptions" : {
    // ...other compilerOptions
    "types" : [
      // ...other types
      "@digdir/designsystemet-theme/colors.d.ts"
      ]
  } ,
}

เมื่อใช้ธีมที่กำหนดเอง

คำสั่ง designsystemet tokens build จะส่งออกไฟล์ colors.d.ts ไปยังไดเรกทอรีเอาต์พุตที่คุณเลือก ในตัวอย่างให้แทนที่ <your-path> ด้วยเส้นทางจริงที่คุณใช้เมื่อเรียกใช้คำสั่ง

 {
  // ...other settings
  "compilerOptions" : {
    // ...other compilerOptions
    "types" : [
      // ...other types
      "<your-path>/colors.d.ts"
      ]
  } ,
}

5. เพิ่มคำแนะนำตัวแก้ไขสำหรับสีข้อมูลและขนาดข้อมูลในองค์ประกอบ HTML (ไม่บังคับ)

คุณอาจต้องการคำแนะนำของตัวแก้ไขสำหรับแอตทริบิวต์ data-color และ data-size ในองค์ประกอบ HTML เช่น <span> หรือ <div> เนื่องจากแอตทริบิวต์เหล่านี้อาจส่งผลกระทบต่อส่วนประกอบที่ซ้อนอยู่ภายในองค์ประกอบเหล่านี้

สิ่งนี้ต้องการการเพิ่มประเภทในตัวของ React และดังนั้นจึงเลือกเข้าร่วม หากคุณต้องการสิ่งนี้ให้เพิ่มสิ่งต่อไปนี้ใน tsconfig.json ของคุณ:

 {
  // ...other settings
  "compilerOptions" : {
    // ...other compilerOptions
    "types" : [
      // ...other types
      "@digdir/designsystemet-react/react-types.d.ts"
      ]
  } ,
}