//Tab2.tsx
import React, { useState } from 'react';
import {
IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
IonAlert, IonButton
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';
const Tab2: React.FC = () => {
const [showAlert1, setShowAlert1] = useState(false);
const [showAlert2, setShowAlert2] = useState(false);
const [showAlert3, setShowAlert3] = useState(false);
const [showAlert4, setShowAlert4] = useState(false);
const [showAlert5, setShowAlert5] = useState(false);
const [showAlert6, setShowAlert6] = useState(false);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Tab 2</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonButton onClick={() => setShowAlert1(true)} expand="block">Show Alert 1</IonButton>
<IonButton onClick={() => setShowAlert2(true)} expand="block">Show Alert 2</IonButton>
<IonButton onClick={() => setShowAlert3(true)} expand="block">Show Alert 3</IonButton>
<IonButton onClick={() => setShowAlert4(true)} expand="block">Show Alert 4</IonButton>
<IonButton onClick={() => setShowAlert5(true)} expand="block">Show Alert 5</IonButton>
<IonButton onClick={() => setShowAlert6(true)} expand="block">Show Alert 6</IonButton>
<IonAlert
isOpen={showAlert1}
onDidDismiss={() => setShowAlert1(false)}
header={'Alert'}
subHeader={'Subtitle'}
message={'This is an alert message.'}
buttons={['OK']}
/>
<IonAlert
isOpen={showAlert2}
onDidDismiss={() => setShowAlert2(false)}
header={'Alert'}
subHeader={'Subtitle'}
message={'This is an alert message.'}
buttons={['Cancel', 'Open Modal', 'Delete']}
/>
<IonAlert
isOpen={showAlert3}
onDidDismiss={() => setShowAlert3(false)}
header={'Confirm!'}
message={'Message <strong>text</strong>!!!'}
buttons={[
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: blah => {
console.log('Confirm Cancel: blah');
}
},
{
text: 'Okay',
handler: () => {
console.log('Confirm Okay');
}
}
]}
/>
<IonAlert
isOpen={showAlert4}
onDidDismiss={() => setShowAlert4(false)}
header={'Prompt!'}
inputs={[
{
name: 'name1',
type: 'text',
placeholder: 'Placeholder 1'
},
{
name: 'name2',
type: 'text',
id: 'name2-id',
value: 'hello',
placeholder: 'Placeholder 2'
},
{
name: 'name3',
value: 'http://ionicframework.com',
type: 'url',
placeholder: 'Favorite site ever'
},
// input date with min & max
{
name: 'name4',
type: 'date',
min: '2017-03-01',
max: '2018-01-12'
},
// input date without min nor max
{
name: 'name5',
type: 'date'
},
{
name: 'name6',
type: 'number',
min: -5,
max: 10
},
{
name: 'name7',
type: 'number'
}
]}
buttons={[
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
console.log('Confirm Cancel');
}
},
{
text: 'Ok',
handler: () => {
console.log('Confirm Ok');
}
}
]}
/>
<IonAlert
isOpen={showAlert5}
onDidDismiss={() => setShowAlert5(false)}
header={'Radio'}
inputs={[
{
name: 'radio1',
type: 'radio',
label: 'Radio 1',
value: 'value1',
checked: true
},
{
name: 'radio2',
type: 'radio',
label: 'Radio 2',
value: 'value2'
},
{
name: 'radio3',
type: 'radio',
label: 'Radio 3',
value: 'value3'
},
{
name: 'radio4',
type: 'radio',
label: 'Radio 4',
value: 'value4'
},
{
name: 'radio5',
type: 'radio',
label: 'Radio 5',
value: 'value5'
},
{
name: 'radio6',
type: 'radio',
label: 'Radio 6',
value: 'value6'
}
]}
buttons={[
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
console.log('Confirm Cancel');
}
},
{
text: 'Ok',
handler: () => {
console.log('Confirm Ok');
}
}
]}
/>
<IonAlert
isOpen={showAlert6}
onDidDismiss={() => setShowAlert6(false)}
header={'Checkbox'}
inputs={[
{
name: 'checkbox1',
type: 'checkbox',
label: 'Checkbox 1',
value: 'value1',
checked: true
},
{
name: 'checkbox2',
type: 'checkbox',
label: 'Checkbox 2',
value: 'value2'
},
{
name: 'checkbox3',
type: 'checkbox',
label: 'Checkbox 3',
value: 'value3'
},
{
name: 'checkbox4',
type: 'checkbox',
label: 'Checkbox 4',
value: 'value4'
},
{
name: 'checkbox5',
type: 'checkbox',
label: 'Checkbox 5',
value: 'value5'
},
{
name: 'checkbox6',
type: 'checkbox',
label: 'Checkbox 6',
value: 'value6'
}
]}
buttons={[
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
console.log('Confirm Cancel');
}
},
{
text: 'Ok',
handler: () => {
console.log('Confirm Ok');
}
}
]}
/>
</IonContent>
</IonPage>
);
};
export default Tab2;
reference:
No comments:
Post a Comment