تب ها
این عناصر را می توان به راحتی در صفحات و بلوک های مختلف مورد استفاده قرار دهید و سفارشی سازی کنید
شما میتوانید تمام المان های بکار رفته را در قالب استک از
صفحه لیست المان ها ←
مشاهده کنید
تب متن
سبک برگه پیش فرض برای پشته. تنظیم کردن [data-content-align] اگر می خواهید برگه ها محور باشند ، اما محتوای برگه باقی مانده است.
برای تنظیم برگه پیش فرض فعال ، کلاس را قرار دهید .active در زبانه های مربوطه والدین <li> عنصر.
<div class="tabs-container" data-content-align="left"> <ul class="tabs"> <li class="active"> <div class="tab__title"> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> </ul> </div><!--end of tabs container-->
-
خوانایی کد بالا
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته،
مستندات ارائه شده ، شامل نحوه استفاده از کدها ، قطعه ها ، توضیحات سفارشی کلاس و.. میباشد که خودتان میتواندی یک قالب اختصاصی قدرتمند برای خودتون طراحی کنید
-
طراحی بصری
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت
-
تجربه استک
سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
ایکون و متن در تب
سبک برگه نماد برای پشته حاصل با قرار دادن<i> عنصر به عنوان اولین فرزند در داخل .tab__title.
برای تنظیم برگه پیش فرض فعال ، کلاس را قرار دهید .active در زبانه های مربوطه والدین<i> عنصر.
<div class="tabs-container" data-content-align="left"> <ul class="tabs"> <li class="active"> <div class="tab__title text-center"> <i class="icon icon--sm block icon-CLASS"></i> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title text-center"> <i class="icon icon--sm block icon-CLASS"></i> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title text-center"> <i class="icon icon--sm block icon-CLASS"></i> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> </ul> </div><!--end of tabs container-->
-
خوانایی کد بالا
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته،
مستندات ارائه شده ، شامل نحوه استفاده از کدها ، قطعه ها ، توضیحات سفارشی کلاس و.. میباشد که خودتان میتواندی یک قالب اختصاصی قدرتمند برای خودتون طراحی کنید
-
طراحی بصری
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت
-
تجربه استک
سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
ایکون تب
سبک برگه نماد برای پشته حاصل با قرار دادن <i> عنصر به عنوان اولین و تنها کودک در داخل .tab__title .
برای تنظیم برگه پیش فرض فعال ، کلاس را قرار دهید .active در زبانه های مربوطه والدین <li> عنصر.
<div class="tabs-container" data-content-align="left"> <ul class="tabs"> <li class="active"> <div class="tab__title text-center"> <i class="icon icon--sm block icon-CLASS"></i> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title text-center"> <i class="icon icon--sm block icon-CLASS"></i> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title text-center"> <i class="icon icon--sm block icon-CLASS"></i> </div> <div class="tab__content"> Content </div> </li> </ul> </div><!--end of tabs container-->
-
خوانایی کد بالا
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته،
مستندات ارائه شده ، شامل نحوه استفاده از کدها ، قطعه ها ، توضیحات سفارشی کلاس و.. میباشد که خودتان میتواندی یک قالب اختصاصی قدرتمند برای خودتون طراحی کنید
-
طراحی بصری
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت
-
تجربه ی مشتری
سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
تب های عمودی
کلاس را اضافه کنید .tabs--vertical به عنصر .tabs-container برای ایجاد یک نمای برگه جانبی.
برای تنظیم برگه پیش فرض فعال ، کلاس را قرار دهید .active در زبانه های مربوطه والدین <li> عنصر.
<div class="tabs-container tabs--vertical"> <ul class="tabs"> <li class="active"> <div class="tab__title"> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> </ul> </div><!--end of tabs container-->
-
عنوان 1
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته،
مستندات ارائه شده ، شامل نحوه استفاده از کدها ، قطعه ها ، توضیحات سفارشی کلاس و.. میباشد که خودتان میتواندی یک قالب اختصاصی قدرتمند برای خودتون طراحی کنید
-
عنوان 2
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت
-
عنوان 3
سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
متن و ایکون تب عمودی
سبک برگه نماد برای پشته حاصل با قرار دادن <i> عنصر به عنوان اولین فرزند در داخل .tab__title .
کلاس را اضافه کنید .tabs--vertical به عنصر .tabs-container برای ایجاد یک نمای برگه جانبی.
<div class="tabs-container tabs--vertical"> <ul class="tabs"> <li class="active"> <div class="tab__title"> <i class="icon icon--sm block icon-CLASS"></i> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <i class="icon icon--sm block icon-CLASS"></i> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <i class="icon icon--sm block icon-CLASS"></i> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> </ul> </div><!--end of tabs container-->
-
عنوان 1
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته،
مستندات ارائه شده ، شامل نحوه استفاده از کدها ، قطعه ها ، توضیحات سفارشی کلاس و.. میباشد که خودتان میتواندی یک قالب اختصاصی قدرتمند برای خودتون طراحی کنید
-
عنوان 2
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت
-
عنوان 3
سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
ایکون تب عمودی
سبک برگه نماد برای پشته حاصل با قرار دادن <i> عنصر به عنوان اولین و تنها کودک در داخل .tab__title .
کلاس را اضافه کنید .tabs--vertical به عنصر .tabs-container برای ایجاد یک نمای برگه جانبی.
<div class="tabs-container tabs--vertical tabs--icons"> <ul class="tabs"> <li class="active"> <div class="tab__title"> <i class="icon icon--sm block icon-CLASS"></i> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <i class="icon icon--sm block icon-CLASS"></i> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <i class="icon icon--sm block icon-CLASS"></i> </div> <div class="tab__content"> Content </div> </li> </ul> </div><!--end of tabs container-->