diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md index 5f57317e9e..97aa23f15f 100644 --- a/core/src/components/checkbox/readme.md +++ b/core/src/components/checkbox/readme.md @@ -98,44 +98,58 @@ export class HomePage { ### React ```tsx -import React from 'react'; -import { IonCheckbox, IonList, IonItem, IonLabel, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react'; -const form = [ +const checkboxList = [ { val: 'Pepperoni', isChecked: true }, { val: 'Sausage', isChecked: false }, { val: 'Mushroom', isChecked: false } ]; -export const CheckboxExample: React.FC = () => ( - - {/*-- Default Checkbox --*/} - +export const CheckboxExamples: React.FC = () => { - {/*-- Disabled Checkbox --*/} - + const [checked, setChecked] = useState(false); - {/*-- Checked Checkbox --*/} - + return ( + + + + CheckboxExamples + + + + + Default Checkbox + + Checked: {JSON.stringify(checked)} + setChecked(e.detail.checked)} /> + - {/*-- Checkbox Colors --*/} - - - - - + Disabled Checkbox + - {/*-- Checkboxes in a List --*/} - - { form.map(({val, isChecked}) => ( - - {val} - - - )) } - - -); + Checkbox Colors + + + + + + + + Checkboxes in a List + + {checkboxList.map(({ val, isChecked }, i) => ( + + {val} + + + ))} + + + + ); +}; ``` diff --git a/core/src/components/checkbox/usage/react.md b/core/src/components/checkbox/usage/react.md index daeece9378..1b53de6ef7 100644 --- a/core/src/components/checkbox/usage/react.md +++ b/core/src/components/checkbox/usage/react.md @@ -1,40 +1,54 @@ ```tsx -import React from 'react'; -import { IonCheckbox, IonList, IonItem, IonLabel, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react'; -const form = [ +const checkboxList = [ { val: 'Pepperoni', isChecked: true }, { val: 'Sausage', isChecked: false }, { val: 'Mushroom', isChecked: false } ]; -export const CheckboxExample: React.FC = () => ( - - {/*-- Default Checkbox --*/} - +export const CheckboxExamples: React.FC = () => { - {/*-- Disabled Checkbox --*/} - + const [checked, setChecked] = useState(false); - {/*-- Checked Checkbox --*/} - + return ( + + + + CheckboxExamples + + + + + Default Checkbox + + Checked: {JSON.stringify(checked)} + setChecked(e.detail.checked)} /> + - {/*-- Checkbox Colors --*/} - - - - - + Disabled Checkbox + - {/*-- Checkboxes in a List --*/} - - { form.map(({val, isChecked}) => ( - - {val} - - - )) } - - -); + Checkbox Colors + + + + + + + + Checkboxes in a List + + {checkboxList.map(({ val, isChecked }, i) => ( + + {val} + + + ))} + + + + ); +}; ``` \ No newline at end of file diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md index 50ef0935bb..4ab56c2c65 100644 --- a/core/src/components/datetime/readme.md +++ b/core/src/components/datetime/readme.md @@ -415,8 +415,8 @@ customPickerOptions.pickerOptions = customPickerButtons; ### React ```tsx -import React from 'react'; -import { IonItem, IonLabel, IonDatetime, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonDatetime, IonFooter } from '@ionic/react'; const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996]; @@ -430,110 +430,128 @@ const customDayShortNames = [ 'l\u00f8r' ]; -export const DateTimeExample: React.FC = () => ( - - - MMMM - - +export const DateTimeExamples: React.FC = () => { + const [selectedDate, setSelectedDate] = useState('2012-12-15T13:47:20.789'); + return ( + + + + IonDatetime Examples + + + + + MMMM + setSelectedDate(e.detail.value!)}> + - - MM DD YY - - + + MM DD YY + setSelectedDate(e.detail.value!)}> + - - Disabled - - + + Disabled + setSelectedDate(e.detail.value!)}> + - - YYYY - console.log('Clicked Save!') - }, { - text: 'Log', - handler: () => { - console.log('Clicked Log. Do not Dismiss.'); - return false; + + YYYY + console.log('Clicked Save!') + }, { + text: 'Log', + handler: () => { + console.log('Clicked Log. Do not Dismiss.'); + return false; + } } - } - ] - }} - placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"> - + ] + }} + placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002" + value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}> + + - - MMMM YY - - + + MMMM YY + setSelectedDate(e.detail.value!)}> + - - MM/DD/YYYY - - + + MM/DD/YYYY + setSelectedDate(e.detail.value!)}> + - - MM/DD/YYYY - - + + MM/DD/YYYY + setSelectedDate(e.detail.value!)}> + - - DDD. MMM DD, YY (custom locale) - - + + DDD. MMM DD, YY (custom locale) + setSelectedDate(e.detail.value!)} + > + - - D MMM YYYY H:mm - - + + D MMM YYYY H:mm + setSelectedDate(e.detail.value!)}> + - - DDDD MMM D, YYYY - - + + DDDD MMM D, YYYY + setSelectedDate(e.detail.value!)}> + - - HH:mm - - + + HH:mm + setSelectedDate(e.detail.value!)}> + - - h:mm a - - + + h:mm a + setSelectedDate(e.detail.value!)}> + - - hh:mm A (15 min steps) - - + + hh:mm A (15 min steps) + setSelectedDate(e.detail.value!)}> + - - Leap years, summer months - - + + Leap years, summer months + setSelectedDate(e.detail.value!)}> + - - Specific days/months/years - - - -); + + Specific days/months/years + setSelectedDate(e.detail.value!)} + > + + + + + Selected Date: {selectedDate ?? '(none)'} + + + + ); +}; ``` diff --git a/core/src/components/datetime/usage/react.md b/core/src/components/datetime/usage/react.md index 1ac58b849e..b8fc967bdd 100644 --- a/core/src/components/datetime/usage/react.md +++ b/core/src/components/datetime/usage/react.md @@ -1,6 +1,6 @@ ```tsx -import React from 'react'; -import { IonItem, IonLabel, IonDatetime, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonDatetime, IonFooter } from '@ionic/react'; const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996]; @@ -14,108 +14,126 @@ const customDayShortNames = [ 'l\u00f8r' ]; -export const DateTimeExample: React.FC = () => ( - - - MMMM - - +export const DateTimeExamples: React.FC = () => { + const [selectedDate, setSelectedDate] = useState('2012-12-15T13:47:20.789'); + return ( + + + + IonDatetime Examples + + + + + MMMM + setSelectedDate(e.detail.value!)}> + - - MM DD YY - - + + MM DD YY + setSelectedDate(e.detail.value!)}> + - - Disabled - - + + Disabled + setSelectedDate(e.detail.value!)}> + - - YYYY - console.log('Clicked Save!') - }, { - text: 'Log', - handler: () => { - console.log('Clicked Log. Do not Dismiss.'); - return false; + + YYYY + console.log('Clicked Save!') + }, { + text: 'Log', + handler: () => { + console.log('Clicked Log. Do not Dismiss.'); + return false; + } } - } - ] - }} - placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"> - + ] + }} + placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002" + value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}> + + - - MMMM YY - - + + MMMM YY + setSelectedDate(e.detail.value!)}> + - - MM/DD/YYYY - - + + MM/DD/YYYY + setSelectedDate(e.detail.value!)}> + - - MM/DD/YYYY - - + + MM/DD/YYYY + setSelectedDate(e.detail.value!)}> + - - DDD. MMM DD, YY (custom locale) - - + + DDD. MMM DD, YY (custom locale) + setSelectedDate(e.detail.value!)} + > + - - D MMM YYYY H:mm - - + + D MMM YYYY H:mm + setSelectedDate(e.detail.value!)}> + - - DDDD MMM D, YYYY - - + + DDDD MMM D, YYYY + setSelectedDate(e.detail.value!)}> + - - HH:mm - - + + HH:mm + setSelectedDate(e.detail.value!)}> + - - h:mm a - - + + h:mm a + setSelectedDate(e.detail.value!)}> + - - hh:mm A (15 min steps) - - + + hh:mm A (15 min steps) + setSelectedDate(e.detail.value!)}> + - - Leap years, summer months - - + + Leap years, summer months + setSelectedDate(e.detail.value!)}> + - - Specific days/months/years - - - -); + + Specific days/months/years + setSelectedDate(e.detail.value!)} + > + + + + + Selected Date: {selectedDate ?? '(none)'} + + + + ); +}; ``` \ No newline at end of file diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md index 6837d62983..f66856769f 100644 --- a/core/src/components/input/readme.md +++ b/core/src/components/input/readme.md @@ -107,54 +107,74 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email ### React ```tsx -import React from 'react'; -import { IonInput, IonItem, IonLabel, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonInput, IonItem, IonLabel, IonList, IonItemDivider } from '@ionic/react'; -export const InputExample: React.FC = () => ( - - {/*-- Default Input --*/} - +export const InputExamples: React.FC = () => { - {/*-- Input with value --*/} - + const [text, setText] = useState(); + const [number, setNumber] = useState(); - {/*-- Input with placeholder --*/} - + return ( + + + + IonInput Examples + + + + + Default Input with Placeholder + + setText(e.detail.value!)}> + - {/*-- Input with clear button when there is a value --*/} - + Input with clear button when there is a value + + setText(e.detail.value!)} clearInput> + - {/*-- Number type input --*/} - + Number type input + + setNumber(parseInt(e.detail.value!, 10))}> + - {/*-- Disabled input --*/} - + Disabled input + + + - {/*-- Readonly input --*/} - + Readonly input + + + - {/*-- Inputs with labels --*/} - - Default Label - - + Inputs with labels - - Floating Label - - + + Default Label + + - - Fixed Label - - + + Floating Label + + - - Stacked Label - - - -); + + Fixed Label + + + + + Stacked Label + + + + + + ); +}; ``` diff --git a/core/src/components/input/usage/react.md b/core/src/components/input/usage/react.md index 7d6982c304..325c1e5b84 100644 --- a/core/src/components/input/usage/react.md +++ b/core/src/components/input/usage/react.md @@ -1,50 +1,70 @@ ```tsx -import React from 'react'; -import { IonInput, IonItem, IonLabel, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonInput, IonItem, IonLabel, IonList, IonItemDivider } from '@ionic/react'; -export const InputExample: React.FC = () => ( - - {/*-- Default Input --*/} - +export const InputExamples: React.FC = () => { - {/*-- Input with value --*/} - + const [text, setText] = useState(); + const [number, setNumber] = useState(); - {/*-- Input with placeholder --*/} - + return ( + + + + IonInput Examples + + + + + Default Input with Placeholder + + setText(e.detail.value!)}> + - {/*-- Input with clear button when there is a value --*/} - + Input with clear button when there is a value + + setText(e.detail.value!)} clearInput> + - {/*-- Number type input --*/} - + Number type input + + setNumber(parseInt(e.detail.value!, 10))}> + - {/*-- Disabled input --*/} - + Disabled input + + + - {/*-- Readonly input --*/} - + Readonly input + + + - {/*-- Inputs with labels --*/} - - Default Label - - + Inputs with labels - - Floating Label - - + + Default Label + + - - Fixed Label - - + + Floating Label + + - - Stacked Label - - - -); + + Fixed Label + + + + + Stacked Label + + + + + + ); +}; ``` \ No newline at end of file diff --git a/core/src/components/radio/readme.md b/core/src/components/radio/readme.md index c32203fda6..83690444f4 100644 --- a/core/src/components/radio/readme.md +++ b/core/src/components/radio/readme.md @@ -43,35 +43,47 @@ When radios are inside of a radio group, only one radio in the group will be che ### React ```tsx -import React from 'react'; -import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonItemDivider } from '@ionic/react'; -export const RadioExample: React.FC = () => ( - - - - - Name - +export const RadioExamples: React.FC = () => { + const [selected, setSelected] = useState('biff'); + return ( + + + + Radio Examples + + + + + setSelected(e.detail.value)}> + + Name + - - Biff - - + + Biff + + - - Griff - - + + Griff + + - - Buford - - - - - -); + + Buford + + + + Your Selection + {selected ?? '(none selected'} + + + + ); +}; ``` diff --git a/core/src/components/radio/usage/react.md b/core/src/components/radio/usage/react.md index 7db37ffc5d..aa8e66d2b0 100644 --- a/core/src/components/radio/usage/react.md +++ b/core/src/components/radio/usage/react.md @@ -1,31 +1,43 @@ ```tsx -import React from 'react'; -import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonItemDivider } from '@ionic/react'; -export const RadioExample: React.FC = () => ( - - - - - Name - +export const RadioExamples: React.FC = () => { + const [selected, setSelected] = useState('biff'); + return ( + + + + Radio Examples + + + + + setSelected(e.detail.value)}> + + Name + - - Biff - - + + Biff + + - - Griff - - + + Griff + + - - Buford - - - - - -); + + Buford + + + + Your Selection + {selected ?? '(none selected'} + + + + ); +}; ``` \ No newline at end of file diff --git a/core/src/components/range/readme.md b/core/src/components/range/readme.md index d4a7fbe6df..154f79d8e3 100644 --- a/core/src/components/range/readme.md +++ b/core/src/components/range/readme.md @@ -94,44 +94,74 @@ left or right of the range. ### React ```tsx -import React from 'react'; -import { IonList, IonItem, IonRange, IonLabel, IonIcon, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonRange, IonLabel, IonIcon, IonItemDivider } from '@ionic/react'; +import { sunny } from 'ionicons/icons'; +import { RangeValue } from '@ionic/core'; -export const RangeExample: React.FC = () => ( - - - - - +export const RangeExamples: React.FC = () => { - - - -200 - 200 - - + const [value, setValue] = useState(0); + const [rangeValue, setRangeValue] = useState<{ + lower: number; + upper: number; + }>({ lower: 0, upper: 0 }); - - - - - - + return ( + + + + IonRange Examples + + + + + Default + + setValue(e.detail.value as number)} /> + + + Value: {value} + - - - + Min & Max + + + -200 + 200 + + - - - + Icons + + + + + + - - - - - -); + With Snaps & Ticks + + + + + With Snaps & No Ticks + + + + + Dual Knobs + + setRangeValue(e.detail.value as any)} /> + + + Value: lower: {rangeValue.lower} upper: {rangeValue.upper} + + + + + ); +}; ``` diff --git a/core/src/components/range/usage/react.md b/core/src/components/range/usage/react.md index 6c791d5589..d3060b2c94 100644 --- a/core/src/components/range/usage/react.md +++ b/core/src/components/range/usage/react.md @@ -1,40 +1,70 @@ ```tsx -import React from 'react'; -import { IonList, IonItem, IonRange, IonLabel, IonIcon, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonRange, IonLabel, IonIcon, IonItemDivider } from '@ionic/react'; +import { sunny } from 'ionicons/icons'; +import { RangeValue } from '@ionic/core'; -export const RangeExample: React.FC = () => ( - - - - - +export const RangeExamples: React.FC = () => { - - - -200 - 200 - - + const [value, setValue] = useState(0); + const [rangeValue, setRangeValue] = useState<{ + lower: number; + upper: number; + }>({ lower: 0, upper: 0 }); - - - - - - + return ( + + + + IonRange Examples + + + + + Default + + setValue(e.detail.value as number)} /> + + + Value: {value} + - - - + Min & Max + + + -200 + 200 + + - - - + Icons + + + + + + - - - - - -); + With Snaps & Ticks + + + + + With Snaps & No Ticks + + + + + Dual Knobs + + setRangeValue(e.detail.value as any)} /> + + + Value: lower: {rangeValue.lower} upper: {rangeValue.upper} + + + + + ); +}; ``` diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md index b952cabfc1..7fd05b6a9b 100644 --- a/core/src/components/searchbar/readme.md +++ b/core/src/components/searchbar/readme.md @@ -121,56 +121,69 @@ By default, tapping the input will cause the keyboard to appear with the text "r ### React ```tsx -import React from 'react'; -import { IonSearchbar, IonToolbar, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSearchbar, IonFooter } from '@ionic/react'; -export const SearchbarExample: React.FC = () => ( - - {/*-- Default Searchbar --*/} - +export const SearchBarExamples: React.FC = () => { + const [searchText, setSearchText] = useState(''); + return ( + + + + IonSearchBar Examples + + + +

Default Searchbar

+ setSearchText(e.detail.value!)}> - {/*-- Searchbar with cancel button always shown --*/} - +

