6.8 KiB
title, summary
| title | summary |
|---|---|
| Segmented Control | A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options. |
To create a segmented control, use the nav element with the nav-segmented class. Inside the nav element, add button or a elements with the nav-link class. The nav-link class is used to style the buttons as links.
{% capture html -%}
First Second Disabled {%- endcapture %} {% include "docs/example.html" html=html centered %}Full width
To make the segmented control full width, add the w-100 class to the nav element. It will take up the full width of its parent container.
<nav class="nav nav-segmented w-100" role="tablist">...</nav>
The results can be seen in the example below.
{% capture html -%}
Daily Weekly Monthly Quarterly Yearly {%- endcapture %} {% include "docs/example.html" html=html %}With emojis
You can also use emojis in the segmented control. To do this, add the emoji inside the button element.
{% capture html -%}
👦 👦🏿 👦🏾 👦🏽 👦🏼 👦🏻 {%- endcapture %} {% include "docs/example.html" html=html centered %}With icons
You can also use icons in the segmented control. To do this, add the icon inside the button element.
{% capture html -%}
{% include "ui/icon.html" icon="list" %} List {% include "ui/icon.html" icon="layout" %} Kanban {% include "ui/icon.html" icon="calendar" %} Calendar {% include "ui/icon.html" icon="files" %} Files {%- endcapture %} {% include "docs/example.html" html=html centered %}Vertical direction
To create a vertical segmented control, add the nav-segmented-vertical class to the nav element.
<nav class="nav nav-segmented-vertical" role="tablist">...</nav>
The results can be seen in the example below.
{% capture html -%}
{% include "ui/icon.html" icon="list" %} List {% include "ui/icon.html" icon="layout" %} Kanban {% include "ui/icon.html" icon="calendar" %} Calendar {% include "ui/icon.html" icon="files" %} Files {%- endcapture %} {% include "docs/example.html" html=html centered %}Sizes
You can also change the size of the segmented control. To do this, add the nav-sm or nv-lg class to the nav element. The nav-sm class will make the segmented control smaller, while the nav-lg class will make it larger.
<nav class="nav nav-segmented nav-sm" role="tablist">...</nav>
The results can be seen in the examples below.
{% capture html -%}
List Kanban Calendar Files List Kanban Calendar Files {%- endcapture %} {% include "docs/example.html" html=html centered vertical %}