آموزش لیست ها در برنامه نویسی آیونیک
آموزش لیست ها در برنامه نویسی آیونیک
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش لیست ها در برنامه نویسی آیونیک خواهیم پرداخت.
لیست ها یکی از محبوب ترین عناصر هر برنامه وب یا موبایل هستند. آنها معمولاً برای نمایش اطلاعات مختلف استفاده می شوند. می توان آنها را با سایر عناصر HTML ترکیب کرد تا منوها، تب های مختلف ایجاد کند یا یکنواختی فایل های متنی خالص را از بین ببرد. فریم ورک آیونیک انواع مختلف لیست را برای سهولت استفاده از آنها ارائه می دهد.
ایجاد لیست در آیونیک
هر لیست با دو عنصر ایجاد می شود. هنگامی که می خواهید یک لیست اساسی ایجاد کنید، باید تگ <ul> شما کلاس اختصاص داده شود و تگ <li> شما از کلاس مورد استفاده می کند. نکته جالب دیگر این که شما نیازی به استفاده از تگ<ul> ، <ol> و <li> برای لیست های خود ندارید. شما می توانید از عناصر دیگری استفاده کنید ، اما مهم این است که به طور مناسب کلاس ها و لیست ها را اضافه کنید.
|
1 2 3 4 5 |
<div class = "list"> <div class = "item">Item 1</div> <div class = "item">Item 2</div> <div class = "item">Item 3</div> </div> |
کد فوق صفحه زیر را تولید می کند –
فهرست ورودی
هنگامی که برای پر کردن ظرف خود به یک لیست احتیاج دارید، می توانید بعد از کلاس list کلاس list-insets را اضافه کنید. با این کار مقداری حاشیه به آن اضافه می شود و اندازه لیست را به ظرف شما تنظیم می کند.
|
1 2 3 4 5 |
<div class = "list list-inset"> <div class = "item"> مورد 1 </div> <div class = "item"> مورد 2 </div> <div class = "item"> مورد 3 </div> </div> |
کد فوق صفحه زیر را تولید می کند –
تقسیم کننده های آیتم
تقسیم کننده ها برای سازماندهی برخی عناصر در گروه های منطقی استفاده می شوند. Ionic برای این کلاس، کلاس item-divider را به ما می دهد. باز هم ، مانند تمام عناصر آیونیک دیگر، ما فقط باید کلاس item-divider را بعد از کلاس item اضافه کنیم. تقسیم کننده های مورد به عنوان یک عنوان عنوان مفید هستند ، زیرا به طور پیش فرض حالت دهی قوی تری نسبت به سایر موارد لیست دارند.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class = "list"> <div class = "item item-divider">Item Divider 1</div> <div class = "item">Item 1</div> <div class = "item">Item 2</div> <div class = "item">Item 3</div> <div class = "item item-divider">Item Divider 2</div> <div class = "item">Item 4</div> <div class = "item">Item 5</div> <div class = "item">Item 6</div> </div> |
کد فوق صفحه زیر را تولید می کند –
افزودن آیکون ها
ما قبلاً به شما نشان دادیم که چگونه آیکون ها را به دکمه های خود اضافه کنید. هنگام افزودن آیکون ها به موارد لیست ، باید انتخاب کنید که می خواهید آنها را در کدام سمت قرار دهید. کلاس های item-icon-left و item-icon-right برای این کار وجود دارد. اگر می خواهید نآیکون های خود را در هر دو طرف داشته باشید ، می توانید این دو کلاس را نیز ترکیب کنید. سرانجام ، کلاس item-note وجود دارد تا یادداشت متنی را به مورد خود اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class = "list"> <div class = "item item-icon-left"> <i class = "icon ion-home"></i> Left side Icon </div> <div class = "item item-icon-right"> <i class = "icon ion-star"></i> Right side Icon </div> <div class = "item item-icon-left item-icon-right"> <i class = "icon ion-home"></i> <i class = "icon ion-star"></i> Both sides Icons </div> <div class = "item item-icon-left"> <i class = "icon ion-home"></i> <span class = "text-note">Text note</span> </div> </div> |
کد فوق صفحه زیر را تولید می کند –
افزودن آواتارها و تصاویر کوچک
آواتارها و تصاویر کوچک مشابه هستند. تفاوت اصلی این است که آواتارها کوچکتر از تصاویر کوچک هستند. این تصاویر کوچک بیشتر قد کامل لیست را پوشش می دهند ، در حالی که آواتارها تصاویر دایره ای متوسط هستند. کلاسهایی که مورد استفاده قرار می گیرند item-avatar و item-thumbnail. هستند. همچنین می توانید آواتارها و عکسهای کوچک خود را در کدام سمت قرار دهید همانطور که در مثال کد بند انگشتی پایین نشان داده شده است.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class = "list"> <div class = "item item-avatar"> <img src = "my-image.png"> <h3>Avatar</h3> </div> <div class = "item item-thumbnail-left"> <img src = "my-image.png"> <h3>Thumbnail</h3> </div> </div> |
کد فوق صفحه زیر را تولید می کند –
لیست جلسات قبل آموزش برنامه نویسی آیونیک
.svg)
دیدگاه شما