Layout — چیدمان و پرایمیتیوها

این صفحه کامپوننت جداگانه نیست؛ گروه Layout لایهٔ ۲ (Primitives) است. پرایمیتیوها ساختار معنایی و چیدمان را می‌دهند و هیچ هویت بصری ندارند: فاصله‌ها فقط از پله‌های می‌آیند، رنگ‌ها از توکن‌های معنایی، و تنظیمات هر پرایمیتیو با صفت‌های نوشته می‌شوند. هیچ پرایمیتیوی کلاس کمکی دوم ندارد.

وضعیت: beta · لایه: ۲ () · کد:

TSX

import { Box, Stack, Inline, Cluster, Grid, Container, Surface, Text, Heading, Separator, VisuallyHidden, FocusRing, Portal, Slot, GradientBorder, Icon } from '@tokapps/primitives';

نمونهٔ زنده

این صفحه نمونهٔ زنده ندارد؛ زنده‌سازی برای مرحلهٔ بعد گذاشته شده است. نمونه‌های زیر فقط کد قابل کپی هستند.

کد قابل کپی

یک صفحهٔ ساده با همهٔ پرایمیتیوهای چیدمان اصلی:

TSX

import { Container, Stack, Inline, Grid, Surface, Heading, Text } from '@tokapps/primitives';export function ProjectOverview() {  return (    <Container size="3xl">      <Stack gap={4}>        <Heading level={1}>پروژهٔ Tokapps</Heading>        <Text variant="lead">خلاصهٔ وضعیت پروژه در یک نگاه</Text>        <Inline gap={2} justify="between">          <Text variant="small">به‌روزرسانی: امروز</Text>          <Text variant="small" tone="success">فعال</Text>        </Inline>        <Grid min={14} gap={3}>          <Surface padding={4} elevation={1} radius="lg">            <Text>کارت اول</Text>          </Surface>          <Surface padding={4} elevation={1} radius="lg">            <Text>کارت دوم</Text>          </Surface>        </Grid>      </Stack>    </Container>  );}

همهٔ پیکربندی‌ها

همهٔ پرایمیتیوها پراپ (تگ جایگزین) و صفت‌های HTML معمول را می‌پذیرند، مگر در جدول ذکر شده باشد. مقدار و فقط از مجموعهٔ است: ، ، ، ، ، ، ، ، ، ، ، ، که هر کدام به نگاشت می‌شود. مقدار خام پذیرفته نمی‌شود.

Box

ظرف پایه؛ فقط عنصر معنایی درست را انتخاب می‌کند و هیچ استایلی ندارد.

پراپ	نوع	پیش‌فرض	توضیح
			تگ HTML یا کامپوننت جایگزین.

TSX

import { Box } from '@tokapps/primitives';<Box as="section" aria-labelledby="pricing">  <h2 id="pricing">قیمت‌ها</h2></Box>

Stack

چیدمان عمودی با فاصلهٔ یکنواخت.

نوع	پیش‌فرض	توضیح
		فاصله بین فرزندها.
· · ·	—	هم‌ترازی افقی فرزندها ().
		تگ جایگزین.

TSX

import { Stack, Text } from '@tokapps/primitives';<Stack gap={2} align="start">  <Text>خط اول</Text>  <Text>خط دوم</Text></Stack>

Inline

چیدمان افقی؛ جهت را از صفحه می‌گیرد، پس در RTL خودکار معکوس می‌شود.

نوع	پیش‌فرض	توضیح
		فاصله بین فرزندها.
· · ·	—	هم‌ترازی عمودی ().
· · ·	—	توزیع افقی ().
		یعنی خط‌شکنی غیرفعال.
		تگ جایگزین.

TSX

import { Inline, Text } from '@tokapps/primitives';<Inline gap={2} justify="between" wrap={false}>  <Text variant="small">نام</Text>  <Text variant="small">وضعیت</Text></Inline>

Cluster

گروه فشرده از برچسب‌ها یا تگ‌ها که به خط بعدی می‌شکند. همیشه خط‌شکن است و هم‌ترازی عمودی مرکز دارد.

پراپ	نوع	پیش‌فرض	توضیح
			فاصله بین آیتم‌ها.
			تگ جایگزین.

TSX

import { Cluster } from '@tokapps/primitives';<Cluster gap={1}>  <span>طراحی</span>  <span>توکن</span>  <span>دسترس‌پذیری</span></Cluster>

