تغییر نمایش (View Toggle)
سوئیچکننده بین حالت گرید و لیست برای نمایش محتوا.
معرفی
کامپوننت ViewToggle یک سوئیچ ساده برای تغییر حالت نمایش بین گرید و لیست است. روی ToggleGroup ساخته شده و بهطور خودکار aria-label مناسب اضافه میکند.
چه زمانی استفاده نکنیم:
- برای بیش از ۳ حالت نمایش — از
ToggleGroupیاSelectاستفاده کنید - برای ناوبری بین صفحات — از
Tabsاستفاده کنید
استفاده
حالت نمایش:
import { ViewToggle } from '@parto-system-design/ui'
export default function MyComponent() {
const [view, setView] = React.useState<'grid' | 'list'>('grid')
return <ViewToggle value={view} onValueChange={setView} />
}Props
دسترسیپذیری
- هر دکمه
aria-labelمناسب دارد («نمایش گرید» / «نمایش لیست») - از ToggleGroup با
type="single"استفاده میکند — مقدار انتخابشده همیشه حفظ میشود
راهنمای استفاده
بکنید
- از ViewToggle برای تغییر بین دو حالت نمایش گرید و لیست استفاده کنید - مقدار انتخابشده را در state مدیریت کنید تا با
تغییر، محتوا بهروزرسانی شود -
localeرا متناسب با زبان رابط تنظیم کنید تاaria-labelصحیح باشد
نکنید
- از ViewToggle برای بیش از ۲ حالت نمایش استفاده نکنید — از
ToggleGroupیاSelectاستفاده کنید - از ViewToggle برای ناوبری بین صفحات مختلف استفاده نکنید — ازTabsاستفاده کنید
کامپوننتهای مرتبط
- ToggleGroup — برای گروه toggle عمومیتر
- Tabs — برای ناوبری بین view های مختلف با URL