الإعدادات الجاهزة

يأتي Tanrei مع نظامه الافتراضي tanrei وثلاثة إعدادات جاهزة: m3-like وm3-expressive-like وcupertino. الإعداد الجاهز طبقة نظام تصميم مثل التي تكتبها بنفسك: يعطي مكوّنات Tanrei قيم نظام تصميم آخر، ويحدّد أيّ المكوّنات، وأيّ قيم variant لها، يتضمّن. استخدمه كما هو، أو نقطةَ بداية لنظام التصميم الخاص بك.

استخدام إعداد جاهز على الويب

link

1. حمّل الرموز، ثم ورقة أنماط الإعداد الجاهز. تنطبق رموزه حيث توضع سمته.

   import '@tanrei/web/tokens.css';
   import '@tanrei/web/systems/m3-like.css';

2. ضع السمة على <html> أو على أي جزء من الصفحة: يمكن لعدة أنظمة أن تجتمع في صفحة واحدة.

   <html data-tanrei-system="m3-like">

3. سجّل مكوّنات الإعداد الجاهز بمدخله، بدلًا من @tanrei/web. يسجّل المكوّنات التي يتضمّنها الإعداد الجاهز ولا شيء غيرها.

   import '@tanrei/web/m3-like';

4. حمّل خطوطه بأسماء العائلات التي تستخدمها رموزه، وهي مسرودة أدناه. لا يضمّ Tanrei أي ملف خط: راجع الخطوط.

ما يتضمّنه الإعداد الجاهز مسرود في بيان مكوّناته، @tanrei/web/systems/<id>.components.json، الذي تقرؤه المحرّرات ووكلاء البرمجة. في هذا الموقع، اختر نظام تصميم بجانب قائمة المكوّنات أو في أعلى الشريط الجانبي، فتعرض القوائم ما يتضمّنه ذلك النظام فقط.

الإعدادات الجاهزة

link

تُقرأ بيانات كل إعداد جاهز أدناه من طبقته ورموزه المحلولة وبيان مكوّناته.

m3-like

link

ورقة الأنماط

@tanrei/web/systems/m3-like.css

السمة

data-tanrei-system="m3-like"

المكوّنات

96، تسجّلها @tanrei/web/m3-like

النص

Roboto, system-ui, sans-serif — حمّل Roboto (@fontsource-variable/roboto)

الشيفرة

Roboto Mono, ui-monospace, monospace — حمّل Roboto Mono (@fontsource-variable/roboto-mono)

الأيقونات

Material Symbols Outlined — حمّل Material Symbols Outlined (@fontsource-variable/material-symbols-outlined)

ما يزيد على النظام الافتراضي

FAB menu, Segmented button

غير موجود فيه

لا شيء

قيم أشكال تزيد على النظام الافتراضي

filled, outlined: Chip field, Color field, Color input, Combobox, Combobox field, Number field, Number input, Select, Select field, Text field, Text input

قيم أشكال يستبعدها

filled: Navigation bar · tonal: Tabs

مولَّد من tokens/systems/m3-like.system.json, tokens/generated/m3-like/components.json

m3-expressive-like

link

ورقة الأنماط

@tanrei/web/systems/m3-expressive-like.css

السمة

data-tanrei-system="m3-expressive-like"

المكوّنات

96، تسجّلها @tanrei/web/m3-expressive-like

النص

Roboto, system-ui, sans-serif — حمّل Roboto (@fontsource-variable/roboto)

الشيفرة

Roboto Mono, ui-monospace, monospace — حمّل Roboto Mono (@fontsource-variable/roboto-mono)

الأيقونات

Material Symbols Outlined — حمّل Material Symbols Outlined (@fontsource-variable/material-symbols-outlined)

ما يزيد على النظام الافتراضي

FAB menu, Segmented button

غير موجود فيه

لا شيء

قيم أشكال تزيد على النظام الافتراضي

filled, outlined: Chip field, Color field, Color input, Combobox, Combobox field, Number field, Number input, Select, Select field, Text field, Text input

قيم أشكال يستبعدها

filled: Navigation bar · tonal: Tabs

مولَّد من tokens/systems/m3-expressive-like.system.json, tokens/generated/m3-expressive-like/components.json

cupertino

link

ورقة الأنماط

@tanrei/web/systems/cupertino.css

السمة

data-tanrei-system="cupertino"

المكوّنات

95، تسجّلها @tanrei/web/cupertino

النص

-apple-system, BlinkMacSystemFont, system-ui, Inter, sans-serif — حمّل Inter (@fontsource-variable/inter)

الشيفرة

ui-monospace, SF Mono, Menlo, monospace — خطوط المنصّة نفسها

الأيقونات

Material Symbols Rounded — حمّل Material Symbols Rounded (@fontsource-variable/material-symbols-rounded)

ما يزيد على النظام الافتراضي

Segmented button

غير موجود فيه

FAB menu (استخدم Main action button, Bottom sheet بدلًا منه)

قيم أشكال تزيد على النظام الافتراضي

filled, outlined: Chip field, Color field, Color input, Combobox, Combobox field, Number field, Number input, Select, Select field, Text field, Text input

قيم أشكال يستبعدها

filled: Navigation bar

مولَّد من tokens/systems/cupertino.system.json, tokens/generated/cupertino/components.json

خذ مكوّنًا واحدًا من إعداد جاهز إلى نظامك الخاص

link

المكوّن الذي يتضمّنه إعداد جاهز ولا يتضمّنه النظام الافتراضي — قائمة FAB في m3-like، أو الزر المقسَّم — ليس بعيدًا عن متناول منتج مبني على النظام الافتراضي. اكتب طبقة توسّع tanrei، وأدرج فيها المكوّن، واستورد وحدته الخاصة. عندها يُرسم المكوّن برموز نظامك: رموزه تشير إلى رموز نظامك، فتبدو قائمة FAB المأخوذة بهذه الطريقة مثل بقية منتجك، ولا تأتي معها أي قيمة من قيم الإعداد الجاهز.

1. أدرج المكوّن في طبقتك (design/acme.system.json؛ راجع نظام التصميم الخاص بك). المكوّن الذي يقع في طبقة إعداد جاهز يسمّي تلك الطبقة (from)؛ والمكوّن الذي يستبعده النظام الافتراضي يُذكر باسمه وحده.

   {
     "id": "acme",
     "extends": "tanrei",
     "components": {
       "include": [{ "name": "fab-menu", "from": "m3-like" }, "segmented-button"]
     }
   }

2. ابنِ. يكتب npx tanrei build ورقة أنماط نظامك، وفيها رموز المكوّنات المُدرجة مقيَّمةً من رموزك، وبيان مكوّناتك الذي يسردها.

3. حمّل ورقة أنماطك، وضع سمتك، وسجّل مكوّنات النظام الافتراضي والمكوّنات التي أخذتها.

   import '@tanrei/web/tokens.css';
   import './styles/acme.css';
   import '@tanrei/web';
   import '@tanrei/web/components/fab-menu';
   import '@tanrei/web/components/segmented-button';

   <html data-tanrei-system="acme">

المكوّن المستخدَم تحت نظام لا يتضمّنه يُرسم مع ذلك، ويذكر ذلك في وحدة التحكم في بناء التطوير. وتذكر صفحة كل مكوّن أيّ الأنظمة تتضمّنه، وما الذي تستخدمه الأنظمة الأخرى بدلًا منه.