Grid

شبکهٔ واکنش‌گرا بدون breakpoint. هر ستون حداقل rem عرض دارد و ستون‌ها خودکار تعداد می‌شوند.

نوع	پیش‌فرض	توضیح
		فاصله بین سلول‌ها.
(rem)	rem (از CSS)	کمینه عرض هر ستون. اگر داده نشود، مقدار پیش‌فرض CSS به کار می‌رود.
		تگ جایگزین.

TSX

import { Grid, Surface, Text } from '@tokapps/primitives';<Grid min={12} gap={4}>  <Surface padding={3}><Text>الف</Text></Surface>  <Surface padding={3}><Text>ب</Text></Surface>  <Surface padding={3}><Text>ج</Text></Surface></Grid>

Container

عرض خواندنی و وسط‌چین با فاصلهٔ افقی ثابت.

پراپ	نوع	پیش‌فرض	توضیح
	· · · ·		≈ ۳۶rem، ≈ ۴۸rem، ≈ ۶۴rem، ≈ ۷۲rem، بدون محدودیت.
			تگ جایگزین.

TSX

import { Container, Text } from '@tokapps/primitives';<Container size="5xl">  <Text>متن با عرض خواندنی</Text></Container>

Surface

سطح با ماده و برجستگی. ماده در «کاهش شفافیت» و «کنتراست بالا» خودکار مات می‌شود.

نوع	پیش‌فرض	توضیح
· · ·		سطح عادی، فرورفته، تأکیدی (زمینهٔ کم‌رنگ) یا شیشه‌ای با blur.
· · · · ·	—	سایهٔ برجستگی.
· · · ·	— (از CSS: )	شعاع گوشه.
	—	فاصلهٔ داخلی ().
		تگ جایگزین.

TSX

import { Surface, Text } from '@tokapps/primitives';<Surface material="accent" elevation={2} radius="md" padding={4}>  <Text>یادداشت مهم</Text></Surface>

Text

متن بدنه با نقش معنایی و اندازهٔ ظاهری.

نوع	پیش‌فرض	توضیح
· · · ·		قلم مونو و جهت دارد؛ از حداقل اندازهٔ فارسی پیروی می‌کند.
· · · ·	—	رنگ معنایی. هیچ استایل اضافه‌ای ندارد.
		ارقام هم‌عرض ().
		تگ جایگزین، مثلاً .

TSX

import { Text } from '@tokapps/primitives';<Text variant="small" tone="danger" numeric>  ۳ مورد باقی‌مانده</Text>

Heading

سطح معنایی () از اندازهٔ ظاهری () جداست.

پراپ	نوع	پیش‌فرض	توضیح
	· · ·		تگ تا .
	· · · ·		اندازهٔ ظاهری؛ با عنوان بزرگ صفحه.
			تگ جایگزین، وقتی سطح معنایی جدا از تگ باشد.

TSX

import { Heading } from '@tokapps/primitives';<Heading level={2} size="h1">عنوان بخش با ظاهر بزرگ</Heading>

Divider و Separator

جداکنندهٔ افقی یا عمودی. همان است (نام مستعار).

پراپ	نوع	پیش‌فرض	توضیح
	·		جهت خط.
		—	کلاس اضافه برای چیدمان.

TSX

import { Separator } from '@tokapps/primitives';<Separator orientation="horizontal" />

VisuallyHidden

متنی که برای صفحه‌خوان قابل خواندن است و روی صفحه دیده نمی‌شود.

پراپ	نوع	پیش‌فرض	توضیح
			تگ جایگزین.

TSX

import { VisuallyHidden } from '@tokapps/primitives';<button type="button">  <span aria-hidden="true">×</span>  <VisuallyHidden>بستن</VisuallyHidden></button>

FocusRing

حلقهٔ فوکوس روی ظرف، وقتی فرزندش فوکوس دارد.

پراپ	نوع	پیش‌فرض	توضیح
			تگ جایگزین.

TSX

import { FocusRing } from '@tokapps/primitives';<FocusRing>  <input type="text" aria-label="جستجو" /></FocusRing>

Portal

رندر بیرون از درخت DOM والد، برای overlay و tooltip. فقط در مرورگر رندر می‌شود؛ در اولین رندر و SSR چیزی نمی‌گذارد.

پراپ	نوع	پیش‌فرض	توضیح
		—	محتوای منتقل‌شده.
			مقصد رندر.

TSX

