آموزش فوتر در برنامه نویسی آیونیک
آموزش فوتر در برنامه نویسی آیونیک
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش فوتر در برنامه نویسی آیونیک خواهیم پرداخت.
فوتر در آیونیک در پایین صفحه برنامه قرار دارد. کار با فوتر تقریباً مشابه کار با هدر است.
افزودن فوتر
کلاس اصلی برای فوترهای آیونیک bar است (همانند هدر). وقتی می خواهید فوتر را به صفحه خود اضافه کنید، باید کلاس bar-footer را بعد از کلاس نوار اصلی به عنصر خود اضافه کنید. از آنجا که می خواهیم از فوترخود در هر صفحه از برنامه استفاده کنیم ، آن را به بدنه فایل index.html اضافه خواهیم کرد. ما همچنین عنوان را برای فوتر خود اضافه خواهیم کرد.
|
1 2 3 |
<div class = "bar bar-footer"> <h1 class = "title">Footer</h1> </div> |
کد فوق صفحه زیر را تولید می کند –
رنگ فوتر
اگر می خواهید فوتر خود را استایل دهی کنید ، فقط باید کلاس رنگی مناسب را به آن اضافه کنید. وقتی عناصر خود را سبک می کنید ، باید کلاس عناصر اصلی خود را به عنوان پیشوند به کلاس رنگ خود اضافه کنید. از آنجا که ما یک نوار فوتر را یک ظاهر طراحی می کنیم ، کلاس پیشوند یک نوار خواهد بود و کلاس رنگی که می خواهیم در این مثال استفاده کنیم (قرمز) است.
|
1 2 3 |
<div class = "bar bar-footer bar-assertive"> <h1 class = "title">Footer</h1> </div> |
کد فوق صفحه زیر را تولید می کند –
شما می توانید از هر 9 کلاس زیر استفاده کنید تا یک رنگ دلخواه را به فوتر برنامه خود بدهید –
| کلاس | توضیحات | |
|---|---|---|
| bar-light | برای رنگ سفید استفاده شود | |
| bar-stable | برای رنگ خاکستری استفاده شود | |
| bar-positive | برای رنگ آبی استفاده شود | |
| bar-calm | برای رنگ آبی روشن استفاده شود | |
| bar-balanced | برای رنگ سبز استفاده شود | |
| bar-energized | برای رنگ زرداستفاده شود | |
| bar-assertive | برای رنگ قرمز استفاده شود | |
| bar-royal | برای رنگ بنفش استفاده شود | |
| bar-dark | برای رنگ سیاه استفاده شود |
عناصر فوتر
فوتر ها می توانند عناصر داخل آن را داشته باشند. در بیشتر مواقع باید دکمه هایی با نمادها را در قسمت فوتر اضافه کنید.
اولین دکمه اضافه شده همیشه در گوشه سمت چپ خواهد بود. آخرین مورد در سمت راست قرار می گیرد. دکمه های موجود در کنار اولین دکمه سمت چپ فوتر شما دسته بندی می شوند. در مثال زیر ، همچنین می توانید متوجه شوید که ما از کلاس icon برای اضافه کردن نمادها در بالای دکمه ها استفاده می کنیم.
|
1 2 3 4 5 6 |
<div class = "bar bar-footer bar-assertive"> <button class = "icon icon ion-navicon"> </button> <button class = "icon icon ion-home"> </button> <button class = "icon icon ion-star"> </button> <button class = "icon icon ion-checkmark-round"> </button> </div> |
کد فوق صفحه زیر را تولید می کند –
اگر می خواهید دکمه خود را به سمت راست ببرید می توانید کلاس pull-right را اضافه کنید.
|
1 2 3 |
<div class = "bar bar-footer bar-assertive"> <button class = "icon icon ion-navicon pull-right"> </button> </div> |
کد فوق صفحه زیر را تولید می کند –
لیست جلسات قبل آموزش برنامه نویسی آیونیک
.svg)
دیدگاه شما