Segmented control

Used to alternative to radio group component.

Import

import { MpSegmentedControl } from '@mekari/pixel3'

Playground

API

Data prop

MpSegmentedControl support two different data formats:

1. An array of strings, use when do not need to customize item component or display label different than value.
2. An array of objects with required value properties and any other additional properties (id, label, icon, and is-disabled).

// Data as an array of strings:
<MpSegmentedControl :data="['Option 1', 'Option 2', 'Option 3']" />
// Data as an array of objects:
<MpSegmentedControl 
  :data="[
    { id: 'ezsCsI', value: 'option-1', label: 'Option 1' },
    { id: 'jjsCgt', value: 'option-2', label: 'Option 2' },
    { id: 'llpHcs', value: 'option-3', label: 'Option 3' },
  ]"
/>

MpSegmentedControl

Props

Events

Slots

Name	Type	Default
id Id of segmented control.	string	-
model-value Value of segmented control.	number | string	-
name Name of segmented control.	string	-
data Data of segmented control.	array	-
is-disabled If true, segmented control will be disabled.	boolean	false
is-full-width If true, segmented control will span full width of it parent.	boolean	true

Usage

With icon

Without icon

Icon only