Selector

Properties

type SelectorItem = {
  text: string;
  value: string|number;
  subText?: string;
  disabled?: boolean;
}

Property	Type	Required	Default	Description
value	string | number | string[] | number[]	No	-	The value of each selected item.
items	SelectorItem[]	Yes	-	Available options.
activeItemClassName	string	No	-	Class name applied to an active item.
multiple	boolean	No	false	Specifies whether to allow multiple selections. The label indicates whether single-select or multi-select mode is active.
title	string	No	''	Title of the selector label.
desc	string	No	''	Tab bar
id	string	No	-	ID of the form element.
name	string	No	-	Name of the form element.
disabled	boolean	No	false	Specifies whether to disable the component.
mode	'noraml' | 'form'	No	'normal'	Set to `form` to use this component with Form and FormItem.
className	string	No	-	Class name

Events

Event name	Description	Type
onChange	Triggered when the selected value changes.	(v: string | string[], selectedItem: SelectItem | SelectItem[] ) => void

Style classes

Class name	Description
amd-selector	Overall component style.
amd-selector-disabled	Component style when disabled.
amd-selector-content	Single-option style
amd-selector-item	Individual option item style.
amd-selector-item-active	Active option item style.
amd-selector-item-disabled	Disabled option item style.
amd-selector-item-text	Option text style.
amd-selector-item-subtext	Option subtitle style.
amd-selector-item-badge-active	Badge style on an active item.

Code examples

Basic usage

Example of index.axml:

<selector 
  title="Single-select"
  value="11"
  items="{{items1}}"/>

<selector 
  title="Single-select"
  value="2"
  desc="Option with subtitle"
  items="{{items2}}"/>

<selector 
  title="Multi-select"
  value="{{['1','2']}}"
  items="{{items1}}"
  multiple="{{true}}"/>

<selector 
  title="All disabled"
  value="{{['1','2']}}"
  items="{{items1}}"
  disabled="{{true}}"
  multiple="{{true}}"/>

<selector 
  title="Partially disabled"
  value="{{['1','2']}}"
  items="{{items3}}"
  multiple="{{true}}"/>

<selector 
  title="Change value"
  value="{{value}}"
  items="{{items1}}"
  onChange="handleChange"/>

<view class="valusBox">
  <button 
    type="danger-ghost"
    inline="{{true}}"
    inlineSize="larger"
    onTap="handleChangeValue"
    data-value="11">
    Change selected value to: 3
  </button>
</view>

Example of index.js:

Page({
  data: {
    items1: [
      { text: 'Option 1', value: '1' },
      { text: 'Option 2', value: '2' },
      { text: 'Option 3', value: '11' }],
    items2: [
      { text: 'Option 1', subText: 'Subtitle 1', value: '1' },
      { text: 'Option 2', subText: 'Subtitle 2', value: '2' },
      { text: 'Option 3', subText: 'Subtitle 3', value: '3' }],
    items3: [
      { text: 'Option 1', subText: 'Subtitle 1', value: '1' },
      { text: 'Option 2', subText: 'Subtitle 2', value: '2', disabled: true },
      { text: 'Option 3', subText: 'Subtitle 3', value: '3' }],
    items: [
      {
        text: 'Option 1',
        value: '1',
      },
      {
        text: 'Option 2',
        subText: 'Description 2',
        value: '2',
      },
      {
        text: 'Option 3',
        disabled: true,
        value: '3',
      },
      {
        text: 'Option 4',
        subText: 'Description 4',
        disabled: true,
        value: '4',
      },
      {
        text: 'Option 5',
        subText: 'Description 5',
        value: '5',
      },
    ],
    value: '1',
  },
  handleChangeValue(e) {
    const { value } = e.currentTarget.dataset;
    this.setData({
      value,
    });
  },
  handleChange(e) {
    this.setData({
      value: e,
    });
  },
});

Example of index.acss:

.btns,
.valusBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 24rpx;
  background-color: #fff;
}
.btns .amd-button {
  flex: 1;
  margin: 0 12rpx;
}
.valusBox {
  flex-wrap: wrap;
}

Example of index.json:

{
  "defaultTitle": "Selector",
  "usingComponents": {
    "selector": "antd-mini/es/Selector/index",
    "button": "antd-mini/es/Button/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}