antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
215 lines (180 loc) • 12.3 kB
Markdown
---
nav:
path: /components
group:
title: Information Entry
order: 10
toc: 'content'
---
Select one or more in a set of options. Provides multiple options for users to choose from and is typically used in filters and forms.
In `index.json` Introducing Components in
```json
"usingComponents": {
"ant-selector": "antd-mini/es/Selector/index"
"ant-selector": "antd-mini/Selector/index"
}
```
> [options](
```xml
<ant-selector defaultValue="2" options="{{options}}" />
```
> Incoming `multiple` Properties can support multiple selection.
```xml
<ant-selector defaultValue="{{['1', '2']}}" options="{{options}}" multiple />
```
> `maxSelectedCount`、`minSelectedCount` attribute can limit the number of selections,`selectMax`、`selectMin` Event is triggered when the limit is exceeded.
```xml
<ant-selector
options="{{options}}"
multiple
maxSelectedCount="{{4}}"
minSelectedCount="{{2}}"
onSelectMax="onSelectMax"
onSelectMin="onSelectMin"
bindselectmax="onSelectMax"
bindselectmin="onSelectMin"
/>
```
```js
Page({
data: {
items: [
{ text: '选项一', value: '1' },
{ text: '选项二', value: '2' },
{ text: '选项三', value: '3' },
],
},
onSelectMin(value, item) {
console.log(value, item);
wx.showModal({ content: 'Emptying not allowed' });
my.alert({ content: 'Emptying not allowed' });
},
onSelectMax() {
console.log(value, item);
wx.showModal({ content: '选择已达上限' });
my.alert({ content: '选择已达上限' });
},
});
```
> To achieve that emptying is not allowed, use `minSelectedCount` Property Set Minimum Limit Number of Digits `1` , can.
```xml
<ant-selector defaultValue="1" options="{{options}}" minSelectedCount="{{1}}" />
```
```xml
<ant-selector
value="{{value}}"
options="{{items}}"
onChange="handleChange"
bindchange="handleChange"
/>
<ant-button
size="large"
onTap="handleChangeValue"
bindtap="handleChangeValue"
>
Change the selected value to option three
</ant-button>
```
```js
Page({
data: {
items: [
{ text: '选项一', value: '1' },
{ text: '选项二', value: '2' },
{ text: '选项三', value: '3' },
],
value: '1',
},
handleChangeValue() {
this.setData({
value: '3',
});
},
handleChange(value, items, e) {
this.setData({
value: value.detail[0],
});
this.setData({
value,
});
console.log(value, items, e);
},
});
```
> Reference below [Demo Code](
<code src="../../demo/pages/Selector/index"></code>
| Property | Description | Type | Default Value |
| ------------------------- | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| activeItemClassName | Class name of the selected option | string | - |
| activeItemStyle | Styles for selected options | string | - |
| className | Class Name | string | - |
| defaultValue | The default selection item, when multiple selection type is array | string \| number \| string[] \| number[] | - |
| disabled | Whether the whole is disabled | boolean | false |
| maxSelectedCount | Maximum Number of Optional Items | number | - |
| minSelectedCount | Number of minimum selectable items | number | - |
| multiple | Whether to allow multi-selection, the current radio/multi-selection status will be displayed when the tab bar is displayed. | boolean | false |
| options | Option Data Source | [SelectorItem](
| style | Style | string | - |
| value | The current selection, when multiple selection type is array | string \| number \| string[] \| number[] | - |
|
|
|
|
|
|
| Property | Description | Type | Default Value |
| -------- | ------------ | ---------------- | ------ |
| disabled | Disable | boolean | - |
| subText | Deputy Copywriter | string | - |
| text | Copy | string | - |
| value | Current item value | string \| number | - |
Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
| Variable name | Default Value | Dark Mode Default | Remarks |
| --------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------------------- |
| --selector-background-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">
| --selector-item-background | <div style="width: 150px; height: 30px; background-color: #f5f5f5; color: #333333;">
| --selector-item-active-background | <div style="width: 150px; height: 30px; background-color: #e7f1ff; color: #333333;">
| --selector-item-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">
| --selector-item-sub-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #ffffff;">