import { Portal, Surface, Text } from '@tokapps/primitives';<Portal>  <Surface elevation="float" padding={3}>    <Text>این روی همه چیز نمایش داده می‌شود</Text>  </Surface></Portal>

Slot

الگوی : خودش رندر نمی‌کند و ویژگی‌ها و رویدادهایش را روی تنها فرزند ادغام می‌کند تا مصرف‌کننده تگ نهایی (مثلاً یا لینک روتر) را تعیین کند. رویدادها زنجیره می‌شوند (اول فرزند، بعد Slot)؛ و ادغام می‌شوند. اگر فرزند عنصر معتبر نباشد، چیزی رندر نمی‌شود.

TSX

import { Slot } from '@tokapps/primitives';<Slot className="tds-link" data-track="hero">  <a href="/pricing">قیمت‌ها</a></Slot>

GradientBorder

تنها راه مجاز گرادیان در TDS: حاشیهٔ کنترل‌شده روی عناصر با اهمیت بالا. حداکثر یکی در هر نما، و هرگز تنها نشانهٔ وضعیت نیست؛ همیشه با آیکون و برچسب همراه است.

نوع	پیش‌فرض	توضیح
· · · · · · · ·		یعنی ، یا اگر درست باشد.
	—	چرخش حاشیه. با و کلید کاهش حرکت متوقف می‌شود.
·		شدت حاشیه.
		تگ جایگزین.

TSX

import { GradientBorder, Text } from '@tokapps/primitives';<GradientBorder variant="funding" intensity="subtle">  <Text>کمپین سرمایه‌گذاری فعال است</Text></GradientBorder>

Icon (بازصادرشده از )

تنها راه نمایش آیکون در TDS. فقط نام معنایی می‌نویسید؛ منبع بصری را registry و تم تعیین می‌کنند.

نوع	پیش‌فرض	توضیح
	—	نام معنایی ثبت‌شده در registry.
	—	آیکون اختصاصی ساخته‌شده با ؛ جایگزین .
· · · ·		هم‌قد متن است؛ هیچ قاعدهٔ اندازه‌ای ندارد.
	—	نام دسترسی؛ با آن و بدون آن تزئینی ().
		در RTL آینه می‌شود (پیکان، بازگشت، ارسال).
· · · ·	—	انیمیشن آیکون.
·		یعنی با hover یا فوکوس والد فعال شود.

همراه دو صادرات دیگر هم هست: (جابه‌جایی نرم بین دو آیکون یک کنترل، مثل پخش و مکث) و برای آیکون SVG اختصاصی با شبکهٔ ۲۴×۲۴.

TSX

import { Icon } from '@tokapps/primitives';<Icon name="back" mirror label="بازگشت" /><Icon name="status.loading" animate="spin" size="sm" />

ساختار و اسلات‌ها

پرایمیتیو	ریشهٔ DOM	صفت شناسه	نشانه‌های تنظیم
	(یا )		—

			، ،
			—


			، ، ،
			، ،
	–
/	با
			—
			—
	فرزندان در	—	—
	فرزند واحد (ادغام‌شده)	—	—
	(یا )		، ،
			، ، ،

بنیان ثابت: ساختار ریشه، صفت ، نگاشت فاصله‌ها به ، و قرارداد هر پرایمیتیو. قابل تغییر: مقدار توکن‌ها در تم و خود که فقط از طریق پراپ‌ها ست می‌شوند.

همهٔ حالت‌ها

صفت	مقادیر	کجا
	· · ·	،
	· · ·
	(فقط وقتی )
	· · · (برای خالی می‌ماند)	؛ با · · · ·
	· · ·
	· · · · ·
	· · · ·
	خالی (وقتی داده شود)
	· · · · ()؛ گرادیان‌ها ()	،
	· · · ·
	حضور صفت (وقتی درست باشد)
	·
	·
	·
	حضور صفت
	· · · ·
	·	(وقتی باشد)

پرایمیتیوها حالت hover، pressed، خطا، غیرفعال یا بارگذاری ندارند. تنها حالت تعاملی است که با فوکوس () حلقه نشان می‌دهد.

تغییرات مجاز برای توسعه‌دهنده

