WidgetNas

لیست ها List

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

لیستها یکی از قدرتمندترین گزینه ها برای نمایش سری موضوعات پشت سر هم هستند. در زیر به انواع آن و نحوه استفاده از آن اشاره میگردد.

لیست ساده

در این لیست، با استفاده از لیست پیش فرض ul و li نمایش ساده ای از موضوعات انجام میپذیرد.

LTR

ul

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

div

Item 1
Item 2
Item 3
Item 4
Item 5

RTL

ul

  • گزینه 1
  • گزینه 2
  • گزینه 3
  • گزینه 4
  • گزینه 5

div

گزینه 1
گزینه 2
گزینه 3
گزینه 4
گزینه 5

انتخاب شده

اگر میخواهید یک ردیف انتخاب شود، از کلاس list-active استفاده کنید.

LTR

ul

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

div

Item 1
Item 2
Item 3
Item 4
Item 5

RTL

ul

  • گزینه 1
  • گزینه 2
  • گزینه 3
  • گزینه 4
  • گزینه 5

div

گزینه 1
گزینه 2
گزینه 3
گزینه 4
گزینه 5

غیر فعال

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

LTR

ul

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

div

Item 1
Item 2
Item 3
Item 4
Item 5

RTL

ul

  • گزینه 1
  • گزینه 2
  • گزینه 3
  • گزینه 4
  • گزینه 5

div

گزینه 1
گزینه 2
گزینه 3
گزینه 4
گزینه 5

نمایش hover

اگر میخواهید با حرکت نمایشگر مویس بر روی هر ردیف، آن برجسته شود، از کلاس list-hover استفاده کنید.

LTR

ul

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

div

Item 1
Item 2
Item 3
Item 4
Item 5

RTL

ul

  • گزینه 1
  • گزینه 2
  • گزینه 3
  • گزینه 4
  • گزینه 5

div

گزینه 1
گزینه 2
گزینه 3
گزینه 4
گزینه 5

نمایش hover و غیر فعال کردن آن برای گزینه ها

اگر میخواهید با حرکت نمایشگر مویس بر روی هر ردیف، آن برجسته شود، از کلاس list-hover استفاده کنید.

LTR

ul

  • Item 1
  • Item 2
  • Item 3
  • Item 4 no over
  • Item 5

div

Item 1
Item 2
Item 3
Item 4 no over
Item 5

RTL

ul

  • گزینه 1
  • گزینه 2
  • گزینه 3
  • گزینه 4 غیر اور
  • گزینه 5

div

گزینه 1
گزینه 2
گزینه 3
گزینه 4 غیر اور
گزینه 5

گزینه های hyperlink و دکمه

شما میتوانید در دل لیست از هایپرلینک و یا دکمه استفاده کنید.

LTR

ul & a

ul & button

div & a

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6

div & button

RTL

ul & a

ul & button

div & a

گزینه 1 گزینه 2 گزینه 3 گزینه 4 گزینه 5 گزینه 6

div & button

لیست بدون لبه

اگر میخواهید فقط گزینه ها با یک خط از هم جدا شوند از کلاس list-noedge استفاده کنید.

LTR

ul

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

ul & a hover

div & a hover

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6

RTL

ul

  • گزینه 1
  • گزینه 2
  • گزینه 3
  • گزینه 4
  • گزینه 5
  • گزینه 6

ul & a hover

div & a hover

گزینه 1 گزینه 2 گزینه 3 گزینه 4 گزینه 5 گزینه 6

شماره گذاری

اگر تمایل دارید در لیست هر گزینه شماره داشته باشد، بایستی از کلاس list-numbering استفاده کنید.

LTR

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

dash

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

div

Item 1
Item 2 type a
Item 3
Item 5
Item 6

RTL

  • گزینه 1
  • گزینه 2
  • گزینه 3
  • گزینه 4
  • گزینه 5
  • گزینه 6

خط تیره

  • گزینه 1
  • گزینه 2
  • گزینه 3
  • گزینه 4
  • گزینه 5
  • گزینه 6

div

گزینه 1
گزینه 2 از نوع هایپرلینک
گزینه 3
گزینه 5
گزینه 6

لیست های افقی

ممکن است تمایل داشته باشید، لیست به صورت افقی نمایش داده شود. بدین منظور کلاس list-horizontal را اضافه کنید.

به مثال زیر توجه کنید.

LTR

ul

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

ul & a

ul & button

div & a

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6

div & button

ul flex-fill

  • Item 1
  • Item 2
  • Item 3
  • Item 5
  • Item 6

RTL

ul

  • گزینه 1
  • گزینه 2
  • گزینه 3
  • گزینه 4
  • گزینه 5
  • گزینه 6

ul & a

ul & button

div & a

گزینه 1 گزینه 2 گزینه 3 گزینه 4 گزینه 5 گزینه 6

div & button

ul flex-fill

  • گزینه 1
  • گزینه 2
  • گزینه 3
  • گزینه 5
  • گزینه 6

اگر میخواهید در لیست افقی خود، تمامی خانه ها یک اندازه باشند، از کلاس flex-fill برای هر خانه استفاده کنید.

لیست های نشان دار

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

LTR

simple

  • Short description. 12
  • Short description. 12
  • Short description. 12

extend

  • Subject
    Short description.
    12
  • Subject
    Short description.
    12
  • Subject
    Short description.
    12

RTL

ساده

  • متنی برای شرح 12
  • متنی برای شرح 12
  • متنی برای شرح 12

اضافه

  • عنوان
    متنی برای شرح
    12
  • عنوان
    متنی برای شرح
    12
  • عنوان
    متنی برای شرح
    12

لیست با محتوی خاص

وقتی بخواهید محتوی خاصی را به صورت لیست نمایش دهید، به ساختار زیر نیاز خواهید داشت.

RTL

عنوان در لیست
3 روز پیش

فضایی برای نوشتن متن به صورت پاراگراف

جایی برای نوشتن متن ریزتر
عنوان در لیست
3 روز پیش

فضایی برای نوشتن متن به صورت پاراگراف

جایی برای نوشتن متن ریزتر
عنوان در لیست
3 روز پیش

فضایی برای نوشتن متن به صورت پاراگراف

جایی برای نوشتن متن ریزتر

لیست چک باکس و رادیو

اگر تمایل دارید، در لیست خود چک باکس یا رادیو داشته باشید، به مثالهای زیر توجه کنید.

LTR

  • First checkbox
  • Second checkbox
  • Third checkbox

RTL

  • چک اول
  • چک دوم
  • چک سوم

اگر میخواهید کل ردیف با کلیک کردن عمل تیک انجام شوند، به مثال زیر توجه کنید.

LTR

RTL

همانند چک باکس شما میتوانید از رادیو استفاده کنید

LTR

RTL

اگر تنظیماتی دارید که میخواهید به صورت فعال و غیر فعال تنظیم شوند به مثال زیر توجه کنید.

LTR

RTL

رنگها و اندازه ها

شما قادر هستید مانند دیگر موضوعات از کلاسهای رنگی و یا کلاسهای اندازه استفاده کنید.

Theme

ul

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6

Size

Size Small (s)

  • Item 1
  • Item 2
  • Item 3

Size XLarge (xl)

  • Item 1
  • Item 2
  • Item 3

اندازه برای ردیف

  • Item 1
  • Item 2
  • Item 3