mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
546b21ea82
* feat(components): [segmented] new component * feat(components): [segmented] * feat(components): update * feat(components): update * feat(theme-chalk): update * feat(components): update * feat: update * feat: update * feat(components): add focus-visible * feat(theme-chalk): update * feat(components): fix test * docs: docs * feat(components): update * feat: add icon
103 lines
2.7 KiB
Markdown
103 lines
2.7 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
|
|
|
|
:::
|
|
|
|
## Disabled
|
|
|
|
Set `disabled` of segmented or option to `true` to disable it.
|
|
|
|
:::demo
|
|
|
|
segmented/disabled
|
|
|
|
:::
|
|
|
|
## 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 default slot to render custom content.
|
|
|
|
:::demo
|
|
|
|
segmented/custom-style
|
|
|
|
:::
|
|
|
|
## API
|
|
|
|
### Attributes
|
|
|
|
| Name | Description | Type | Default |
|
|
|-----------------------|------------------------------------|------------------------------------------------|---------|
|
|
| model-value / v-model | binding value | ^[string] / ^[number] | — |
|
|
| options | data of the options | ^[array]`Option[]` | [] |
|
|
| 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] | — |
|
|
|
|
### Events
|
|
|
|
| Name | Description | Type |
|
|
|--------|-------------------------------------------------------------------------------|---------------------------------|
|
|
| change | triggers when the selected value changes, the param is current selected value | ^[Function]`(val: any) => void` |
|
|
|
|
### Slots
|
|
|
|
| Name | Description |
|
|
|---------|-----------------|
|
|
| default | option renderer |
|
|
|
|
## Type Declarations
|
|
|
|
<details>
|
|
<summary>Show declarations</summary>
|
|
|
|
```ts
|
|
type Option = {
|
|
label: string
|
|
value: string | number | boolean
|
|
disabled?: boolean
|
|
[key: string]: any
|
|
} | string | number | boolean | undefined
|
|
```
|
|
|
|
</details>
|