Searchbar with cancel button always shown

+ setSearchText(e.detail.value!)} showCancelButton="always"> - {/*-- Searchbar with cancel button never shown --*/} - +

Searchbar with cancel button never shown

+ setSearchText(e.detail.value!)} showCancelButton="never"> - {/*-- Searchbar with cancel button shown on focus --*/} - +

Searchbar with cancel button shown on focus

+ setSearchText(e.detail.value!)} showCancelButton="focus"> - {/*-- Searchbar with danger color --*/} - +

Searchbar with danger color

+ setSearchText(e.detail.value!)} color="danger"> - {/*-- Searchbar with value --*/} - +

Searchbar with telephone type

+ setSearchText(e.detail.value!)} type="tel"> - {/*-- Searchbar with telephone type --*/} - +

Searchbar with numeric inputmode

+ setSearchText(e.detail.value!)} inputmode="numeric"> - {/*-- Searchbar with numeric inputmode --*/} - +

Searchbar disabled

+ setSearchText(e.detail.value!)} disabled={true}> - {/*-- Searchbar disabled --*/} - +

Searchbar with a cancel button and custom cancel button text

+ setSearchText(e.detail.value!)} showCancelButton="focus" cancelButtonText="Custom Cancel"> - {/*-- Searchbar with a cancel button and custom cancel button text --*/} - +

