designsystemet下載 - designsystemet源代碼下載

designsystemet

三方組件

1.0.0

下載

DesignSyStonet

關於DesignSyStonet

DesignSyStonEt是一個重要的設計元素，組件和模式的集合，可用於構建公共服務。

我們的目標是在公共服務的數字解決方案中創建一致且用戶友好的體驗，從而使其更有效和可靠。

？鏈接

Storybook-預覽React組件。

店面 - 有關設計系統的一般文檔。

主題 - 主題構建器。

？軟件包

@digdir/designsystemet -for DesignSystettonet的CLI。

@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自定義主題

您可以通過轉到我們的主題構建器來創建自己的主題，以與DesignSytoneT軟件包一起使用。

DesignSyStonTemet主題是使用Design-Tokens定義的。這樣做是為了使您可以使用代幣工作室將您的主題與DesignSystoneT Figma UI套件同步，此外還可以提供未來的靈活性。

運行npx @digdir/designsystemet tokens build以構建自定義主題（來自Design-Tokens）的CSS文件。使用自己構建的CSS主題文件，您可以使用@digdir/designsystemet-theme軟件包跳過。

2。字體

您可以自由使用任何字體家庭與組件使用。

組件是使用中字體設計和開發的，因此使用不同的字體，可能會發生變化。

添加中字體（可選）

在<head>中添加<link>標籤，然後將font-family設置為全局CSS文件中的Inter 。

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。添加顏色的打字稿類型

因為顏色名稱取決於使用哪個主題，因此您必須將以下內容添加到tsconfig.json中以使用具有data-color組件中的所有顏色：

使用`@digdir/designsystemet-theme`

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

使用自定義主題

CLI designsystemet tokens build命令將向您選擇的輸出目錄輸出colors.d.ts文件。在示例中，將運行<your-path>時使用的實際路徑替換。

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

5。添加編輯器提示，用於HTML元素的數據色和數據尺寸（可選）

您可能需要在HTML元素（例如<span>或<div>上進行data-color和data-size屬性的編輯提示，因為這些屬性會影響嵌套在這些元素中的組件。

這需要增強React的內置類型，因此可以選擇加入。如果需要，請將以下內容添加到您的tsconfig.json ：

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