mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-16 12:04:12 +08:00
128 lines
4.0 KiB
Markdown
128 lines
4.0 KiB
Markdown
---
|
|
title: Segmented
|
|
lang: en-US
|
|
---
|
|
|
|
# Segmented
|
|
|
|
Display multiple options and allow users to select a single option.
|
|
|
|
## Basic Usage
|
|
|
|
Set `v-model` to the option value is selected.
|
|
|
|
:::demo
|
|
|
|
segmented/basic
|
|
|
|
:::
|
|
|
|
## Direction Usage ^(2.8.7)
|
|
|
|
Set `vertical` to change direction.
|
|
|
|
:::demo
|
|
|
|
segmented/custom-direction
|
|
|
|
:::
|
|
|
|
## Disabled
|
|
|
|
Set `disabled` of segmented or option to `true` to disable it.
|
|
|
|
:::demo
|
|
|
|
segmented/disabled
|
|
|
|
:::
|
|
|
|
## Aliases for custom options ^(2.9.8)
|
|
|
|
When your `options` format is different from the default format, you can customize the alias of the `options` through the `props` attribute
|
|
|
|
:::demo
|
|
|
|
segmented/props
|
|
|
|
:::
|
|
|
|
## Block
|
|
|
|
Set `block` to `true` to fit the width of parent element.
|
|
|
|
:::demo
|
|
|
|
segmented/block
|
|
|
|
:::
|
|
|
|
## Custom Content
|
|
|
|
Set default slot to render custom content.
|
|
|
|
:::demo
|
|
|
|
segmented/custom-content
|
|
|
|
:::
|
|
|
|
## Custom Style
|
|
|
|
Set custom styles using CSS varibles.
|
|
|
|
:::demo
|
|
|
|
segmented/custom-style
|
|
|
|
:::
|
|
|
|
## API
|
|
|
|
### Attributes
|
|
|
|
| Name | Description | Type | Default |
|
|
| ------------------------ | ---------------------------------------------- | ---------------------------------------------- | ---------- |
|
|
| model-value / v-model | binding value | ^[string] / ^[number] / ^[boolean] | — |
|
|
| options | data of the options | ^[array]`Option[]` | [] |
|
|
| [props](#props) ^(2.9.8) | configuration options, see the following table | ^[object] | — |
|
|
| size | size of component | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | '' |
|
|
| block | fit width of parent content | ^[boolean] | — |
|
|
| disabled | whether segmented is disabled | ^[boolean] | false |
|
|
| validate-event | whether to trigger form validation | ^[boolean] | true |
|
|
| name | native `name` attribute | ^[string] | — |
|
|
| id | native `id` attribute | ^[string] | — |
|
|
| aria-label ^(a11y) | native `aria-label` attribute | ^[string] | — |
|
|
| direction ^(2.8.7) | display direction | ^[enum]`'horizontal' \| 'vertical'` | horizontal |
|
|
|
|
### props
|
|
|
|
| Attribute | Description | Type | Default |
|
|
| --------- | --------------------------------------------------------------- | --------- | -------- |
|
|
| value | specify which key of node object is used as the node's value | ^[string] | value |
|
|
| label | specify which key of node object is used as the node's label | ^[string] | label |
|
|
| disabled | specify which key of node object is used as the node's disabled | ^[string] | disabled |
|
|
|
|
### Events
|
|
|
|
| Name | Description | Type |
|
|
| ------ | ----------------------------------------------------------------------------- | ------------------------------- |
|
|
| change | triggers when the selected value changes, the param is current selected value | ^[Function]`(val: any) => void` |
|
|
|
|
### Slots
|
|
|
|
| Name | Description | Type |
|
|
| ------- | --------------- | --------------------------- |
|
|
| default | option renderer | ^[object]`{ item: Option }` |
|
|
|
|
## Type Declarations
|
|
|
|
<details>
|
|
<summary>Show declarations</summary>
|
|
|
|
```ts
|
|
type Option = Record<string, any> | string | number | boolean
|
|
```
|
|
|
|
</details>
|