Searchbar with a custom debounce - Note: debounce only works on onIonChange event

+ setSearchText(e.detail.value!)} debounce={1000}> - {/*-- Searchbar with a custom debounce --*/} - +

Animated Searchbar

+ setSearchText(e.detail.value!)} animated> - {/*-- Animated Searchbar --*/} - +

Searchbar with a placeholder

+ setSearchText(e.detail.value!)} placeholder="Filter Schedules"> - {/*-- Searchbar with a placeholder --*/} - +

Searchbar in a Toolbar

+ + setSearchText(e.detail.value!)}> + - {/*-- Searchbar in a Toolbar --*/} - - - - -); + + + + Search Text: {searchText ?? '(none)'} + + + + ); +}; ``` diff --git a/core/src/components/searchbar/usage/react.md b/core/src/components/searchbar/usage/react.md index 99f0fdb23f..b2065a416a 100644 --- a/core/src/components/searchbar/usage/react.md +++ b/core/src/components/searchbar/usage/react.md @@ -1,52 +1,65 @@ ```tsx -import React from 'react'; -import { IonSearchbar, IonToolbar, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSearchbar, IonFooter } from '@ionic/react'; -export const SearchbarExample: React.FC = () => ( - - {/*-- Default Searchbar --*/} - +export const SearchBarExamples: React.FC = () => { + const [searchText, setSearchText] = useState(''); + return ( + + + + IonSearchBar Examples + + + +

Default Searchbar

+ setSearchText(e.detail.value!)}> - {/*-- Searchbar with cancel button always shown --*/} - +

Searchbar with cancel button always shown

+ setSearchText(e.detail.value!)} showCancelButton="always"> - {/*-- Searchbar with cancel button never shown --*/} - +

Searchbar with cancel button never shown

+ setSearchText(e.detail.value!)} showCancelButton="never"> - {/*-- Searchbar with cancel button shown on focus --*/} - +