Stack و Inline: از ، از · · · ، و در از · · · .
Grid: و (rem).
Container: از · · · · .
Surface: از · · · ؛ ؛ ؛ .
Text: از · · · · ؛ از · · · · ؛ .
Heading: از ۱ تا ۴؛ از · تا ؛ برای جدا کردن تگ از سطح.
Divider: از · .
GradientBorder: از فهرست هشت‌تایی (گرادیان‌های تعریف‌شده در توکن‌ها)؛ ؛ .
Icon: (نام معنایی)؛ برای آیکون اختصاصی؛ ؛ ؛ ؛ ؛ .
نقاط توسعه عمومی: (تگ جایگزین)، ، (فقط برای متغیرهای CSS)، و هر صفت HTML معمول.
Slot: هر تگ یا کامپوننتی که فرزند واحد باشد و handler و className را بپذیرد.

تغییرات ممنوع (بنیان ثابت)

مقدار خام در فاصله: و فقط از هستند؛ عدد خام یا پذیرفته نمی‌شود.
رنگ خام یا گرادیان در CSS پرایمیتیو: فقط توکن. تنها استثنا حاشیهٔ است.
گرادیان خارج از : ممنوع است. حداکثر یک شاخص در هر نما.
تنها نشانهٔ وضعیت: نباید تنها نشانهٔ یک وضعیت باشد.
تغییر ساختار DOM: و تگ ریشه از پرایمیتیو ثابت‌اند؛ مصرف‌کننده تنها را عوض می‌کند.
کلاس کمکی دوم: هیچ پرایمیتیوی به کلاس کمکی متکی نیست؛ همه با کار می‌کنند.
Surface با ماده شیشه‌ای در کنتراست بالا: توضیح کد می‌گوید شیشه در کنتراست بالا مات می‌شود، اما قاعدهٔ صریح آن در دیده نمی‌شود. تا تعریف شدن این قاعده، شیشه را در کنتراست بالا بدون بررسی به کار نبرید.
Icon با مسیر فایل: هرگز از یا مسیر فایل آیکون؛ فقط معنایی.

RTL، کیبورد و صفحه‌خوان

RTL: و عمودی یا خط‌شکن‌اند و جهت را از صفحه می‌گیرند. با صفحه در RTL معکوس می‌شود. و با فاصلهٔ افقی منطقی () کار می‌کنند. با در RTL آینه می‌شود.
کیبورد: وقتی فرزندش فوکوس دارد حلقهٔ فوکوس نشان می‌دهد. رویدادهای کیبورد فرزند را حفظ می‌کند.
صفحه‌خوان: سطح معنایی تا می‌دهد و ساختار سرفصل‌ها را برای صفحه‌خوان نگه می‌دارد. متن کمکی را فقط برای صفحه‌خوان می‌گذارد. هم‌زمان و دارد. بدون از صفحه‌خوان پنهان است.

صدا، حرکت، چاپ و کاهش حرکت

صدا: هیچ پرایمیتیو چیدمان رویداد صوتی ندارد.
حرکت: فقط با می‌چرخد. با و روی متوقف می‌شود. انیمیشن (از طریق ) در پکیج پرایمیتیو تعریف نشده و در پکیج آیکون است.
چاپ: پرایمیتیوها استایل چاپ ویژه ندارند؛ پنهان‌سازی در چاپ بر عهدهٔ کامپوننت‌های بالاتر است.

توکن‌ها

فاصله: (از طریق )، و متغیرهای داخلی ، ، .
معنایی مصرفی: ، ، ، ، تا و ، تا ، ، ، ، ، ، ، ، ، ، ، و عرض و افست آن.
شیشه: ، ، ، ، ، و .
گرادیان: ، ، ، ، ، ، ، ، همراه ، ، و .
مقدار: فقط این متغیرها را مصرف می‌کند؛ مقدار واقعی در .

قرارداد ARCH

آیکون فقط با و نام معنایی نمایش داده می‌شود؛ در این پکیج از بازصادر می‌شود.
هیچ پرایمیتیوی مسیر asset یا فایل آیکون ندارد.
تم فقط حرکت و توکن‌ها را تغییر می‌دهد؛ DOM و پرایمیتیوها ثابت‌اند.
پرایمیتیوها gesture ندارند. معادل کیبوردی ندارند؛ وقتی جایی لازم شود، کامپوننت بالاتر آن را تعریف می‌کند.

نکات

