javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(select): separate react usage by headings (#20335)

Browse Source 
closes ionic-team/ionic-docs#1095
This commit is contained in:
Brandy Carney
2020-01-29 17:52:37 -05:00
committed by GitHub
parent 215d55f1eb
commit d693ca81f5
2 changed files with 164 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
core/src/components/select/readme.md
View File

@ -463,61 +463,14 @@ customActionSheetSelect.interfaceOptions = customActionSheetOptions;
### React ### React
## Single Selection
```tsx ```tsx
import React from 'react'; import React from 'react';
import { import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
IonList,
IonListHeader,
IonItem,
IonLabel,
IonSelect,
IonSelectOption,
IonContent
} from '@ionic/react';
const customAlertOptions = {
header: 'Pizza Toppings',
subHeader: 'Select your toppings',
message: '$1.00 per topping',
translucent: true
};
const customPopoverOptions = {
header: 'Hair Color',
subHeader: 'Select your hair color',
message: 'Only select your dominant hair color'
};
const customActionSheetOptions = {
header: 'Colors',
subHeader: 'Select your favorite color'
};
const objectOptions = [
{
id: 1,
first: 'Alice',
last: 'Smith'
},
{
id: 2,
first: 'Bob',
last: 'Davis'
},
{
id: 3,
first: 'Charlie',
last: 'Rosenburg'
}
];
const compareWith = (o1: any, o2: any) => {
return o1 && o2 ? o1.id === o2.id : o1 === o2;
};
export const SelectExample: React.FC = () => ( export const SelectExample: React.FC = () => (
<IonContent> <IonContent>
## Single Selection
<IonList> <IonList>
<IonListHeader> <IonListHeader>
<IonLabel> <IonLabel>
@ -543,7 +496,19 @@ export const SelectExample: React.FC = () => (
</IonSelect> </IonSelect>
</IonItem> </IonItem>
</IonList> </IonList>
## Multiple Selection </IonContent>
);
```
## Multiple Selection
```tsx
import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
export const SelectExample: React.FC = () => (
<IonContent>
<IonList> <IonList>
<IonListHeader> <IonListHeader>
<IonLabel> <IonLabel>
@ -581,7 +546,41 @@ export const SelectExample: React.FC = () => (
</IonSelect> </IonSelect>
</IonItem> </IonItem>
</IonList> </IonList>
## Objects as Values </IonContent>
);
```
## Objects as Values
```tsx
import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
const objectOptions = [
{
id: 1,
first: 'Alice',
last: 'Smith'
},
{
id: 2,
first: 'Bob',
last: 'Davis'
},
{
id: 3,
first: 'Charlie',
last: 'Rosenburg'
}
];
const compareWith = (o1: any, o2: any) => {
return o1 && o2 ? o1.id === o2.id : o1 === o2;
};
export const SelectExample: React.FC = () => (
<IonContent>
<IonList> <IonList>
<IonListHeader> <IonListHeader>
<IonLabel> <IonLabel>
@ -601,7 +600,37 @@ export const SelectExample: React.FC = () => (
</IonSelect> </IonSelect>
</IonItem> </IonItem>
</IonList> </IonList>
## Interface Options </IonContent>
);
```
## Interface Options
```tsx
import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
const customAlertOptions = {
header: 'Pizza Toppings',
subHeader: 'Select your toppings',
message: '$1.00 per topping',
translucent: true
};
const customPopoverOptions = {
header: 'Hair Color',
subHeader: 'Select your hair color',
message: 'Only select your dominant hair color'
};
const customActionSheetOptions = {
header: 'Colors',
subHeader: 'Select your favorite color'
};
export const SelectExample: React.FC = () => (
<IonContent>
<IonList> <IonList>
<IonListHeader> <IonListHeader>
<IonLabel> <IonLabel>

135
core/src/components/select/usage/react.md
View File

@ -1,58 +1,11 @@
## Single Selection
```tsx ```tsx
import React from 'react'; import React from 'react';
import { import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
IonList,
IonListHeader,
IonItem,
IonLabel,
IonSelect,
IonSelectOption,
IonContent
} from '@ionic/react';
const customAlertOptions = {
header: 'Pizza Toppings',
subHeader: 'Select your toppings',
message: '$1.00 per topping',
translucent: true
};
const customPopoverOptions = {
header: 'Hair Color',
subHeader: 'Select your hair color',
message: 'Only select your dominant hair color'
};
const customActionSheetOptions = {
header: 'Colors',
subHeader: 'Select your favorite color'
};
const objectOptions = [
{
id: 1,
first: 'Alice',
last: 'Smith'
},
{
id: 2,
first: 'Bob',
last: 'Davis'
},
{
id: 3,
first: 'Charlie',
last: 'Rosenburg'
}
];
const compareWith = (o1: any, o2: any) => {
return o1 && o2 ? o1.id === o2.id : o1 === o2;
};
export const SelectExample: React.FC = () => ( export const SelectExample: React.FC = () => (
<IonContent> <IonContent>
## Single Selection
<IonList> <IonList>
<IonListHeader> <IonListHeader>
<IonLabel> <IonLabel>
@ -78,7 +31,19 @@ export const SelectExample: React.FC = () => (
</IonSelect> </IonSelect>
</IonItem> </IonItem>
</IonList> </IonList>
## Multiple Selection </IonContent>
);
```
## Multiple Selection
```tsx
import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
export const SelectExample: React.FC = () => (
<IonContent>
<IonList> <IonList>
<IonListHeader> <IonListHeader>
<IonLabel> <IonLabel>
@ -116,7 +81,41 @@ export const SelectExample: React.FC = () => (
</IonSelect> </IonSelect>
</IonItem> </IonItem>
</IonList> </IonList>
## Objects as Values </IonContent>
);
```
## Objects as Values
```tsx
import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
const objectOptions = [
{
id: 1,
first: 'Alice',
last: 'Smith'
},
{
id: 2,
first: 'Bob',
last: 'Davis'
},
{
id: 3,
first: 'Charlie',
last: 'Rosenburg'
}
];
const compareWith = (o1: any, o2: any) => {
return o1 && o2 ? o1.id === o2.id : o1 === o2;
};
export const SelectExample: React.FC = () => (
<IonContent>
<IonList> <IonList>
<IonListHeader> <IonListHeader>
<IonLabel> <IonLabel>
@ -136,7 +135,37 @@ export const SelectExample: React.FC = () => (
</IonSelect> </IonSelect>
</IonItem> </IonItem>
</IonList> </IonList>
## Interface Options </IonContent>
);
```
## Interface Options
```tsx
import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
const customAlertOptions = {
header: 'Pizza Toppings',
subHeader: 'Select your toppings',
message: '$1.00 per topping',
translucent: true
};
const customPopoverOptions = {
header: 'Hair Color',
subHeader: 'Select your hair color',
message: 'Only select your dominant hair color'
};
const customActionSheetOptions = {
header: 'Colors',
subHeader: 'Select your favorite color'
};
export const SelectExample: React.FC = () => (
<IonContent>
<IonList> <IonList>
<IonListHeader> <IonListHeader>
<IonLabel> <IonLabel>