Skip to content

Commit cfe152f

Browse files
authored
docs(select): reorder examples, add alert playground (#3153)
1 parent 60dccd9 commit cfe152f

File tree

1 file changed

+16
-10
lines changed

1 file changed

+16
-10
lines changed

docs/api/select.md

+16-10
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,26 @@ import SingleSelectionExample from '@site/static/usage/v7/select/basic/single-se
6666

6767
<SingleSelectionExample />
6868

69+
## Multiple Selection
70+
71+
By adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert or popover overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values.
72+
73+
Note: the `action-sheet` interface will not work with multiple selection.
74+
75+
import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md';
76+
77+
<MultipleSelectionExample />
78+
6979
## Interfaces
7080

7181
By default, select uses [ion-alert](alert.md) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.md) or [ion-popover](popover.md) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
7282

83+
### Alert
84+
85+
import AlertExample from '@site/static/usage/v7/select/basic/single-selection/index.md';
86+
87+
<AlertExample />
88+
7389
### Action Sheet
7490

7591
import ActionSheetExample from '@site/static/usage/v7/select/interfaces/action-sheet/index.md';
@@ -82,16 +98,6 @@ import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/inde
8298

8399
<PopoverExample />
84100

85-
## Multiple Selection
86-
87-
By adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert or popover overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values.
88-
89-
Note: the `action-sheet` interface will not work with multiple selection.
90-
91-
import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md';
92-
93-
<MultipleSelectionExample />
94-
95101
## Responding to Interaction
96102

97103
The main ways of handling user interaction with the select are the `ionChange`, `ionDismiss`, and `ionCancel` events. See [Events](#events) for more details on these and other events that select fires.

0 commit comments

Comments
 (0)