DockSheet — برگهٔ پایینی (داک زنده)

برگهٔ پایینی سنتی (مودال با دستگیره و توقفگاه) از TDS حذف شده است. جای آن، داک شیشه‌ای است که زنده تغییر شکل می‌دهد: همان سطح شیشه‌ای رشد می‌کند، محتوا درونش می‌نشیند و با بستن دوباره به نوار برمی‌گردد.

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

TSX

import { openDockSheet, closeDockSheet } from '@tokapps/tuk/dock';

چهار مدل

هر مدل با انتخاب می‌شود و ساختار، ARIA و ژست یکسان دارد؛ فقط شیوهٔ تغییر شکل فرق می‌کند.

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

ژست

کشیدن به پایین (یا تند کشیدن) برگه را می‌بندد؛ رها کردن کوتاه آن را فنری برمی‌گرداند.
کشیدن به بالا با مقاومت لاستیکی کش می‌آید.
سرعت انگشت به کشش مایع داک تبدیل می‌شود ().
شروع کشیدن از ورودی‌های متنی یا از بدنهٔ اسکرول‌شده، کشیدن نیست.
آستانه‌ها از توکن‌های و .
ژست هرگز تنها راه بستن نیست: دکمهٔ بستن مرئی و Escape همیشه هست.

API

یک handle برمی‌گرداند: و .
یک برگه هم‌زمان است؛ برگهٔ جدید قبلی را جایگزین و آن را صدا می‌زند.
کلیک بیرون از داک فقط وقتی درست است می‌بندد.

هویت هر تم

بنیان (ساختار، ژست، ARIA) ثابت است. تم فقط زمان و منحنی و انیمیشن را عوض می‌کند: روی ، و توکن‌های / . تم برای مدل موج و ریزش مایع دارد؛ بقیهٔ تم‌ها حرکت پایهٔ هر مدل را دارند.

کاهش حرکت () انیمیشن و فنر را حذف می‌کند و کشیدن همچنان کار می‌کند.

نمونهٔ قابل‌کپی

TSX

import { closeDockSheet, openDockSheet } from '@tokapps/tuk/dock';export function ShareButton() {  return (    <button      type="button"      onClick={() =>        openDockSheet({          model: 'bloom', // 'liquid' | 'bloom' | 'curtain' | 'bubble'          title: 'اشتراک‌گذاری ایده',          content: <p>پیوند ایده را کپی کنید یا برای گروه‌ها بفرستید.</p>,          footer: <button type="button" onClick={() => closeDockSheet()}>بستن</button>,        })      }    >      اشتراک‌گذاری    </button>  );}

DockSheet — برگهٔ پایینی (داک زنده)

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

TSX

import { openDockSheet, closeDockSheet } from '@tokapps/tuk/dock';

چهار مدل

هر مدل با انتخاب می‌شود و ساختار، ARIA و ژست یکسان دارد؛ فقط شیوهٔ تغییر شکل فرق می‌کند.

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

ژست

کشیدن به پایین (یا تند کشیدن) برگه را می‌بندد؛ رها کردن کوتاه آن را فنری برمی‌گرداند.

کشیدن به بالا با مقاومت لاستیکی کش می‌آید.

سرعت انگشت به کشش مایع داک تبدیل می‌شود ().

شروع کشیدن از ورودی‌های متنی یا از بدنهٔ اسکرول‌شده، کشیدن نیست.

آستانه‌ها از توکن‌های و .

ژست هرگز تنها راه بستن نیست: دکمهٔ بستن مرئی و Escape همیشه هست.

API

یک handle برمی‌گرداند: و .

یک برگه هم‌زمان است؛ برگهٔ جدید قبلی را جایگزین و آن را صدا می‌زند.

کلیک بیرون از داک فقط وقتی درست است می‌بندد.

هویت هر تم

کاهش حرکت () انیمیشن و فنر را حذف می‌کند و کشیدن همچنان کار می‌کند.

نمونهٔ قابل‌کپی

TSX

import { closeDockSheet, openDockSheet } from '@tokapps/tuk/dock';export function ShareButton() {  return (    <button      type="button"      onClick={() =>        openDockSheet({          model: 'bloom', // 'liquid' | 'bloom' | 'curtain' | 'bubble'          title: 'اشتراک‌گذاری ایده',          content: <p>پیوند ایده را کپی کنید یا برای گروه‌ها بفرستید.</p>,          footer: <button type="button" onClick={() => closeDockSheet()}>بستن</button>,        })      }    >      اشتراک‌گذاری    </button>  );}