طرح خود را بدون ایجاد کلاس های جدید به روز کنید. یاران فاصله برای اصلاح بالشتک و حاشیه یک عنصر مفید هستند.
از زمین بازی استفاده کنید تا احساسی را برای کلاسهای مختلف یاور انجام دهید. برای توضیح نحوه کار آنها ، به بخش نحوه کار در زیر مراجعه کنید.
# چگونه کار می کند
کلاس های یاور حاشیه یا بالشتک را به یک عنصر اعم از 0 تا 16 اعمال می کنند. هر افزایش اندازه برای تراز کردن با فاصله های طراحی مواد مشترک طراحی شده است. این کلاس ها را می توان با استفاده از قالب زیر -.
این ویژگی از نوع فاصله استفاده می کند:
- م - حاشیه را اعمال می کند
- P - استفاده از بالشتک
جهت مشخصی را که خاصیت در مورد آن اعمال می کند ، تعیین می کند:
- T-فاصله را برای حاشیه و بالشتک بالا اعمال می کند
- ب-فاصله را برای حاشیه حاشیه و پایین بالشتک استفاده می کند
- L-فاصله را برای حاشیه سمت چپ و سمت چپ استفاده می کند
- R-فاصله را برای حاشیه راست و راست و راست درست می کند
- S-فاصله را برای حاشیه چپ / چپ / چپ چپ (در حالت LTR) و حاشیه راست / حق بالا (در حالت RTL) اعمال می کند
- E-از فاصله برای حاشیه راست / راست راست (در حالت LTR) و حاشیه چپ / بالشتک-چپ (در حالت RTL) استفاده می کند.
- X-فاصله را برای هر دو *-Left و *-right اعمال می کند
- y-فاصله را برای هر دو *-top و *-bottom اعمال می کند
- الف - فاصله را برای خاصیت از همه جهات اعمال می کند
اندازه افزایش ویژگی در فواصل 4px را کنترل می کند:
- 0 - تمام حاشیه یا بالشتک را با تنظیم 0 از بین می برد
- 1 - حاشیه یا بالشتک را به 4px تنظیم می کند
- 2 - حاشیه یا بالشتک را به 8px تنظیم می کند
- 3 - حاشیه یا بالشتک را به 12 قطعه تنظیم می کند
- 4 - حاشیه یا بالشتک را به 16 px تنظیم می کند
- 5 - حاشیه یا بالشتک را به 20 قطعه تنظیم می کند
- 6 - حاشیه یا بالشتک را به 24 px تنظیم می کند
- 7 - حاشیه یا بالشتک را به 28px تنظیم می کند
- 8 - حاشیه یا بالشتک را به 32 px تنظیم می کند
- 9 - حاشیه یا بالشتک را به 36px تنظیم می کند
- 10 - حاشیه یا بالشتک را به 40 px تنظیم می کند
- 11 - حاشیه یا بالشتک را به 44px تنظیم می کند
- 12 - حاشیه یا بالشتک را به 48 px تنظیم می کند
- 13 - حاشیه یا بالشتک را به 52 قطعه تنظیم می کند
- 14 - حاشیه یا بالشتک را به 56 px تنظیم می کند
- 15 - حاشیه یا بالشتک را به 60px تنظیم می کند
- 16 - حاشیه یا بالشتک را به 64 px تنظیم می کند
- N1 - حاشیه را ب ه-4px تنظیم می کند
- N2 - حاشیه را ب ه-8px تنظیم می کند
- N3 - حاشیه را ب ه-12px تنظیم می کند
- N4 - حاشیه را ب ه-16px تنظیم می کند
- N5 - حاشیه را ب ه-20px تنظیم می کند
- N6 - حاشیه را ب ه-24px تنظیم می کند
- N7 - حاشیه را ب ه-28px تنظیم می کند
- N8 - حاشیه را ب ه-32px تنظیم می کند
- N9 - حاشیه را ب ه-36px تنظیم می کند
- N10 - حاشیه را ب ه-40px تنظیم می کند
- N11 - حاشیه را ب ه-44px تنظیم می کند
- N12 - حاشیه را ب ه-48px تنظیم می کند
- N13 - حاشیه را ب ه-52px تنظیم می کند
- N14 - حاشیه را ب ه-56px تنظیم می کند
- N15 - حاشیه را ب ه-60px تنظیم می کند
- N16 - حاشیه را ب ه-64px تنظیم می کند
- خودکار - فاصله را به صورت خودکار تنظیم می کند
# مثال ها
# نقاط شکست
Vuetify با یک سیستم شبکه 12 نقطه ای ساخته شده با استفاده از Flexbox ساخته شده است. از فاصله برای ایجاد چیدمان های خاص در محتوای برنامه استفاده می شود. این شامل 5 نقطه شکست رسانه ای است که برای هدف قرار دادن اندازه های خاص صفحه نمایش یا جهت گیری استفاده می شود: XS ، SM ، MD ، LG و XL. قطعنامه های پیش فرض در زیر در جدول نقاط دیدگاه مشاهده شده تعریف شده است و با شخصی سازی پیکربندی سرویس Breakpoint قابل تغییر است
کلاس های یاور حاشیه یا بالشتک را در یک نقطه شکست معین اعمال می کنند. این کلاس ها را می توان با استفاده از قالب زیر اعمال کرد: -. این امر در مورد XS اعمال نمی شود زیرا استنباط می شود. به عنوان مثال،MA-XS-2 برابر با MA-2 است.
# افقی
با استفاده از کلاسهای مارپیچ یاور می توانید به راحتی محتوا را به صورت افقی متمرکز کنید.
# حاشیه منفی
حاشیه همچنین می تواند در همان فواصل 1 تا 16 منفی اعمال شود.
برای اطلاعات بیشتر آماده هستید؟
یادگیری خود را با محتوای مرتبط انتخاب شده توسط تیم ادامه دهید
یا با استفاده از پیوندهای ناوبری زیر بین صفحات حرکت کنید.< Span> Vuetify با یک سیستم شبکه 12 نقطه ای که با استفاده از Flexbox ساخته شده است. از فاصله برای ایجاد چیدمان های خاص در محتوای برنامه استفاده می شود. این شامل 5 نقطه شکست رسانه ای است که برای هدف قرار دادن اندازه های خاص صفحه نمایش یا جهت گیری استفاده می شود: XS ، SM ، MD ، LG و XL. قطعنامه های پیش فرض در زیر در جدول نقاط دیدگاه مشاهده شده تعریف شده است و با شخصی سازی پیکربندی سرویس Breakpoint قابل تغییر است
استراتژی برای تجارت گزینه های...
ما را در سایت استراتژی برای تجارت گزینه های دنبال می کنید
برچسب :
نویسنده : فریبا کامران
بازدید : 35
تاريخ : پنجشنبه
26 مرداد
1402 ساعت: 14:33