Selector - Mobile Platform as a Service - Alibaba Cloud Documentation Center

A Selector component provides multiple items for users to choose. Generally, it is used as a form component in a filter or form. When you use it with a Form/FormItem component, you must set mode to form.

Property

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

Property	Type	Required	Default value	Description
value	string \| number \| string[] \| number[]	No	-	The value of a selected item. This property equals the value of an item specified by the items property.
items	SelectorItem[]	Yes	-	Items available for selection.
activeItemClassName	string	No	-	The class name of an activated item.
multiple	boolean	No	false	Whether multiple selections are allowed. The current status (single selection or multiple selections) will be displayed if you include the selector component in the tab bar.
title	string	No	''	The title of the tab bar.
desc	string	No	''	The description of the tab bar.
id	string	No	-	The ID of the form element.
name	string	No	-	The name of the form element.
disabled	boolean	No	false	Whether to disable this component.
mode	'noraml' \| 'form'	No	'normal'	When you use this component together with a From/FormItem component, you must set mode to from.
className	string	No	-	The class name.

Event

Event name	Description	Type
onChange	Callback fired when the selected value is changed.	`(v: string \| string[], selectedItem: SelectItem \| SelectItem[] ) => void`

Style class

Class name	Description
amd-selector	The style of the entire selector.
amd-selector-disabled	The style of the entire selector in disabled mode.
amd-selector-content	The style of the selector content.
amd-selector-item	The style of a selector item.
amd-selector-item-active	The style of a selector item in active state.
amd-selector-item-disabled	The style of a selector item in disabled state.
amd-selector-item-text	The text style.
amd-selector-item-subtext	The subtext style.
amd-selector-item-badge-active	The style of the badge in active state.

Code sample

Basic usage

The following shows an example of the code in the index.axml file:

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

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

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

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

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

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

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

The following shows an example of the code in the index.js file:

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

The following shows an example of the code in the index.acss file:

.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;
}

The following shows an example of the code in the index.json file:

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