mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
docs(select): update select readme and add usage docs
This commit is contained in:
Brandy Carney
@ -1,80 +1,39 @@
|
||||
# ion-select
|
||||
|
||||
The `<ion-select>` element is similar to a native `<select>` element, however, it is easier for users to sort through and select the preferred option or options. When a user taps the select component, a dialog appears with all of the options in a large, easy to select list.
|
||||
Selects are form controls to select an option, or options, from a set of options, similar to a native `<select>` element. When a user taps the select, a dialog appears with all of the options in a large, easy to select list.
|
||||
|
||||
It should be used with child `ion-select-option` elements. If the child option is not given a `value` attribute then it will use its text as the value.
|
||||
A select should be used with child `<ion-select-option>` elements. If the child option is not given a `value` attribute then its text will be used as the value.
|
||||
|
||||
If `value` is set on the `<ion-select>`, the selected option will be chosen based on that value. Otherwise, the `selected` attribute can be used on the `<ion-select-option>`.
|
||||
|
||||
If `value` is set on the `ion-select`, the selected option will be based on that value. Otherwise, the `selected` attribute can be used on the `ion-select-option` elements.
|
||||
|
||||
## Interfaces
|
||||
|
||||
By default, the `ion-select` uses the [AlertController API](../../alert/AlertController) to open up the overlay of options in an alert. The interface can be changed to use the [ActionSheetController API](../../action-sheet/ActionSheetController) or [PopoverController API](../../popover/PopoverController) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
|
||||
By default, select uses the [AlertController API](../../alert/AlertController) to open up the overlay of options in an alert. The interface can be changed to use the [ActionSheetController API](../../action-sheet/ActionSheetController) or [PopoverController API](../../popover/PopoverController) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
|
||||
|
||||
## Single Value: Radio Buttons
|
||||
|
||||
The standard `ion-select` component allows the user to select only one option. When selecting only one option the alert interface presents users with a radio button styled list of options. The action sheet interface can only be used with a single value select. The `ion-select` component's value receives the value of the selected option's value.
|
||||
## Single Selection
|
||||
|
||||
```html
|
||||
<ion-item>
|
||||
<ion-label>Gender</ion-label>
|
||||
<ion-select id="gender">
|
||||
<ion-select-option value="f">Female</ion-select-option>
|
||||
<ion-select-option value="m">Male</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
```
|
||||
By default, the select allows the user to select only one option. The alert interface presents users with a radio button styled list of options. The action sheet interface can only be used with a single value select. The select component's value receives the value of the selected option's value.
|
||||
|
||||
### Multiple Value: Checkboxes
|
||||
|
||||
By adding the `multiple="true"` attribute to `ion-select`, users are able to select multiple options. When multiple options can be selected, the alert overlay presents users with a checkbox styled list of options. The `ion-select` component's value receives an array of all the selected option values. In the example below, because each option is not given a `value`, it will use the option's text as the value.
|
||||
### Multiple Selection
|
||||
|
||||
Note: the `action-sheet` and `popover` interfaces will not work with a multiple-value select.
|
||||
By adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert 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.
|
||||
|
||||
Note: the `action-sheet` and `popover` interfaces will not work with multiple selection.
|
||||
|
||||
```html
|
||||
<ion-item>
|
||||
<ion-label>Toppings</ion-label>
|
||||
<ion-select id="toppings" multiple="true">
|
||||
<ion-select-option>Bacon</ion-select-option>
|
||||
<ion-select-option>Black Olives</ion-select-option>
|
||||
<ion-select-option>Extra Cheese</ion-select-option>
|
||||
<ion-select-option>Mushrooms</ion-select-option>
|
||||
<ion-select-option>Pepperoni</ion-select-option>
|
||||
<ion-select-option>Sausage</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
```
|
||||
|
||||
## Select Buttons
|
||||
|
||||
By default, the two buttons read `Cancel` and `OK`. Each button's text can be customized using the `cancelText` and `okText` attributes:
|
||||
|
||||
```html
|
||||
<ion-select ok-text="Okay" cancel-text="Dismiss">
|
||||
...
|
||||
</ion-select>
|
||||
```
|
||||
By default, the alert has two buttons: `Cancel` and `OK`. Each button's text can be customized using the `cancelText` and `okText` properties.
|
||||
|
||||
The `action-sheet` and `popover` interfaces do not have an `OK` button, clicking on any of the options will automatically close the overlay and select that value. The `popover` interface does not have a `Cancel` button, clicking on the backdrop will close the overlay.
|
||||
|
||||
|
||||
## Interface Options
|
||||
|
||||
Since `ion-select` uses the `Alert`, `Action Sheet` and `Popover` interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom title, subTitle, css class, and more. See the [AlertController API docs](../../alert/AlertController/#create), [ActionSheetController API docs](../../action-sheet/ActionSheetController/#create), and [PopoverController API docs](../../popover/PopoverController/#create) for the properties that each interface accepts.
|
||||
|
||||
For example, to change the `title` and `subTitle` of the overlay, pass it into `interfaceOptions`.
|
||||
|
||||
```html
|
||||
<ion-select id="customSelect">
|
||||
...
|
||||
</ion-select>
|
||||
```
|
||||
|
||||
```javascript
|
||||
var customSelect = document.getElementById('customSelect');
|
||||
customSelect.interfaceOptions = {
|
||||
header: 'Pizza Toppings',
|
||||
subHeader: 'Select your toppings'
|
||||
};
|
||||
```
|
||||
Since select uses the alert, action sheet and popover interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more. See the [AlertController API docs](../../alert/AlertController/#create), [ActionSheetController API docs](../../action-sheet/ActionSheetController/#create), and [PopoverController API docs](../../popover/PopoverController/#create) for the properties that each interface accepts.
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@ -1,256 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Select</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Select</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Select</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="outer-content test-content">
|
||||
<ion-list>
|
||||
<ion-list-header>Single Value Select</ion-list-header>
|
||||
<ion-content class="outer-content test-content">
|
||||
<ion-list>
|
||||
<ion-list-header>Single Selection</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Gender</ion-label>
|
||||
<ion-select id="gender" placeholder="Select One">
|
||||
<ion-select-option value="f">Female</ion-select-option>
|
||||
<ion-select-option value="m">Male</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Gender</ion-label>
|
||||
<ion-select placeholder="Select One">
|
||||
<ion-select-option value="f">Female</ion-select-option>
|
||||
<ion-select-option value="m">Male</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Hair Color</ion-label>
|
||||
<ion-select id="hairColor" value="brown" ok-text="Okay" cancel-text="Dismiss">
|
||||
<ion-select-option value="brown" selected>Brown</ion-select-option>
|
||||
<ion-select-option value="blonde">Blonde</ion-select-option>
|
||||
<ion-select-option value="black">Black</ion-select-option>
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Hair Color</ion-label>
|
||||
<ion-select value="brown" ok-text="Okay" cancel-text="Dismiss">
|
||||
<ion-select-option value="brown">Brown</ion-select-option>
|
||||
<ion-select-option value="blonde">Blonde</ion-select-option>
|
||||
<ion-select-option value="black">Black</ion-select-option>
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Skittles</ion-label>
|
||||
<ion-select id="customSelect" interface="action-sheet" name="skittles">
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
<ion-select-option value="purple">Purple</ion-select-option>
|
||||
<ion-select-option value="yellow">Yellow</ion-select-option>
|
||||
<ion-select-option value="orange">Orange</ion-select-option>
|
||||
<ion-select-option value="green">Green</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
</ion-list>
|
||||
<ion-list>
|
||||
<ion-list-header>Multiple Selection</ion-list-header>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>Select - Custom Interface Options</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Toppings</ion-label>
|
||||
<ion-select multiple="true" cancel-text="Nah" ok-text="Okay!">
|
||||
<ion-select-option value="bacon">Bacon</ion-select-option>
|
||||
<ion-select-option value="olives">Black Olives</ion-select-option>
|
||||
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
|
||||
<ion-select-option value="peppers">Green Peppers</ion-select-option>
|
||||
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
|
||||
<ion-select-option value="onions">Onions</ion-select-option>
|
||||
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
|
||||
<ion-select-option value="pineapple">Pineapple</ion-select-option>
|
||||
<ion-select-option value="sausage">Sausage</ion-select-option>
|
||||
<ion-select-option value="Spinach">Spinach</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Alert</ion-label>
|
||||
<ion-select id="customAlertSelect" interface="alert" multiple="true" placeholder="Select One">
|
||||
<ion-select-option value="bacon">Bacon</ion-select-option>
|
||||
<ion-select-option value="olives">Black Olives</ion-select-option>
|
||||
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
|
||||
<ion-select-option value="peppers">Green Peppers</ion-select-option>
|
||||
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
|
||||
<ion-select-option value="onions">Onions</ion-select-option>
|
||||
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
|
||||
<ion-select-option value="pineapple">Pineapple</ion-select-option>
|
||||
<ion-select-option value="sausage">Sausage</ion-select-option>
|
||||
<ion-select-option value="Spinach">Spinach</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Pets</ion-label>
|
||||
<ion-select multiple="true">
|
||||
<ion-select-option value="bird" selected>Bird</ion-select-option>
|
||||
<ion-select-option value="cat">Cat</ion-select-option>
|
||||
<ion-select-option value="dog" selected>Dog</ion-select-option>
|
||||
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Popover</ion-label>
|
||||
<ion-select id="customPopoverSelect" interface="popover" placeholder="Select One">
|
||||
<ion-select-option value="brown">Brown</ion-select-option>
|
||||
<ion-select-option value="blonde">Blonde</ion-select-option>
|
||||
<ion-select-option value="black">Black</ion-select-option>
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-list>
|
||||
<ion-list-header>Interface Options</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Action Sheet</ion-label>
|
||||
<ion-select id="customActionSheetSelect" interface="action-sheet" placeholder="Select One">
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
<ion-select-option value="purple">Purple</ion-select-option>
|
||||
<ion-select-option value="yellow">Yellow</ion-select-option>
|
||||
<ion-select-option value="orange">Orange</ion-select-option>
|
||||
<ion-select-option value="green">Green</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Alert</ion-label>
|
||||
<ion-select id="customAlertSelect" interface="alert" multiple="true" placeholder="Select One">
|
||||
<ion-select-option value="bacon">Bacon</ion-select-option>
|
||||
<ion-select-option value="olives">Black Olives</ion-select-option>
|
||||
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
|
||||
<ion-select-option value="peppers">Green Peppers</ion-select-option>
|
||||
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
|
||||
<ion-select-option value="onions">Onions</ion-select-option>
|
||||
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
|
||||
<ion-select-option value="pineapple">Pineapple</ion-select-option>
|
||||
<ion-select-option value="sausage">Sausage</ion-select-option>
|
||||
<ion-select-option value="Spinach">Spinach</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Popover</ion-label>
|
||||
<ion-select id="customPopoverSelect" interface="popover" placeholder="Select One">
|
||||
<ion-select-option value="brown">Brown</ion-select-option>
|
||||
<ion-select-option value="blonde">Blonde</ion-select-option>
|
||||
<ion-select-option value="black">Black</ion-select-option>
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>Popover Interface Select</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Action Sheet</ion-label>
|
||||
<ion-select id="customActionSheetSelect" interface="action-sheet" placeholder="Select One">
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
<ion-select-option value="purple">Purple</ion-select-option>
|
||||
<ion-select-option value="yellow">Yellow</ion-select-option>
|
||||
<ion-select-option value="orange">Orange</ion-select-option>
|
||||
<ion-select-option value="green">Green</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Gender</ion-label>
|
||||
<ion-select name="gender" interface="popover">
|
||||
<ion-select-option value="f">Female</ion-select-option>
|
||||
<ion-select-option value="m">Male</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Gaming</ion-label>
|
||||
<ion-select name="gaming" ok-text="Okay" cancel-text="Dismiss" value="n64" interface="popover">
|
||||
<ion-select-option value="nes">NES</ion-select-option>
|
||||
<ion-select-option value="n64">Nintendo64</ion-select-option>
|
||||
<ion-select-option value="ps">PlayStation</ion-select-option>
|
||||
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
|
||||
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
|
||||
<ion-select-option value="snes">SNES</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Date</ion-label>
|
||||
<ion-select placeholder="Month" interface="popover">
|
||||
<ion-select-option value="01">January</ion-select-option>
|
||||
<ion-select-option value="02">February</ion-select-option>
|
||||
<ion-select-option value="03" selected="true">March</ion-select-option>
|
||||
<ion-select-option value="04">April</ion-select-option>
|
||||
<ion-select-option value="05">May</ion-select-option>
|
||||
<ion-select-option value="06">June</ion-select-option>
|
||||
<ion-select-option value="07">July</ion-select-option>
|
||||
<ion-select-option value="08">August</ion-select-option>
|
||||
<ion-select-option value="09">September</ion-select-option>
|
||||
<ion-select-option value="10">October</ion-select-option>
|
||||
<ion-select-option value="11">November</ion-select-option>
|
||||
<ion-select-option value="12">December</ion-select-option>
|
||||
</ion-select>
|
||||
<ion-select placeholder="Year" interface="popover">
|
||||
<ion-select-option>1989</ion-select-option>
|
||||
<ion-select-option>1990</ion-select-option>
|
||||
<ion-select-option>1991</ion-select-option>
|
||||
<ion-select-option>1992</ion-select-option>
|
||||
<ion-select-option>1993</ion-select-option>
|
||||
<ion-select-option selected="true">1994</ion-select-option>
|
||||
<ion-select-option>1995</ion-select-option>
|
||||
<ion-select-option>1996</ion-select-option>
|
||||
<ion-select-option>1997</ion-select-option>
|
||||
<ion-select-option>1998</ion-select-option>
|
||||
<ion-select-option>1999</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>Action Sheet Interface Select</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Mute Notifications</ion-label>
|
||||
<ion-select name="notifications" interface="action-sheet">
|
||||
<ion-select-option value="mute_15">For 15 Minutes</ion-select-option>
|
||||
<ion-select-option value="mute_1">For 1 Hour</ion-select-option>
|
||||
<ion-select-option value="mute_23">For 24 Hours</ion-select-option>
|
||||
<ion-select-option value="mute_inf">Until I turn it back on</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Rating</ion-label>
|
||||
<ion-select name="rating" interface="action-sheet">
|
||||
<ion-select-option value="1">1 Star</ion-select-option>
|
||||
<ion-select-option value="2">2 Stars</ion-select-option>
|
||||
<ion-select-option value="3">3 Stars</ion-select-option>
|
||||
<ion-select-option value="4">4 Stars</ion-select-option>
|
||||
<ion-select-option value="5">5 Stars</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>Multiple Value Select</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Toppings</ion-label>
|
||||
<ion-select name="toppings" multiple="true" cancel-text="Nah" ok-text="Okay!">
|
||||
<ion-select-option value="bacon">Bacon</ion-select-option>
|
||||
<ion-select-option value="olives">Black Olives</ion-select-option>
|
||||
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
|
||||
<ion-select-option value="peppers">Green Peppers</ion-select-option>
|
||||
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
|
||||
<ion-select-option value="onions">Onions</ion-select-option>
|
||||
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
|
||||
<ion-select-option value="pineapple">Pineapple</ion-select-option>
|
||||
<ion-select-option value="sausage">Sausage</ion-select-option>
|
||||
<ion-select-option value="Spinach">Spinach</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Pets</ion-label>
|
||||
<ion-select id="pets" name="pets" multiple="true">
|
||||
<ion-select-option value="bird">Bird</ion-select-option>
|
||||
<ion-select-option value="cat">Cat</ion-select-option>
|
||||
<ion-select-option value="dog">Dog</ion-select-option>
|
||||
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-select multiple disabled="true">
|
||||
<ion-select-option selected="true">Selected Text</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label stacked>Stacked</ion-label>
|
||||
<ion-select>
|
||||
<ion-select-option>Default</ion-select-option>
|
||||
<ion-select-option>Other</ion-select-option>
|
||||
<ion-select-option>N/A</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label floating>Floating</ion-label>
|
||||
<ion-select>
|
||||
<ion-select-option>Default</ion-select-option>
|
||||
<ion-select-option>Other</ion-select-option>
|
||||
<ion-select-option>N/A</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label floating>Floating</ion-label>
|
||||
<ion-select>
|
||||
<ion-select-option selected="true">Default</ion-select-option>
|
||||
<ion-select-option>Other</ion-select-option>
|
||||
<ion-select-option>N/A</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<div text-center>
|
||||
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
|
||||
Toggle Disabled
|
||||
</ion-button>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
</ion-content>
|
||||
|
||||
<script>
|
||||
var pets = document.getElementById('pets');
|
||||
pets.value = ['bird', 'dog'];
|
||||
|
||||
var customAlertSelect = document.getElementById('customAlertSelect');
|
||||
var customAlertOptions = {
|
||||
header: 'Pizza Toppings',
|
||||
@ -262,31 +127,20 @@
|
||||
|
||||
var customPopoverSelect = document.getElementById('customPopoverSelect');
|
||||
var customPopoverOptions = {
|
||||
header: 'Pizza Toppings',
|
||||
subHeader: 'Select your toppings',
|
||||
message: '$1.50 charge for every topping'
|
||||
header: 'Hair Color',
|
||||
subHeader: 'Select your hair color',
|
||||
message: 'Only select your dominant hair color'
|
||||
};
|
||||
customPopoverSelect.interfaceOptions = customAlertOptions;
|
||||
customPopoverSelect.interfaceOptions = customPopoverOptions;
|
||||
|
||||
var customActionSheetSelect = document.getElementById('customActionSheetSelect');
|
||||
var customActionSheetOptions = {
|
||||
header: 'Pizza Toppings',
|
||||
subHeader: 'Select your toppings',
|
||||
message: '$1.50 charge for every topping'
|
||||
header: 'Colors',
|
||||
subHeader: 'Select your favorite color'
|
||||
};
|
||||
customActionSheetSelect.interfaceOptions = customAlertOptions;
|
||||
|
||||
function toggleBoolean(id, prop) {
|
||||
var el = document.getElementById(id);
|
||||
|
||||
var isTrue = el[prop] ? false : true;
|
||||
el[prop] = isTrue;
|
||||
console.log('in toggleBoolean, setting', prop, 'to', isTrue);
|
||||
}
|
||||
customActionSheetSelect.interfaceOptions = customActionSheetOptions;
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
135
core/src/components/select/usage/angular.md
Normal file
135
core/src/components/select/usage/angular.md
Normal file
@ -0,0 +1,135 @@
|
||||
## Single Selection
|
||||
|
||||
```html
|
||||
<ion-list>
|
||||
<ion-list-header>Single Selection</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Gender</ion-label>
|
||||
<ion-select placeholder="Select One">
|
||||
<ion-select-option value="f">Female</ion-select-option>
|
||||
<ion-select-option value="m">Male</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Hair Color</ion-label>
|
||||
<ion-select value="brown" okText="Okay" cancelText="Dismiss">
|
||||
<ion-select-option value="brown">Brown</ion-select-option>
|
||||
<ion-select-option value="blonde">Blonde</ion-select-option>
|
||||
<ion-select-option value="black">Black</ion-select-option>
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
```
|
||||
|
||||
## Multiple Selection
|
||||
|
||||
```html
|
||||
<ion-list>
|
||||
<ion-list-header>Multiple Selection</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Toppings</ion-label>
|
||||
<ion-select multiple="true" cancelText="Nah" okText="Okay!">
|
||||
<ion-select-option value="bacon">Bacon</ion-select-option>
|
||||
<ion-select-option value="olives">Black Olives</ion-select-option>
|
||||
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
|
||||
<ion-select-option value="peppers">Green Peppers</ion-select-option>
|
||||
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
|
||||
<ion-select-option value="onions">Onions</ion-select-option>
|
||||
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
|
||||
<ion-select-option value="pineapple">Pineapple</ion-select-option>
|
||||
<ion-select-option value="sausage">Sausage</ion-select-option>
|
||||
<ion-select-option value="Spinach">Spinach</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Pets</ion-label>
|
||||
<ion-select multiple="true">
|
||||
<ion-select-option value="bird" selected>Bird</ion-select-option>
|
||||
<ion-select-option value="cat">Cat</ion-select-option>
|
||||
<ion-select-option value="dog" selected>Dog</ion-select-option>
|
||||
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
```
|
||||
|
||||
## Interface Options
|
||||
|
||||
```html
|
||||
<ion-list>
|
||||
<ion-list-header>Interface Options</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Alert</ion-label>
|
||||
<ion-select [interfaceOptions]="customAlertOptions" interface="alert" multiple="true" placeholder="Select One">
|
||||
<ion-select-option value="bacon">Bacon</ion-select-option>
|
||||
<ion-select-option value="olives">Black Olives</ion-select-option>
|
||||
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
|
||||
<ion-select-option value="peppers">Green Peppers</ion-select-option>
|
||||
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
|
||||
<ion-select-option value="onions">Onions</ion-select-option>
|
||||
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
|
||||
<ion-select-option value="pineapple">Pineapple</ion-select-option>
|
||||
<ion-select-option value="sausage">Sausage</ion-select-option>
|
||||
<ion-select-option value="Spinach">Spinach</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Popover</ion-label>
|
||||
<ion-select [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="Select One">
|
||||
<ion-select-option value="brown">Brown</ion-select-option>
|
||||
<ion-select-option value="blonde">Blonde</ion-select-option>
|
||||
<ion-select-option value="black">Black</ion-select-option>
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Action Sheet</ion-label>
|
||||
<ion-select [interfaceOptions]="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
<ion-select-option value="purple">Purple</ion-select-option>
|
||||
<ion-select-option value="yellow">Yellow</ion-select-option>
|
||||
<ion-select-option value="orange">Orange</ion-select-option>
|
||||
<ion-select-option value="green">Green</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
```
|
||||
|
||||
```javascript
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'select-example',
|
||||
templateUrl: 'select-example.html',
|
||||
styleUrls: ['./select-example.css'],
|
||||
})
|
||||
export class SelectExample {
|
||||
customAlertOptions: any = {
|
||||
header: 'Pizza Toppings',
|
||||
subHeader: 'Select your toppings',
|
||||
message: '$1.00 per topping',
|
||||
translucent: true
|
||||
};
|
||||
|
||||
customPopoverOptions: any = {
|
||||
header: 'Hair Color',
|
||||
subHeader: 'Select your hair color',
|
||||
message: 'Only select your dominant hair color'
|
||||
};
|
||||
|
||||
customActionSheetOptions: any = {
|
||||
header: 'Colors',
|
||||
subHeader: 'Select your favorite color'
|
||||
};
|
||||
}
|
||||
```
|
||||
132
core/src/components/select/usage/javascript.md
Normal file
132
core/src/components/select/usage/javascript.md
Normal file
@ -0,0 +1,132 @@
|
||||
## Single Selection
|
||||
|
||||
```html
|
||||
<ion-list>
|
||||
<ion-list-header>Single Selection</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Gender</ion-label>
|
||||
<ion-select placeholder="Select One">
|
||||
<ion-select-option value="f">Female</ion-select-option>
|
||||
<ion-select-option value="m">Male</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Hair Color</ion-label>
|
||||
<ion-select value="brown" ok-text="Okay" cancel-text="Dismiss">
|
||||
<ion-select-option value="brown">Brown</ion-select-option>
|
||||
<ion-select-option value="blonde">Blonde</ion-select-option>
|
||||
<ion-select-option value="black">Black</ion-select-option>
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
```
|
||||
|
||||
## Multiple Selection
|
||||
|
||||
```html
|
||||
<ion-list>
|
||||
<ion-list-header>Multiple Selection</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Toppings</ion-label>
|
||||
<ion-select multiple="true" cancel-text="Nah" ok-text="Okay!">
|
||||
<ion-select-option value="bacon">Bacon</ion-select-option>
|
||||
<ion-select-option value="olives">Black Olives</ion-select-option>
|
||||
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
|
||||
<ion-select-option value="peppers">Green Peppers</ion-select-option>
|
||||
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
|
||||
<ion-select-option value="onions">Onions</ion-select-option>
|
||||
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
|
||||
<ion-select-option value="pineapple">Pineapple</ion-select-option>
|
||||
<ion-select-option value="sausage">Sausage</ion-select-option>
|
||||
<ion-select-option value="Spinach">Spinach</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Pets</ion-label>
|
||||
<ion-select multiple="true">
|
||||
<ion-select-option value="bird" selected>Bird</ion-select-option>
|
||||
<ion-select-option value="cat">Cat</ion-select-option>
|
||||
<ion-select-option value="dog" selected>Dog</ion-select-option>
|
||||
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
```
|
||||
|
||||
## Interface Options
|
||||
|
||||
```html
|
||||
<ion-list>
|
||||
<ion-list-header>Interface Options</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Alert</ion-label>
|
||||
<ion-select id="customAlertSelect" interface="alert" multiple="true" placeholder="Select One">
|
||||
<ion-select-option value="bacon">Bacon</ion-select-option>
|
||||
<ion-select-option value="olives">Black Olives</ion-select-option>
|
||||
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
|
||||
<ion-select-option value="peppers">Green Peppers</ion-select-option>
|
||||
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
|
||||
<ion-select-option value="onions">Onions</ion-select-option>
|
||||
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
|
||||
<ion-select-option value="pineapple">Pineapple</ion-select-option>
|
||||
<ion-select-option value="sausage">Sausage</ion-select-option>
|
||||
<ion-select-option value="Spinach">Spinach</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Popover</ion-label>
|
||||
<ion-select id="customPopoverSelect" interface="popover" placeholder="Select One">
|
||||
<ion-select-option value="brown">Brown</ion-select-option>
|
||||
<ion-select-option value="blonde">Blonde</ion-select-option>
|
||||
<ion-select-option value="black">Black</ion-select-option>
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Action Sheet</ion-label>
|
||||
<ion-select id="customActionSheetSelect" interface="action-sheet" placeholder="Select One">
|
||||
<ion-select-option value="red">Red</ion-select-option>
|
||||
<ion-select-option value="purple">Purple</ion-select-option>
|
||||
<ion-select-option value="yellow">Yellow</ion-select-option>
|
||||
<ion-select-option value="orange">Orange</ion-select-option>
|
||||
<ion-select-option value="green">Green</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
```
|
||||
|
||||
```javascript
|
||||
var customAlertSelect = document.getElementById('customAlertSelect');
|
||||
var customAlertOptions = {
|
||||
header: 'Pizza Toppings',
|
||||
subHeader: 'Select your toppings',
|
||||
message: '$1.00 per topping',
|
||||
translucent: true
|
||||
};
|
||||
customAlertSelect.interfaceOptions = customAlertOptions;
|
||||
|
||||
var customPopoverSelect = document.getElementById('customPopoverSelect');
|
||||
var customPopoverOptions = {
|
||||
header: 'Hair Color',
|
||||
subHeader: 'Select your hair color',
|
||||
message: 'Only select your dominant hair color'
|
||||
};
|
||||
customPopoverSelect.interfaceOptions = customPopoverOptions;
|
||||
|
||||
var customActionSheetSelect = document.getElementById('customActionSheetSelect');
|
||||
var customActionSheetOptions = {
|
||||
header: 'Colors',
|
||||
subHeader: 'Select your favorite color'
|
||||
};
|
||||
customActionSheetSelect.interfaceOptions = customActionSheetOptions;
|
||||
```
|
||||
Reference in New Issue
Block a user