آموزش فریم‌ورک Foundation-بخش۶-دکمه و لیست بازشو
آموزش فریم‌ورک Foundation-بخش6-دکمه و لیست بازشو » در این مقاله آموزشی، المان های دکمه و گروه دکمه‌ها (button groups)، نوارهای دکمه (Button Bars)، لیست بازشو و پلاگین clearing را بررسی می کنیم.

آموزش فریم‌ورک Foundation-بخش۶-دکمه و لیست بازشو

بخش ششم: دکمه (Button) و لیست بازشو (DropDown List)

دکمه (Button) و لیست بازشو (DropDown List)

 

دکمه و لیست بازشو در فریم‌ورک Foundation

 

در مقاله قبل، نحوه سفارشی سازی منوی بالا (Top Bar Customization) در فریم ورک foundation را توضیح دادیم.

 در این بخش از آموزش فریم ورک فاندیشن (Foundation Framework) المان های دکمه (Button)، لیست بازشو (Dropdown) و پلاگین Clearing را بررسی می کنیم.

 

دکمه ها (Buttons):

فریم ورک فاندیشن، مجموعه ای از دکمه ها را در اختیار طراحان وب قرار می دهد که پیاده سازی آنها بسیار ساده می باشد. فقط کافیست کلاس button را به المان موردنظر خود مانند لینک، div، دکمه و یا input اعمال کنیم تا دکمه هایی مانند تصویر زیر را داشته باشیم:

 

دکمه ها (Buttons) در فاندیشن

 

با افزودن کلاس button دکمه ای با استایل های پیش فرض را خواهیم داشت. اما همانطور که در تصویر فوق مشاهده می کنید، می توانید استایل های متفاوتی به دکمه ها اعمال کنید. کدهای زیر را در نظر بگیرید:

<!– Size Classes –>

<a class="button" href="#">Default Button</a>

<a class="tiny button" href="#">Tiny Button</a>

<a class="small button" href="#">Small Button</a>

<a class="large button" href="#">Large Button</a>

<!– Color Classes –>

<a class="button secondary" href="#">Secondary Button</a>

<a class="button success" href="#">Success Button</a>

<a class="button alert" href="#">Alert Button</a>

<!– Radius Classes –>

<a class="button radius" href="#">Radius Button</a>

<a class="button round" href="#">Round Button</a>

<!– Disabled Class –>

<a class="button disabled" href="#">Disabled Button</a>

 

همانطور که در کد بالا می بینید، می توانید سایز، رنگ و خواصی مانند خمیدگی اطراف دکمه (border-radius) و فعال و غیرفعال بودن دکمه (Disabled) را تعیین کنید. اما همچنان می توانید استایل های دلخواه خود را به دکمه ها اعمال کنید. می توانید برای داشتن دکمه ای با تمام خواص فوق، بصورت زیر عمل کنید:

کلاس button برای داشتن دکمه، کلاس small برای تعیین سایز دکمه، کلاس success برای رنگ دکمه، کلاس round برای گرد کردن دور دکمه و کلاس disabled برای غیرفعال کردن دکمه.

 

گروه های دکمه (Button Groups):

پیاده سازی یک گروه از دکمه ها نیز به سادگی تعریف یک دکمه می باشد. ساختار ساده ای مطابق کد زیر دارند:

<ul class="button-group">

    <li><a class="small button" href="#">Button 1</a></li>

    <li><a class="small button" href="#">Button 2</a></li>

    <li><a class="small button" href="#">Button 3</a></li>

</ul>

 

تصویر زیر نیز نمایانگر گروه هایی از دکمه ها می باشد:

 

گروه های دکمه (Button Groups)

 

همچنین می توانید مانند قبل، کلاس های round و disabled و … را به هریک از دکمه ها اضافه کرد.

 

نوارهای دکمه (Button Bars):

برای تعریف چندین گروه دکمه در کنار هم، از کلاس button-bar استفاده می کنیم. این کلاس را به یک div اعمال می کنیم و درون آن باید چند گروه دکمه تعریف کنیم. کد زیر را در نظر بگیرید:

<div class="button-bar">

<ul class="button-group">

    <li><a class="small button" href="#">Button 1</a></li>

    <li><a class="small button" href="#">Button 2</a></li>

    <li><a class="small button" href="#">Button 3</a></li>

</ul>

<ul class="button-group">

    <li><a class="small button" href="#">Button 1</a></li>

    <li><a class="small button" href="#">Button 2</a></li>

    <li><a class="small button" href="#">Button 3</a></li>

</ul>

</div>

 

تصویر زیر را خواهیم داشت:

 

نوارهای دکمه (Button Bars)

 

نوار دکمه ها که از چندین گروه دکمه تشکیل شده است، در اسکرین های سایز کوچک مانند موبایل، بطور اتوماتیک جمع می شوند و حالت ریسپانسیو خود را حفظ می کنند.

 

دکمه های بازشو (Dropdown Buttons):

برای داشتن یک دکمه بصورت بازشو، باید علاوه بر کلاس button، کلاس dropdown را نیز برای دکمه تعریف کنید. علاوه بر این، باید یک اتریبیوت بنام data-dropdown را نیز برای آن تعریف کنید. مقدار این اتریبیوت برابر آیدی ul می باشد. کد زیر را در نظر بگیرید:

<a class="button dropdown" href="#" data-dropdown="drop1">Dropdown Button</a>

</pre>

<ul class="f-dropdown" id="drop1">

    <li><a href="#">This is a link</a></li>

    <li><a href="#">This is another</a></li>

    <li><a href="#">Yet another</a></li>

</ul>

 

مقدار اتریبیوت data-dropdown باید با آیدی ul برابر باشد. در مثال فوق برابر drop1 می باشد. نکته ای که برای ایجاد یک دکمه بازشو باقی می ماند، افزودن کلاس f-dropdown به ul می باشد. تصویر زیر را ملاحظه کنید:

 

دکمه های بازشو (Dropdown Buttons)

 

پلاگین Clearing:

این پلاگین به شما این امکان را می دهد که یک لایت باکس زیبا داشته باشید. پلاگین Clearing یک پلاگین ایجادلایت باکس است که سرعت لود بالایی دارد. ابتدا کد مربوط به این پلاگین را مشاهده کنید:

</pre>

<ul class="clearing-thumbs" data-clearing="">

    <li><a href="path/to/your/img"><img alt="" src="path/to/your/img-th" /></a></li>

    <li><a href="path/to/your/img"><img alt="" src="path/to/your/img-th" /></a></li>

    <li><a href="path/to/your/img"><img alt="" src="path/to/your/img-th" /></a></li>

</ul>

<pre>

 

مجددا در آن از لیست نامرتب (unordered یا ul) استفاده شده است. کلاس clearing-thumbs را به ul اضافه کنید بهمراه اتریبیوت data-clearing که مقدار خالی دارد. درون این ul مسلما باید چندین li تعریف شود که در هر کدام لینک و تصویر موردنظر قرار می گیرد. تصویر زیر را مشاهده کنید:

 

پلاگین Clearing در فریمورک فاندیشن

 

لازم به ذکر است که پلاگین clearing از گرید بلاک (block grid) استفاده می کند.

در بخش هفتم از آموزش فاندیشن، نحوه سفارشی سازی فرم های وب سایت را آموزش می دهیم.

 

منبع: https://webdesign.tutsplus.com/articles/foundation-for-beginners-buttons-and-dropdowns–webdesign-12465


برچسب‌ها:

buttondropdown listپلاگین clearingدکمه در فریم ورک فاندیشنگروه دکمه هالیست بازشو

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شانزده + 6 =