برای ساخت سطح و کارت آماده از Card استفاده کنید. برای جداسازی فهرست‌ها از همین صفحه استفاده کنید.
برای نمایش برچسب‌ها و تگ‌ها که می‌شکنند از ، و برای فهرست‌های ردیفی با دکمه‌ها از استفاده کنید.
را فقط روی یک عنصر مهم در هر نما بگذارید و همیشه همراه آیکون یا برچسب باشد؛ قاعدهٔ کامل رنگ در آمده است.
با ماده به blur و پشتیبانی مرورگر وابسته است؛ در مرورگرهای بدون به برمی‌گردد.

Layout — چیدمان و پرایمیتیوها

وضعیت: beta · لایه: ۲ () · کد:

TSX

import { Box, Stack, Inline, Cluster, Grid, Container, Surface, Text, Heading, Separator, VisuallyHidden, FocusRing, Portal, Slot, GradientBorder, Icon } from '@tokapps/primitives';

نمونهٔ زنده

این صفحه نمونهٔ زنده ندارد؛ زنده‌سازی برای مرحلهٔ بعد گذاشته شده است. نمونه‌های زیر فقط کد قابل کپی هستند.

کد قابل کپی

یک صفحهٔ ساده با همهٔ پرایمیتیوهای چیدمان اصلی:

TSX

import { Container, Stack, Inline, Grid, Surface, Heading, Text } from '@tokapps/primitives';export function ProjectOverview() {  return (    <Container size="3xl">      <Stack gap={4}>        <Heading level={1}>پروژهٔ Tokapps</Heading>        <Text variant="lead">خلاصهٔ وضعیت پروژه در یک نگاه</Text>        <Inline gap={2} justify="between">          <Text variant="small">به‌روزرسانی: امروز</Text>          <Text variant="small" tone="success">فعال</Text>        </Inline>        <Grid min={14} gap={3}>          <Surface padding={4} elevation={1} radius="lg">            <Text>کارت اول</Text>          </Surface>          <Surface padding={4} elevation={1} radius="lg">            <Text>کارت دوم</Text>          </Surface>        </Grid>      </Stack>    </Container>  );}

همهٔ پیکربندی‌ها

Box

ظرف پایه؛ فقط عنصر معنایی درست را انتخاب می‌کند و هیچ استایلی ندارد.

پراپ	نوع	پیش‌فرض	توضیح
			تگ HTML یا کامپوننت جایگزین.

TSX

import { Box } from '@tokapps/primitives';<Box as="section" aria-labelledby="pricing">  <h2 id="pricing">قیمت‌ها</h2></Box>

Stack

چیدمان عمودی با فاصلهٔ یکنواخت.

نوع	پیش‌فرض	توضیح
		فاصله بین فرزندها.
· · ·	—	هم‌ترازی افقی فرزندها ().
		تگ جایگزین.

TSX

import { Stack, Text } from '@tokapps/primitives';<Stack gap={2} align="start">  <Text>خط اول</Text>  <Text>خط دوم</Text></Stack>

Inline

چیدمان افقی؛ جهت را از صفحه می‌گیرد، پس در RTL خودکار معکوس می‌شود.

نوع	پیش‌فرض	توضیح
		فاصله بین فرزندها.
· · ·	—	هم‌ترازی عمودی ().
· · ·	—	توزیع افقی ().
		یعنی خط‌شکنی غیرفعال.
		تگ جایگزین.

TSX

import { Inline, Text } from '@tokapps/primitives';<Inline gap={2} justify="between" wrap={false}>  <Text variant="small">نام</Text>  <Text variant="small">وضعیت</Text></Inline>

Cluster

گروه فشرده از برچسب‌ها یا تگ‌ها که به خط بعدی می‌شکند. همیشه خط‌شکن است و هم‌ترازی عمودی مرکز دارد.

پراپ	نوع	پیش‌فرض	توضیح
			فاصله بین آیتم‌ها.
			تگ جایگزین.

TSX

import { Cluster } from '@tokapps/primitives';<Cluster gap={1}>  <span>طراحی</span>  <span>توکن</span>  <span>دسترس‌پذیری</span></Cluster>

Grid

شبکهٔ واکنش‌گرا بدون breakpoint. هر ستون حداقل rem عرض دارد و ستون‌ها خودکار تعداد می‌شوند.

نوع	پیش‌فرض	توضیح
		فاصله بین سلول‌ها.
(rem)	rem (از CSS)	کمینه عرض هر ستون. اگر داده نشود، مقدار پیش‌فرض CSS به کار می‌رود.
		تگ جایگزین.

TSX