Searchbar with cancel button shown on focus

+ setSearchText(e.detail.value!)} showCancelButton="focus"> - {/*-- Searchbar with danger color --*/} - +

Searchbar with danger color

+ setSearchText(e.detail.value!)} color="danger"> - {/*-- Searchbar with value --*/} - +

Searchbar with telephone type

+ setSearchText(e.detail.value!)} type="tel"> - {/*-- Searchbar with telephone type --*/} - +

Searchbar with numeric inputmode

+ setSearchText(e.detail.value!)} inputmode="numeric"> - {/*-- Searchbar with numeric inputmode --*/} - +

Searchbar disabled

+ setSearchText(e.detail.value!)} disabled={true}> - {/*-- Searchbar disabled --*/} - +

Searchbar with a cancel button and custom cancel button text

+ setSearchText(e.detail.value!)} showCancelButton="focus" cancelButtonText="Custom Cancel"> - {/*-- Searchbar with a cancel button and custom cancel button text --*/} - +

Searchbar with a custom debounce - Note: debounce only works on onIonChange event

+ setSearchText(e.detail.value!)} debounce={1000}> - {/*-- Searchbar with a custom debounce --*/} - +

Animated Searchbar

+ setSearchText(e.detail.value!)} animated> - {/*-- Animated Searchbar --*/} - +

