The best Foundation Button Group Foundation Button Group Tutorial In 2024, In this tutorial you can learn
Button Group,Vertical button group,Rounded button group,Uniform extension button group,Drop-down button,Split button,
Foundation Button Group
Foundation Button Group
Button Group
Foundation can create a series of buttons in the same row.
You can use the <ul>
element and add .button-group
class to create a button group:
Examples
<Ul class = "button-group ">
<Li> <button type = " button" class = "button"> Apple </ button> </ li>
<Li> <button type = " button" class = "button"> Samsung </ button> </ li>
<Li> <button type = " button" class = "button"> Sony </ button> </ li>
</ Ul>
Vertical button group
Vertical button group use .stack
class to create. Note that the button spans the entire width of the parent element:
Examples
<Ul class = "button-group stack">
<Li> <button type = " button" class = "button"> Apple </ button> </ li>
<Li> <button type = " button" class = "button"> Samsung </ button> </ li>
<Li> <button type = " button" class = "button"> Sony </ button> </ li>
</ Ul>
.stack-for-small
class for the small size of the screen, there are buttons arranged horizontally becomes vertical alignment:
Examples
<Ul class = "button-group stack-for-small">
<Li> <button type = " button" class = "button"> Apple </ button> </ li>
<Li> <button type = " button" class = "button"> Samsung </ button> </ li>
<Li> <button type = " button" class = "button"> Sony </ button> </ li>
</ Ul>
Rounded button group
Button group use .radius
and .round
class button to add rounded corners:
Examples
<Ul class = "button-group radius">
<Li> <button type = " button" class = "button"> Apple </ button> </ li>
<Li> <button type = " button" class = "button"> Samsung </ button> </ li>
<Li> <button type = " button" class = "button"> Sony </ button> </ li>
</ Ul>
<Ul class = "button-group round">
<Li> <button type = " button" class = "button"> Apple </ button> </ li>
<Li> <button type = " button" class = "button"> Samsung </ button> </ li>
<Li> <button type = " button" class = "button"> Sony </ button> </ li>
</ Ul>
Uniform extension button group
.even-num
class for the width of the button group button and a uniform distribution across the width of the parent element of 100%.
num is the number of buttons in the button group, from 1-8:
Examples
<Ul class = "button-group even-3">
<Li> <button type = " button" class = "button"> Apple </ button> </ li>
<Li> <button type = " button" class = "button"> Samsung </ button> </ li>
<Li> <button type = " button" class = "button"> Sony </ button> </ li>
</ Ul>
<Ul class = "button-group even-5">
<Li> <button type = " button" class = "button"> Apple </ button> </ li>
<Li> <button type = " button" class = "button"> Samsung </ button> </ li>
<Li> <button type = " button" class = "button"> Sony </ button> </ li>
<Li> <button type = " button" class = "button"> HTC </ button> </ li>
<Li> <button type = " button" class = "button"> Huawei </ button> </ li>
</ Ul>
<Ul class = "button-group even-8">
<Li> <button type = " button" class = "button"> A </ button> </ li>
<Li> <button type = " button" class = "button"> B </ button> </ li>
<Li> <button type = " button" class = "button"> C </ button> </ li>
<Li> <button type = " button" class = "button"> D </ button> </ li>
<Li> <button type = " button" class = "button"> E </ button> </ li>
<Li> <button type = " button" class = "button"> F </ button> </ li>
<Li> <button type = " button" class = "button"> G </ button> </ li>
<Li> <button type = " button" class = "button"> H </ button> </ li>
</ Ul>
Drop-down button
Drop-down menu button allows the user to select the set good value:
Examples
<-! Trigger the dropdown ->
<A href = "#" data -dropdown = "id01" class = "button dropdown"> Dropdown Button </ a>
<-! The actual dropdown ->
<Ul id = "id01" data -dropdown-content class = "f-dropdown">
<Li> <a href = " #"> Link 1 </ a> </ li>
<Li> <a href = " #"> Link 2 </ a> </ li>
<Li> <a href = " #"> Link 3 </ a> </ li>
</ Ul>
<-! Initialize Foundation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Examples of analytical
.dropdown
class to create a drop-down menu button.
Use with data-dropdown=" id "
attribute button or link to open the drop-down menu.
id value needs to match the contents (id01) pull-down menu.
In the <ul>
Add in .f-dropdown
classes and data-dropdown-content
attribute to create content drop-down menu.
Last initialization Foundation JS.
Split button
We can also create a split button's drop-down menu. Only you need to add the button .split
class and use the span element to generate a direction arrow button:
Examples
<Button class = "button split" > Split Button
<Span data-dropdown = "id01 "> </ span>
</ Button>
<Ul id = "id01" data -dropdown-content class = "f-dropdown">
<Li> <a href = " #"> Link 1 </ a> </ li>
<Li> <a href = " #"> Link 2 </ a> </ li>
<Li> <a href = " #"> Link 3 </ a> </ li>
</ Ul>
<-! Initialize Foundation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
| Tip: Later in this tutorial we will learn more about the drop-down menu is knowledge. |
---|