import { Grid, Surface, Text } from '@tokapps/primitives';<Grid min={12} gap={4}>  <Surface padding={3}><Text>الف</Text></Surface>  <Surface padding={3}><Text>ب</Text></Surface>  <Surface padding={3}><Text>ج</Text></Surface></Grid>

Container

عرض خواندنی و وسط‌چین با فاصلهٔ افقی ثابت.

پراپ	نوع	پیش‌فرض	توضیح
	· · · ·		≈ ۳۶rem، ≈ ۴۸rem، ≈ ۶۴rem، ≈ ۷۲rem، بدون محدودیت.
			تگ جایگزین.

TSX

import { Container, Text } from '@tokapps/primitives';<Container size="5xl">  <Text>متن با عرض خواندنی</Text></Container>

Surface

سطح با ماده و برجستگی. ماده در «کاهش شفافیت» و «کنتراست بالا» خودکار مات می‌شود.

نوع	پیش‌فرض	توضیح
· · ·		سطح عادی، فرورفته، تأکیدی (زمینهٔ کم‌رنگ) یا شیشه‌ای با blur.
· · · · ·	—	سایهٔ برجستگی.
· · · ·	— (از CSS: )	شعاع گوشه.
	—	فاصلهٔ داخلی ().
		تگ جایگزین.

TSX

import { Surface, Text } from '@tokapps/primitives';<Surface material="accent" elevation={2} radius="md" padding={4}>  <Text>یادداشت مهم</Text></Surface>

Text

متن بدنه با نقش معنایی و اندازهٔ ظاهری.

نوع	پیش‌فرض	توضیح
· · · ·		قلم مونو و جهت دارد؛ از حداقل اندازهٔ فارسی پیروی می‌کند.
· · · ·	—	رنگ معنایی. هیچ استایل اضافه‌ای ندارد.
		ارقام هم‌عرض ().
		تگ جایگزین، مثلاً .

TSX

import { Text } from '@tokapps/primitives';<Text variant="small" tone="danger" numeric>  ۳ مورد باقی‌مانده</Text>

Heading

سطح معنایی () از اندازهٔ ظاهری () جداست.

پراپ	نوع	پیش‌فرض	توضیح
	· · ·		تگ تا .
	· · · ·		اندازهٔ ظاهری؛ با عنوان بزرگ صفحه.
			تگ جایگزین، وقتی سطح معنایی جدا از تگ باشد.

TSX

import { Heading } from '@tokapps/primitives';<Heading level={2} size="h1">عنوان بخش با ظاهر بزرگ</Heading>

Divider و Separator

جداکنندهٔ افقی یا عمودی. همان است (نام مستعار).

پراپ	نوع	پیش‌فرض	توضیح
	·		جهت خط.
		—	کلاس اضافه برای چیدمان.

TSX

import { Separator } from '@tokapps/primitives';<Separator orientation="horizontal" />

VisuallyHidden

متنی که برای صفحه‌خوان قابل خواندن است و روی صفحه دیده نمی‌شود.

پراپ	نوع	پیش‌فرض	توضیح
			تگ جایگزین.

TSX

import { VisuallyHidden } from '@tokapps/primitives';<button type="button">  <span aria-hidden="true">×</span>  <VisuallyHidden>بستن</VisuallyHidden></button>

FocusRing

حلقهٔ فوکوس روی ظرف، وقتی فرزندش فوکوس دارد.

پراپ	نوع	پیش‌فرض	توضیح
			تگ جایگزین.

TSX

import { FocusRing } from '@tokapps/primitives';<FocusRing>  <input type="text" aria-label="جستجو" /></FocusRing>

Portal

رندر بیرون از درخت DOM والد، برای overlay و tooltip. فقط در مرورگر رندر می‌شود؛ در اولین رندر و SSR چیزی نمی‌گذارد.

پراپ	نوع	پیش‌فرض	توضیح
		—	محتوای منتقل‌شده.
			مقصد رندر.

TSX

import { Portal, Surface, Text } from '@tokapps/primitives';<Portal>  <Surface elevation="float" padding={3}>    <Text>این روی همه چیز نمایش داده می‌شود</Text>  </Surface></Portal>

Slot

TSX

import { Slot } from '@tokapps/primitives';<Slot className="tds-link" data-track="hero">  <a href="/pricing">قیمت‌ها</a></Slot>

GradientBorder

