Unduhan designsystemet - Unduh Kode Sumber designsystemet

designsystemet

Komponen pihak ketiga

1.0.0

Unduh

DesignSystemet

Tentang DesignSystemet

DesignSystemet adalah kumpulan elemen desain penting, komponen, dan pola yang dapat digunakan untuk membangun layanan publik.

Tujuan kami adalah menciptakan pengalaman yang konsisten dan ramah pengguna dalam solusi digital untuk layanan publik, membuatnya lebih efisien dan dapat diandalkan.

? Tautan

Buku Story - Pratinjau untuk Komponen Bereaksi.

Storefront - Dokumentasi umum tentang sistem desain.

Tema - Pembuat Tema.

? Paket

@digdir/designsystemet - CLI untuk DesignSystemet.

@digdir/designsystemet-theme - Tema untuk DesignSystemet.

@digdir/designsystemet-css - Styling for Components.

@digdir/designsystemet-react - React Implementasi komponen DesignSystemet.

Mulai

Ikuti langkah -langkah ini untuk memulai dengan komponen React.

1. Pasang paket

Tergantung pada kebutuhan dan tumpukan teknologi Anda menginstal paket yang relevan

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

1.1 Tema Kustom

Anda dapat membuat tema sendiri untuk digunakan dengan paket DesignSystemet dengan pergi ke pembangun tema kami.

Tema DesignSystemet didefinisikan menggunakan desain-token. Ini dilakukan agar Anda dapat menggunakan Token Studio untuk menyinkronkan tema Anda dalam kode dengan DesignSystemet Figma UI Kit, selain memberikan fleksibilitas di masa depan.

Jalankan npx @digdir/designsystemet tokens build untuk membangun file CSS untuk tema khusus Anda (dari desain-tokens). Menggunakan file tema CSS Anda sendiri yang dapat Anda lewati menggunakan paket @digdir/designsystemet-theme .

2. Font

Anda bebas menggunakan keluarga font apa pun dengan komponen.

Komponen dirancang dan dikembangkan menggunakan antar font sehingga variasi dapat terjadi jika font yang berbeda digunakan.

Tambahkan Inter Font (Opsional)

Tambahkan tag <link> di <head> , dan atur font-family ke Inter di file css global Anda.

font-feature-settings menambahkan ekor ke huruf kecil L

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 */
}

Jika Anda memilih untuk menginstal font dengan cara yang berbeda, ingatlah untuk memasukkan bobot 400 , 500 dan 600 font.

3. Gunakan komponen bereaksi

 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 dan @digdir/designsystemet-css hanya perlu diimpor sekali.

4. Tambahkan tipe naskah untuk warna

Karena nama warna tergantung pada tema mana yang digunakan, Anda harus menambahkan yang berikut ini ke tsconfig.json Anda untuk menggunakan semua warna Anda dalam komponen yang memiliki prop data-color :

Saat menggunakan `@digdir/designsystemet-theme`

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

Saat menggunakan tema khusus

Perintah CLI designsystemet tokens build akan menghasilkan file colors.d.ts ke direktori output yang Anda pilih. Dalam contoh, ganti <your-path> dengan jalur aktual yang Anda gunakan saat menjalankan perintah.

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

5. Tambahkan Petunjuk Editor untuk Data-Warna & Ukuran Data pada Elemen HTML (Opsional)

Anda mungkin menginginkan petunjuk editor untuk atribut data-color dan data-size pada elemen HTML seperti <span> atau <div> , karena atribut ini dapat memengaruhi komponen yang bersarang di dalam elemen-elemen ini.

Ini membutuhkan augmenting tipe bawaan React, dan karenanya opt-in. Jika Anda menginginkan ini, tambahkan yang berikut ini ke tsconfig.json Anda:

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