8.6.1. Button group ¶
Foundation can create a series of buttons on the same line.
Can be used
<ul>
Element and add
.button-group
Class to create a button group:Example ¶
<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>
8.6.2. Vertical button group ¶
Vertical button group use
.stack
Class to create. Note that the button spans the entire width of the parent element:Example ¶
<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 is used for small screens, where buttons are arranged horizontally to vertically:Example ¶
<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>
8.6.3. Fillet button group ¶
Used in button groups
.radius
And
.round
Class to add a fillet effect to the button:Example ¶
<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>
8.6.4. Uniformly extended button set ¶
.even-num
Class is used to evenly distribute the width of the button in the button group and span the 100% width of the parent element.
num Is the number of buttons in the button group, from 1 to 8:Example ¶
<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>
8.6.5. Drop-down menu button ¶
The drop-down menu button allows the user to select a set value:Example ¶
<!-- 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>
8.6.6. Case analysis ¶
.dropdown
Class to create a drop-down menu button.
Use with
data-dropdown="id"
Property to open the drop-down menu.
id The value needs to match the contents of the drop-down menu (id01).
In
<ul>
Add in
.f-dropdown
Class and
data-dropdown-content
Property to create the contents of the drop-down menu.
Finally, initialize the Foundation JS.
8.6.7. Split button ¶
We can also create a drop-down menu of split buttons. Just add it to the button
.split
Class and use the span element to generate a button for the direction arrow:Example ¶
<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>