نوع	پیش‌فرض	توضیح
· · · · · · · ·		یعنی ، یا اگر درست باشد.
	—	چرخش حاشیه. با و کلید کاهش حرکت متوقف می‌شود.
·		شدت حاشیه.
		تگ جایگزین.

TSX

import { GradientBorder, Text } from '@tokapps/primitives';<GradientBorder variant="funding" intensity="subtle">  <Text>کمپین سرمایه‌گذاری فعال است</Text></GradientBorder>

Icon (بازصادرشده از )

تنها راه نمایش آیکون در TDS. فقط نام معنایی می‌نویسید؛ منبع بصری را registry و تم تعیین می‌کنند.

نوع	پیش‌فرض	توضیح
	—	نام معنایی ثبت‌شده در registry.
	—	آیکون اختصاصی ساخته‌شده با ؛ جایگزین .
· · · ·		هم‌قد متن است؛ هیچ قاعدهٔ اندازه‌ای ندارد.
	—	نام دسترسی؛ با آن و بدون آن تزئینی ().
		در RTL آینه می‌شود (پیکان، بازگشت، ارسال).
· · · ·	—	انیمیشن آیکون.
·		یعنی با hover یا فوکوس والد فعال شود.

TSX

import { Icon } from '@tokapps/primitives';<Icon name="back" mirror label="بازگشت" /><Icon name="status.loading" animate="spin" size="sm" />

ساختار و اسلات‌ها

پرایمیتیو	ریشهٔ DOM	صفت شناسه	نشانه‌های تنظیم
	(یا )		—

			، ،
			—


			، ، ،
			، ،
	–
/	با
			—
			—
	فرزندان در	—	—
	فرزند واحد (ادغام‌شده)	—	—
	(یا )		، ،
			، ، ،

همهٔ حالت‌ها

صفت	مقادیر	کجا
	· · ·	،
	· · ·
	(فقط وقتی )
	· · · (برای خالی می‌ماند)	؛ با · · · ·
	· · ·
	· · · · ·
	· · · ·
	خالی (وقتی داده شود)
	· · · · ()؛ گرادیان‌ها ()	،
	· · · ·
	حضور صفت (وقتی درست باشد)
	·
	·
	·
	حضور صفت
	· · · ·
	·	(وقتی باشد)

تغییرات مجاز برای توسعه‌دهنده

Stack و Inline: از ، از · · · ، و در از · · · .
Grid: و (rem).
Container: از · · · · .
Surface: از · · · ؛ ؛ ؛ .
Text: از · · · · ؛ از · · · · ؛ .
Heading: از ۱ تا ۴؛ از · تا ؛ برای جدا کردن تگ از سطح.
Divider: از · .
GradientBorder: از فهرست هشت‌تایی (گرادیان‌های تعریف‌شده در توکن‌ها)؛ ؛ .
Icon: (نام معنایی)؛ برای آیکون اختصاصی؛ ؛ ؛ ؛ ؛ .
نقاط توسعه عمومی: (تگ جایگزین)، ، (فقط برای متغیرهای CSS)، و هر صفت HTML معمول.
Slot: هر تگ یا کامپوننتی که فرزند واحد باشد و handler و className را بپذیرد.

تغییرات ممنوع (بنیان ثابت)

مقدار خام در فاصله: و فقط از هستند؛ عدد خام یا پذیرفته نمی‌شود.
رنگ خام یا گرادیان در CSS پرایمیتیو: فقط توکن. تنها استثنا حاشیهٔ است.
گرادیان خارج از : ممنوع است. حداکثر یک شاخص در هر نما.
تنها نشانهٔ وضعیت: نباید تنها نشانهٔ یک وضعیت باشد.
تغییر ساختار DOM: و تگ ریشه از پرایمیتیو ثابت‌اند؛ مصرف‌کننده تنها را عوض می‌کند.
کلاس کمکی دوم: هیچ پرایمیتیوی به کلاس کمکی متکی نیست؛ همه با کار می‌کنند.
Surface با ماده شیشه‌ای در کنتراست بالا: توضیح کد می‌گوید شیشه در کنتراست بالا مات می‌شود، اما قاعدهٔ صریح آن در دیده نمی‌شود. تا تعریف شدن این قاعده، شیشه را در کنتراست بالا بدون بررسی به کار نبرید.
Icon با مسیر فایل: هرگز از یا مسیر فایل آیکون؛ فقط معنایی.

RTL، کیبورد و صفحه‌خوان

