designsystemet Download - designsystemet Source Code Download

designsystemet

مكونات الطرف الثالث

1.0.0

تنزيل

DesignSystemet

حول DesignSystemet

DesignSystemet هي مجموعة من عناصر التصميم المهمة والمكونات والأنماط التي يمكن استخدامها لبناء الخدمات العامة.

هدفنا هو إنشاء تجارب متسقة وسهلة الاستخدام في الحلول الرقمية للخدمات العامة ، مما يجعلها أكثر كفاءة وموثوقية.

؟ الروابط

قصص - معاينة لمكونات رد الفعل.

واجهة المتجر - وثائق عامة حول نظام التصميم.

موضوع - موضوع باني.

؟ حزم

@digdir/designsystemet - CLI لـ DesignSystemet.

@digdir/designsystemet-theme - موضوعات لـ DesignSystemet.

@digdir/designsystemet-css - التصميم للمكونات.

@digdir/designsystemet-react React of 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 من خلال الانتقال إلى بناء السمات لدينا.

يتم تعريف The DesignSystemet thering باستخدام Tokens Design. يتم ذلك حتى تتمكن من استخدام Token Studio لمزامنة موضوعك في الكود مع مجموعة DesignSystemet Figma UI ، بالإضافة إلى توفير المرونة في المستقبل.

قم بتشغيل npx @digdir/designsystemet tokens build لإنشاء ملفات CSS لموضوعك المخصص (من Tokens Design). باستخدام ملف موضوع CSS الخاص بك ، يمكنك تخطي باستخدام حزمة @digdir/designsystemet-theme .

2. الخط

أنت حر في استخدام أي أسرة خط مع المكونات.

تم تصميم المكونات وتطويرها باستخدام الخط المترابط ، لذا قد تحدث الاختلافات إذا تم استخدام خط مختلف.

أضف الخط Inter (اختياري)

أضف علامة <link> في <head> ، وقم بتعيين font-family على Inter في ملف CSS العالمي.

تضيف font-feature-settings ذيلًا إلى Lopcase 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 */
}

إذا اخترت تثبيت الخط بطريقة مختلفة ، تذكر أن تضم أوزان الخط 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"
      ]
  } ,
}

عند استخدام سمة مخصصة

سيقوم CLI designsystemet tokens build Command بإخراج ملف 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"
      ]
  } ,
}