Searchbar with a placeholder

+ setSearchText(e.detail.value!)} placeholder="Filter Schedules"> - {/*-- Searchbar with a placeholder --*/} - +

Searchbar in a Toolbar

+ + setSearchText(e.detail.value!)}> + - {/*-- Searchbar in a Toolbar --*/} - - - - -); + + + + Search Text: {searchText ?? '(none)'} + + + + ); +}; ``` \ No newline at end of file diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index 12e57a0b57..e15c8bc89e 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -466,98 +466,116 @@ customActionSheetSelect.interfaceOptions = customActionSheetOptions; ## Single Selection ```tsx -import React from 'react'; -import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react'; -export const SelectExample: React.FC = () => ( - - - - - Single Selection - - +export const SingleSelection: React.FC = () => { - - Gender - - Female - Male - - + const [gender, setGender] = useState(); + const [hairColor, setHairColor] = useState('brown'); - - Hair Color - - Brown - Blonde - Black - Red - - - - -); + return ( + + + + + + Single Selection + + + + + Gender + setGender(e.detail.value)}> + Female + Male + + + + + Hair Color + setHairColor(e.detail.value)}> + Brown + Blonde + Black + Red + + + Your Selections + Gender: {gender ?? '(none selected)'} + Hair Color: {hairColor} + + + + ); +}; ``` ## Multiple Selection ```tsx -import React from 'react'; -import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react'; -export const SelectExample: React.FC = () => ( - - - - - Multiple Selection +export const MultipleSelection: React.FC = () => { + + const [toppings, setToppings] = useState([]); + const [pets, setPets] = useState(['bird', 'dog']); + + return ( + + + + + + Multiple Selection - + - - Toppings - - Bacon - Black Olives - Extra Cheese - Green Peppers - Mushrooms - Onions - Pepperoni - Pineapple - Sausage - Spinach - - + + Toppings + setToppings(e.detail.value)}> + Bacon + Black Olives + Extra Cheese + Green Peppers + Mushrooms + Onions + Pepperoni + Pineapple + Sausage + Spinach + + - - Pets - - - Bird - - Cat - - Dog - - Honey Badger - - - - -); + + Pets + setPets(e.detail.value)}> + Bird + Cat + Dog + Honey Badger + + + Your Selections + Toppings: {toppings.length ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'} + Pets: {pets.length ? pets.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'} + + + + ); +}; ``` ## Objects as Values ```tsx -import React from 'react'; -import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react'; -const objectOptions = [ +const users = [ { id: 1, first: 'Alice', @@ -571,45 +589,57 @@ const objectOptions = [ { id: 3, first: 'Charlie', - last: 'Rosenburg' + last: 'Rosenburg', } ]; -const compareWith = (o1: any, o2: any) => { +type User = typeof users[number]; + +const compareWith = (o1: User, o2: User) => { return o1 && o2 ? o1.id === o2.id : o1 === o2; }; -export const SelectExample: React.FC = () => ( - - - - - Objects as Values (compareWith) - - - - Users - - {objectOptions.map((object, i) => { - return ( - - {object.first} {object.last} - - ); - })} - - - - -); +export const ObjectSelection: React.FC = () => { + + const [selectedUsers, setSelectedUsers] = useState([]); + + return ( + + + + + + Objects as Values (compareWith) + + + + Users + setSelectedUsers(e.detail.value)}> + {users.map(user => ( + + {user.first} {user.last} + + ))} + + + Selected Users + {selectedUsers.length ? + selectedUsers.map(user => {user.first} {user.last}) : + (none selected) + } + + + + ); +}; ``` ## Interface Options ```tsx -import React from 'react'; -import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react'; const customAlertOptions = { header: 'Pizza Toppings', @@ -629,63 +659,86 @@ const customActionSheetOptions = { subHeader: 'Select your favorite color' }; -export const SelectExample: React.FC = () => ( - - - - - Interface Options - - +export const InterfaceOptionsSelection: React.FC = () => { - - Alert - - Bacon - Black Olives - Extra Cheese - Green Peppers - Mushrooms - Onions - Pepperoni - Pineapple - Sausage - Spinach - - + const [toppings, setToppings] = useState([]); + const [hairColor, setHairColor] = useState('brown'); + const [color, setColor] = useState(); - - Popover - - Brown - Blonde - Black - Red - - + return ( + + + + + + Interface Options + + - - Action Sheet - - Red - Purple - Yellow - Orange - Green - - - - -); + + Alert + setToppings(e.detail.value)} + value={toppings} + > + Bacon + Black Olives + Extra Cheese + Green Peppers + Mushrooms + Onions + Pepperoni + Pineapple + Sausage + Spinach + + + + + Popover + setHairColor(e.detail.value)} + value={hairColor}> + Brown + Blonde + Black + Red + + + + + Action Sheet + setColor(e.detail.value)} + value={color} + > + Red + Purple + Yellow + Orange + Green + + + + Your Selections + Toppings: {toppings.length ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'} + Hair Color: {hairColor} + Color: {color ?? '(none selected)'} + + + + ); +}; ``` diff --git a/core/src/components/select/usage/react.md b/core/src/components/select/usage/react.md index 7031c8ca51..0d2459d98f 100644 --- a/core/src/components/select/usage/react.md +++ b/core/src/components/select/usage/react.md @@ -1,98 +1,116 @@ ## Single Selection ```tsx -import React from 'react'; -import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react'; -export const SelectExample: React.FC = () => ( - - - - - Single Selection - - +export const SingleSelection: React.FC = () => { - - Gender - - Female - Male - - + const [gender, setGender] = useState(); + const [hairColor, setHairColor] = useState('brown'); - - Hair Color - - Brown - Blonde - Black - Red - - - - -); + return ( + + + + + + Single Selection + + + + + Gender + setGender(e.detail.value)}> + Female + Male + + + + + Hair Color + setHairColor(e.detail.value)}> + Brown + Blonde + Black + Red + + + Your Selections + Gender: {gender ?? '(none selected)'} + Hair Color: {hairColor} + + + + ); +}; ``` ## Multiple Selection ```tsx -import React from 'react'; -import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react'; -export const SelectExample: React.FC = () => ( - - - - - Multiple Selection +export const MultipleSelection: React.FC = () => { + + const [toppings, setToppings] = useState([]); + const [pets, setPets] = useState(['bird', 'dog']); + + return ( + + + + + + Multiple Selection - + - - Toppings - - Bacon - Black Olives - Extra Cheese - Green Peppers - Mushrooms - Onions - Pepperoni - Pineapple - Sausage - Spinach - - + + Toppings + setToppings(e.detail.value)}> + Bacon + Black Olives + Extra Cheese + Green Peppers + Mushrooms + Onions + Pepperoni + Pineapple + Sausage + Spinach + + - - Pets - - - Bird - - Cat - - Dog - - Honey Badger - - - - -); + + Pets + setPets(e.detail.value)}> + Bird + Cat + Dog + Honey Badger + + + Your Selections + Toppings: {toppings.length ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'} + Pets: {pets.length ? pets.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'} + + + + ); +}; ``` ## Objects as Values ```tsx -import React from 'react'; -import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react'; -const objectOptions = [ +const users = [ { id: 1, first: 'Alice', @@ -106,45 +124,57 @@ const objectOptions = [ { id: 3, first: 'Charlie', - last: 'Rosenburg' + last: 'Rosenburg', } ]; -const compareWith = (o1: any, o2: any) => { +type User = typeof users[number]; + +const compareWith = (o1: User, o2: User) => { return o1 && o2 ? o1.id === o2.id : o1 === o2; }; -export const SelectExample: React.FC = () => ( - - - - - Objects as Values (compareWith) - - - - Users - - {objectOptions.map((object, i) => { - return ( - - {object.first} {object.last} - - ); - })} - - - - -); +export const ObjectSelection: React.FC = () => { + + const [selectedUsers, setSelectedUsers] = useState([]); + + return ( + + + + + + Objects as Values (compareWith) + + + + Users + setSelectedUsers(e.detail.value)}> + {users.map(user => ( + + {user.first} {user.last} + + ))} + + + Selected Users + {selectedUsers.length ? + selectedUsers.map(user => {user.first} {user.last}) : + (none selected) + } + + + + ); +}; ``` ## Interface Options ```tsx -import React from 'react'; -import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react'; const customAlertOptions = { header: 'Pizza Toppings', @@ -164,61 +194,84 @@ const customActionSheetOptions = { subHeader: 'Select your favorite color' }; -export const SelectExample: React.FC = () => ( - - - - - Interface Options - - +export const InterfaceOptionsSelection: React.FC = () => { - - Alert - - Bacon - Black Olives - Extra Cheese - Green Peppers - Mushrooms - Onions - Pepperoni - Pineapple - Sausage - Spinach - - + const [toppings, setToppings] = useState([]); + const [hairColor, setHairColor] = useState('brown'); + const [color, setColor] = useState(); - - Popover - - Brown - Blonde - Black - Red - - + return ( + + + + + + Interface Options + + - - Action Sheet - - Red - Purple - Yellow - Orange - Green - - - - -); -``` + + Alert + setToppings(e.detail.value)} + value={toppings} + > + Bacon + Black Olives + Extra Cheese + Green Peppers + Mushrooms + Onions + Pepperoni + Pineapple + Sausage + Spinach + + + + + Popover + setHairColor(e.detail.value)} + value={hairColor}> + Brown + Blonde + Black + Red + + + + + Action Sheet + setColor(e.detail.value)} + value={color} + > + Red + Purple + Yellow + Orange + Green + + + + Your Selections + Toppings: {toppings.length ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'} + Hair Color: {hairColor} + Color: {color ?? '(none selected)'} + + + + ); +}; +``` \ No newline at end of file diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md index 31fd85c3d7..36805499aa 100644 --- a/core/src/components/textarea/readme.md +++ b/core/src/components/textarea/readme.md @@ -98,48 +98,63 @@ The textarea component accepts the [native textarea attributes](https://develope ### React ```tsx -import React from 'react'; -import { IonTextarea, IonItem, IonLabel, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonTextarea, IonItem, IonLabel, IonItemDivider, IonList } from '@ionic/react'; -export const TextAreaExample: React.FC = () => ( - - {/*-- Default textarea --*/} - +export const TextAreaExamples: React.FC = () => { + const [text, setText] = useState(); - {/*-- Textarea in an item with a placeholder --*/} - - - + return ( + + + + TextArea Examples + + + + + Default textarea + + setText(e.detail.value!)}> + - {/*-- Textarea in an item with a floating label --*/} - - Description - - + Textarea in an item with a placeholder + + setText(e.detail.value!)}> + - {/*-- Disabled and readonly textarea in an item with a stacked label --*/} - - Summary - - - + Textarea in an item with a floating label + + Description + setText(e.detail.value!)}> + - {/*-- Textarea that clears the value on edit --*/} - - Comment - - + Disabled and readonly textarea in an item with a stacked label + + Summary + setText(e.detail.value!)}> + + - {/*-- Textarea with custom number of rows and cols --*/} - - Notes - - - -); + Textarea that clears the value on edit + + Comment + setText(e.detail.value!)}> + + + Textarea with custom number of rows and cols + + Notes + setText(e.detail.value!)}> + + + + + ); +}; ``` diff --git a/core/src/components/textarea/usage/react.md b/core/src/components/textarea/usage/react.md index ff9fae0c1d..0e20246248 100644 --- a/core/src/components/textarea/usage/react.md +++ b/core/src/components/textarea/usage/react.md @@ -1,44 +1,59 @@ ```tsx -import React from 'react'; -import { IonTextarea, IonItem, IonLabel, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonTextarea, IonItem, IonLabel, IonItemDivider, IonList } from '@ionic/react'; -export const TextAreaExample: React.FC = () => ( - - {/*-- Default textarea --*/} - +export const TextAreaExamples: React.FC = () => { + const [text, setText] = useState(); - {/*-- Textarea in an item with a placeholder --*/} - - - + return ( + + + + TextArea Examples + + + + + Default textarea + + setText(e.detail.value!)}> + - {/*-- Textarea in an item with a floating label --*/} - - Description - - + Textarea in an item with a placeholder + + setText(e.detail.value!)}> + - {/*-- Disabled and readonly textarea in an item with a stacked label --*/} - - Summary - - - + Textarea in an item with a floating label + + Description + setText(e.detail.value!)}> + - {/*-- Textarea that clears the value on edit --*/} - - Comment - - + Disabled and readonly textarea in an item with a stacked label + + Summary + setText(e.detail.value!)}> + + - {/*-- Textarea with custom number of rows and cols --*/} - - Notes - - - -); + Textarea that clears the value on edit + + Comment + setText(e.detail.value!)}> + + + Textarea with custom number of rows and cols + + Notes + setText(e.detail.value!)}> + + + + + ); +}; ``` diff --git a/core/src/components/toggle/readme.md b/core/src/components/toggle/readme.md index 475b89b70c..2319ad6578 100644 --- a/core/src/components/toggle/readme.md +++ b/core/src/components/toggle/readme.md @@ -90,46 +90,60 @@ Toggles change the state of a single option. Toggles can be switched on or off b ### React ```tsx -import React from 'react'; -import { IonToggle, IonList, IonItem, IonLabel, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonToggle, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react'; -export const ToggleExample: React.FC = () => ( - - {/*-- Default Toggle --*/} - +export const ToggleExamples: React.FC = () => { + const [checked, setChecked] = useState(false); + return ( + + + + ToggleExamples + + + + - {/*-- Disabled Toggle --*/} - + Default Toggle + + Checked: {JSON.stringify(checked)} + setChecked(e.detail.checked)} /> + - {/*-- Checked Toggle --*/} - + Disabled Toggle + - {/*-- Toggle Colors --*/} - - - - - + Checked Toggle + - {/*-- Toggles in a List --*/} - - - Pepperoni - {}} /> - + Toggle Colors + + + + + - - Sausage - {}} disabled={true} /> - + Toggles in a List + + Pepperoni + + - - Mushrooms - {}} /> - - - -); + + Sausage + + + + + Mushrooms + + + + + + ); +}; ``` diff --git a/core/src/components/toggle/usage/react.md b/core/src/components/toggle/usage/react.md index b209ad482c..420e2ef4f9 100644 --- a/core/src/components/toggle/usage/react.md +++ b/core/src/components/toggle/usage/react.md @@ -1,42 +1,56 @@ ```tsx -import React from 'react'; -import { IonToggle, IonList, IonItem, IonLabel, IonContent } from '@ionic/react'; +import React, { useState } from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonToggle, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react'; -export const ToggleExample: React.FC = () => ( - - {/*-- Default Toggle --*/} - +export const ToggleExamples: React.FC = () => { + const [checked, setChecked] = useState(false); + return ( + + + + ToggleExamples + + + + - {/*-- Disabled Toggle --*/} - + Default Toggle + + Checked: {JSON.stringify(checked)} + setChecked(e.detail.checked)} /> + - {/*-- Checked Toggle --*/} - + Disabled Toggle + - {/*-- Toggle Colors --*/} - - - - - + Checked Toggle + - {/*-- Toggles in a List --*/} - - - Pepperoni - {}} /> - + Toggle Colors + + + + + - - Sausage - {}} disabled={true} /> - + Toggles in a List + + Pepperoni + + - - Mushrooms - {}} /> - - - -); + + Sausage + + + + + Mushrooms + + + + + + ); +}; ``` \ No newline at end of file