RTL: و عمودی یا خط‌شکن‌اند و جهت را از صفحه می‌گیرند. با صفحه در RTL معکوس می‌شود. و با فاصلهٔ افقی منطقی () کار می‌کنند. با در RTL آینه می‌شود.
کیبورد: وقتی فرزندش فوکوس دارد حلقهٔ فوکوس نشان می‌دهد. رویدادهای کیبورد فرزند را حفظ می‌کند.
صفحه‌خوان: سطح معنایی تا می‌دهد و ساختار سرفصل‌ها را برای صفحه‌خوان نگه می‌دارد. متن کمکی را فقط برای صفحه‌خوان می‌گذارد. هم‌زمان و دارد. بدون از صفحه‌خوان پنهان است.

صدا، حرکت، چاپ و کاهش حرکت

صدا: هیچ پرایمیتیو چیدمان رویداد صوتی ندارد.
حرکت: فقط با می‌چرخد. با و روی متوقف می‌شود. انیمیشن (از طریق ) در پکیج پرایمیتیو تعریف نشده و در پکیج آیکون است.
چاپ: پرایمیتیوها استایل چاپ ویژه ندارند؛ پنهان‌سازی در چاپ بر عهدهٔ کامپوننت‌های بالاتر است.

توکن‌ها

فاصله: (از طریق )، و متغیرهای داخلی ، ، .
معنایی مصرفی: ، ، ، ، تا و ، تا ، ، ، ، ، ، ، ، ، ، ، و عرض و افست آن.
شیشه: ، ، ، ، ، و .
گرادیان: ، ، ، ، ، ، ، ، همراه ، ، و .
مقدار: فقط این متغیرها را مصرف می‌کند؛ مقدار واقعی در .

قرارداد ARCH

آیکون فقط با و نام معنایی نمایش داده می‌شود؛ در این پکیج از بازصادر می‌شود.
هیچ پرایمیتیوی مسیر asset یا فایل آیکون ندارد.
تم فقط حرکت و توکن‌ها را تغییر می‌دهد؛ DOM و پرایمیتیوها ثابت‌اند.
پرایمیتیوها gesture ندارند. معادل کیبوردی ندارند؛ وقتی جایی لازم شود، کامپوننت بالاتر آن را تعریف می‌کند.

نکات

برای ساخت سطح و کارت آماده از Card استفاده کنید. برای جداسازی فهرست‌ها از همین صفحه استفاده کنید.
برای نمایش برچسب‌ها و تگ‌ها که می‌شکنند از ، و برای فهرست‌های ردیفی با دکمه‌ها از استفاده کنید.
را فقط روی یک عنصر مهم در هر نما بگذارید و همیشه همراه آیکون یا برچسب باشد؛ قاعدهٔ کامل رنگ در آمده است.
با ماده به blur و پشتیبانی مرورگر وابسته است؛ در مرورگرهای بدون به برمی‌گردد.

Layout — چیدمان و پرایمیتیوها

نمونهٔ زنده

کد قابل کپی

همهٔ پیکربندی‌ها

Box

Stack

Inline

Cluster

Grid

Container

Surface

Text

Heading

Divider و Separator

VisuallyHidden

FocusRing

Portal

Slot

GradientBorder

Icon (بازصادرشده از @tokapps/iconsکپی کدکپی کد)

ساختار و اسلات‌ها

همهٔ حالت‌ها

تغییرات مجاز برای توسعه‌دهنده

تغییرات ممنوع (بنیان ثابت)

RTL، کیبورد و صفحه‌خوان

صدا، حرکت، چاپ و کاهش حرکت

توکن‌ها

قرارداد ARCH

نکات

Layout — چیدمان و پرایمیتیوها

نمونهٔ زنده

کد قابل کپی

همهٔ پیکربندی‌ها

Box

Stack

Inline

Cluster

Grid

Container

Surface

Text

Heading

Divider و Separator

VisuallyHidden

FocusRing

Portal

Slot

GradientBorder

Icon (بازصادرشده از @tokapps/iconsکپی کدکپی کد)

ساختار و اسلات‌ها

همهٔ حالت‌ها

تغییرات مجاز برای توسعه‌دهنده

تغییرات ممنوع (بنیان ثابت)

RTL، کیبورد و صفحه‌خوان

صدا، حرکت، چاپ و کاهش حرکت

توکن‌ها

قرارداد ARCH

نکات

Icon (بازصادرشده از )

Icon (بازصادرشده از )