प्रीसेट

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

जो कंपोनेंट किसी प्रीसेट में है पर डिफ़ॉल्ट सिस्टम में नहीं — m3-like का FAB मेन्यू, या सेगमेंटेड बटन — वह डिफ़ॉल्ट सिस्टम पर बने प्रोडक्ट की पहुँच से बाहर नहीं है। 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">

जिस सिस्टम में कोई कंपोनेंट नहीं है, उसके तहत इस्तेमाल करने पर भी वह बनता है, और डेवलपमेंट बिल्ड के कंसोल में यह बताता है। हर कंपोनेंट का पेज बताता है कि कौन-से सिस्टम में वह है, और बाकी उसकी जगह क्या इस्तेमाल करते हैं।