WidgetNas

اندازه ها

سعی شده است یکسری اندازه به صورت پیش فرض در این فریم ورک قرار داده شود و تمامی موضوعات از این اندازه ها ارث بری کنند و یک همانند سازی اندازه ای بین همه اجزا برقرار باشد.

اندازه های وصفی

همانند انتخاب لباس که هر اندازه یک نام دارد در این جا نیز از این قانون استفاده شده ا ست. در زیر لیست اسامی و مقدار آنها نمایش داده میشود.

شما میتوانید یکی از اندازه ها را به عبارت شروعی s-? اضافه کنید. مانند s-xl

xs0.4
s0.6
sx0.7
m0.8
mx0.9
n1
nx1.1
l1.2
lx1.3
xl1.4
xlx1.5
xxl1.6
xxlx1.7
xxxl2

این اندازه ها برای هر موضوعی یکسری موارد خاص را تغییر میدهد. برای مثال برای قلم ها اندازه قلم ولی برای دکمه ها اندازه قلم، اندازه دکمه و حتی شعاع خمیدگی دکمه را تعیین خواهد کرد.

اندازه های دقیق

این اندازه ها به صورت ترکیبی با یک کلاس دیگر آورده میشود، و به مقداری که گفته شده است، آن خصوصیت را تغییر خواهد داد.

aauto
nnormal
00
5x5px
10x10px
15x15px
20x20px
25r0.25rem
50r0.5rem
75r0.75rem
80r0.8rem
90r0.9rem
100r1rem
110r1.1rem
120r1.2rem
130r1.3rem
140r1.4rem
150r1.5rem
200r2rem
250r2.5rem
25e0.25em
50e0.5em
75e0.75em
80e0.8em
90e0.9em
100e1em
110e1.1em
120e1.2em
130e1.3em
140e1.4em
150e1.5em
200e2em
250e2.5em

مقادیر اضافی بدین صورت است:
10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 275, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000

مقدار a و n برای خصوصیاتی است که از مقدارهای auto و normal استفاده میکنند، مانند marigin: auto. بقیه مقادیر، دقیقا مقدار گفته شده جلوی آن خصوصیت آورده خواهد شد.

برای مثال کلاس lh-n مقدار line-height: normal و کلاس lh-150r مقدار line-height: 1.5rem را تنظیم خواهد کرد.

فاصله ها بیرونی

برای تعیین فاصله بیرونی margin دلخواه از کلاس زیر استفاده کنید.

کلاس m-? به همراه گزینه های اندازه دقیق قابل مقداردهی میباشند

mmarginm-0margin:0فاصله دور تا دور
m-100emargin:1em
m-50rmargin:0.5rem
m-bmargin-blockm-b-0margin-block:0فاصله بالا و پایین
m-b-100emargin-block:1em
m-b-50rmargin-block:0.5rem
m-bsmargin-block-startm-bs-0margin-block-start:0فاصله بالا
m-bs-100emargin-block-start:1em
m-bs-50rmargin-block-start:0.5rem
m-bemargin-block-endm-be-0margin-block-end:0فاصله پایین
m-be-100emargin-block-end:1em
m-be-50rmargin-block-end:0.5rem
m-imargin-inlinem-i-0margin-inline:0فاصله شروع و انتها، چپ و راست
m-i-100emargin-inline:1em
m-i-50rmargin-inline:0.5rem
m-ismargin-inline-startm-bs-0margin-inline-start:0بر اساس direction، چپ به راست، مقدار چپ، و راست به چپ، مقدار راست
m-is-100emargin-inline-start:1em
m-is-50rmargin-inline-start:0.5rem
m-iemargin-inline-endm-be-0margin-inline-end:0بر اساس direction، چپ به راست، مقدار راست، و راست به چپ، مقدار چپ
m-ie-100emargin-inline-end:1em
m-ie-50rmargin-inline-end:0.5rem

فاصله ها درونی

برای تعیین فاصله درونی padding دلخواه از کلاس زیر استفاده کنید.

کلاس p-? به همراه گزینه های اندازه دقیق قابل مقداردهی میباشند

ppaddingm-0padding:0فاصله دور تا دور
p-100epadding:1em
p-50rpadding:0.5rem
p-bpadding-blockm-b-0padding-block:0فاصله بالا و پایین
p-b-100epadding-block:1em
p-b-50rpadding-block:0.5rem
p-bspadding-block-startm-bs-0padding-block-start:0فاصله بالا
p-bs-100epadding-block-start:1em
p-bs-50rpadding-block-start:0.5rem
p-bepadding-block-endm-be-0padding-block-end:0فاصله پایین
p-be-100epadding-block-end:1em
p-be-50rpadding-block-end:0.5rem
p-ipadding-inlinem-i-0padding-inline:0فاصله شروع و انتها، چپ و راست
p-i-100epadding-inline:1em
p-i-50rpadding-inline:0.5rem
p-ispadding-inline-startm-bs-0padding-inline-start:0بر اساس direction، چپ به راست، مقدار چپ، و راست به چپ، مقدار راست
p-is-100epadding-inline-start:1em
p-is-50rpadding-inline-start:0.5rem
p-iepadding-inline-endm-be-0padding-inline-end:0بر اساس direction، چپ به راست، مقدار راست، و راست به چپ، مقدار چپ
p-ie-100epadding-inline-end:1em
p-ie-50rpadding-inline-end:0.5rem

فاصله بین ستونی

برای تعیین بین ستونی در grid و تعیین g دلخواه از کلاس زیر استفاده کنید.

کلاس g-b-? و g-i-? به همراه گزینه های اندازه دقیق قابل مقداردهی میباشند

برای اطلاع بیشتر به بخش سیستم توری مراجعه کنید.