Segment
<quiet-segment>
Represents a single selectable option inside a segmented control. Use segments to list the choices a segmented control offers.
This component must only be used within a segmented control. You can see some examples of segments being used in the segmented control documentation.
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-segment> from the CDN, use the following code.
import 'https://cdn.quietui.org/v6.0.0/components/segment/segment.js';
To manually import <quiet-segment> from a self-hosted distribution, use the following
code. Remember to replace /path/to/quiet with the appropriate local path.
import '/path/to/quiet/components/segment/segment.js';Slots Jump to heading
Segment supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | The segment's content, usually a text label, an icon, or both. |
Properties Jump to heading
Segment has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property | Description | Reflects | Type | Default |
|---|---|---|---|---|
value
|
The segment's value. |
|
string
|
''
|
checked
|
The segment's checked state. |
|
boolean
|
false
|
disabled
|
Disables the segment. |
|
boolean
|
false
|
Events Jump to heading
Segment dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events
| Name | Description |
|---|---|
quiet-blur |
Emitted when the segment loses focus. This event does not bubble. |
quiet-focus |
Emitted when the segment receives focus. This event does not bubble. |
Custom States Jump to heading
Segment has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states
| Name | Description | CSS selector |
|---|---|---|
checked |
Applied when the segment is checked. |
:state(checked)
|
controller-readonly |
Applied when the containing segmented control is read-only. |
:state(controller-readonly)
|
disabled |
Applied when the segment is disabled. |
:state(disabled)
|
focused |
Applied when the segment has focus. |
:state(focused)
|
icon-only |
Applied when the segment's only content is an icon. Give the icon a label so the
segment has an accessible name.
|
:state(icon-only)
|