I want to display an alertcontroller dialog from top to bottom while opened it and do reversing while closing it. Is that possible?
I tried the below code but no luck.
let alert = this.alertCtrl.create({
title: 'Warning',
cssClass: 'alertCtrlfade ',
message: "This is not a correct form",
enableBackdropDismiss: false,
buttons: [
{
text: 'Ok',
cssClass: 'alert-btn',
handler: (data: any) => {
}
},]
});
alert.present();
In app.css
.alertCtrlfade {
transform: translate3d(0, 100, 0) !important;
}
Is that any way we can achieve this animation in alertcontroller?
Thanks
I think what you're looking for is a Toast notification.
check this link out and see if it's what you wanted ToastControllerAPI
Edit : Added some code for reference
in the typescript file
import { ToastController } from 'ionic-angular';
#Component({
templateUrl: 'example.html'
})
constructor(private toast: ToastController) {
}
exampleToast() {
let exampleNotification = this.toast.create({
message: 'This is not a correct form',
showCloseButton : true,
closeButtonText : 'Ok',
position: 'top'
}); exampleNotification.present();
}
}
This gives off the effect that you were looking for and can be used to replace AlertController.
Related
I am using vue-chartjs and chartjs-plugin-colorschemes to style a doughnut graph. I'm trying to allow the user to choose from a select which theme they prefer. I have it 90% working; the user can select a theme, hit update, and the doughnut plus its label correctly change color. What doesn't work though, is on initial page load, the doughnut has a color scheme but the legend does not.
I am currently passing a default theme down as props, and I am using a watch method to watch for changes to the theme. The error occurs inside of this watch method.
How can I dynamically update the legend label colors? Here is a minimal example of my component:
<script>
/* eslint-disable no-new */
import convert from 'convert-units';
import { Doughnut } from 'vue-chartjs';
import Chart from 'chart.js';
import { calculateCategoryWeight } from '~/helpers/functions';
import 'chartjs-plugin-colorschemes';
export default {
extends: Doughnut,
props: {
selected: {
type: Object,
default: () => {}
},
theme: {
type: String,
default: ''
}
},
data () {
const vm = this;
return {
chartData: {
labels: this.selected.categories.map(category => {
return this.$options.filters.truncate(category.name, 20);
}),
datasets: [
{
label: 'Selected Graph',
data: this.selected.categories.map(category => {
return parseFloat(convert(category).from('g').to('oz')).toFixed(2);
})
}
]
},
options: {
cutoutPercentage: 75,
legend: {
display: true,
position: 'right'
},
plugins: {
colorschemes: {
scheme: this.theme
}
},
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: false
},
}
};
},
mounted () {
this.renderChart(this.chartData, this.options);
},
watch: {
theme (newVal, oldVal) {
const { chart } = this.$data._chart;
chart.options.plugins.colorschemes.scheme = newVal; //<--- updates chart only
chart.update();
}
}
};
</script>
Well I discovered the fix finally.
Essentially in the watch method, I was digging in too deep into the chart instance. By moving up a level in the chart object, both the legend and chart colors are both updated correctly.
watch: {
theme (newVal, oldVal) {
const chart = this.$data._chart; //<-- changed here
chart.options.plugins.colorschemes.scheme = newVal;
chart.update();
}
}
I have the following setup done in my code, however the quick replies are not showing. Below shown is my state object and render code. [The quick reply is not showing, am i missing something in the code ? 1
state = {
messages : [
{
_id: 1,
text: 'My message',
"quickReplies":[
{
"contentType":"text",
"title":"Yes",
"imageUrl":"http://example.com/img/yes.png"
},
{
"contentType":"text",
"title":"No",
"imageUrl":"http://example.com/img/no.png"
}
]
}],
}
My Render method is as follows
render() {
return (
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<HeaderIconExample color ='#1976d2' title ={"Digital Assistant"} />
<GiftedChat
messages={this.state.messages}
onSend={messages => this.onSend(messages)}
onQuickReply={quickReply => this.onQuickReply(quickReply)}
user={{
_id: 1
}}
/>
<KeyboardSpacer />
</View>
);
}
However when the app executes, only the text property of the message object is shown. Please see below image for more details.
The format of quick reply is wrong:
You should change it to something like this
message: [{
_id: 1,
text: "text",
createdAt: new Date(),
user: user,
quickReplies: {
type: 'radio' // or 'checkbox'
values: [{
title: "yes"
value: "yes"
},{
title: "no"
value: "no"
}]
}
}]
I make one application with ionic 2. I am trying to get a confirmation alert before close the application.
How can I do it ?
export class MyApp{
constructor(public alert: AlertController,public platform: Platform){}
exit(){
let alert = this.alert.create({
title: 'Confirm',
message: 'Do you want to exit?',
buttons: [{
text: "exit?",
handler: () => { this.exitApp() }
}, {
text: "Cancel",
role: 'cancel'
}]
})
alert.present();
}
exitApp(){
this.platform.exitApp();
}
}
If you would like to enable back button exit, add event listener for it and call exit function.
You can use this.platform.registerBackButtonAction(this.exit) for it.
I could find by myself the right solution:
https://forum.ionicframework.com/t/show-a-confirmation-alert-before-app-close-ionic/63313
showedAlert: boolean;
constructor(..., public alertCtrl: AlertController) {
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
this.showedAlert = false;
// Confirm exit
this.platform.registerBackButtonAction(() => {
if (this.nav.length() == 1) {
if (!this.showedAlert) {
this.confirmExitApp();
} else {
this.showedAlert = false;
this.confirmAlert.dismiss();
}
}
this.nav.pop();
});
});
}
confirmExitApp() {
this.showedAlert = true;
this.confirmAlert = this.alertCtrl.create({
title: "Salir",
message: "¿ Esta seguro que desea salir de la aplicación ?",
buttons: [
{
text: 'Cancelar',
handler: () => {
this.showedAlert = false;
return;
}
},
{
text: 'Aceptar',
handler: () => {
this.platform.exitApp();
}
}
]
});
this.confirmAlert.present();
}
Ionic 2+ quick solution: In your app.component.ts try
ngOnInit() {
this.platform.registerBackButtonAction(() => {
if (this.nav.canGoBack()) {
this.nav.pop();
} else {
// Currently on root page
this.appClosePromt();
}
}, 1);
}
appClosePromt() {
let alert = this.alertCtrl.create({
title: '',
message: 'Do you want to exit?',
buttons: [
{
text: 'No',
role: 'cancel',
handler: () => {
// Dismiss
}
},
{
text: 'Exit',
handler: () => {
this.platform.exitApp();
}
}
]
});
alert.present();
}
I have problem with actionsheet in ionic 2..
This is the code
import {Page, NavController} from 'ionic-angular';
import {ActionSheet} from 'ionic-native';
#Page({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
constructor(public nav: NavController) {}
signIn(){
let sheet = ActionSheet.create({
title : 'Sign In as',
buttons : [
{
text:'Partner',
handler : () =>{
console.log('Cancel clicked');
}
},{
text:'Member',
handler : ()=>{
console.log('Cancel clicked');
}
},{
text:'Cancel',
role:'cancel',
handler : ()=>{
console.log('Cancel clicked');
}
}
]
});
this.nav.present(sheet);
}
}
when i try to ionic serve there are errors
TypeScript error: D:/xampp/htdocs/payogo/android_2/Payogo/app/pages/home/home.ts(41,33): Error TS2339: Property 'create' does not exist on type 'typeof ActionSheet'.
Please help me thanks
isnt is ActionSheet.show()
See documentation: https://github.com/EddyVerbruggen/cordova-plugin-actionsheet
I am building a small demo application using Sencha touch:
I have run into an issue with the list display followed by the itemtap even firing.I had this working in a previous application but cannot find out why its not firing in the current application
I have added itemtap methods as listeners, on the view, in the controller, but none of them fire. Any ideas on what I am missing?
Thanks In Advance for your help.
PS
Main.js
Ext.define('KapselApp.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'mainview',
requires: [
'KapselApp.view.ExpApproval',
'KapselApp.view.ExpApproval.Details',
'KapselApp.view.ExpApproval.Confirm'
],
config: {
autoDestroy: false,
navigationBar: {
ui: 'sencha',
items: [
{
xtype: 'button',
id: 'editButton',
text: 'Edit',
align: 'right',
hidden: true,
hideAnimation: Ext.os.is.Android ? false : {
type: 'fadeOut',
duration: 200
},
showAnimation: Ext.os.is.Android ? false : {
type: 'fadeIn',
duration: 200
}
},
{
xtype: 'button',
id: 'saveButton',
text: 'Save',
ui: 'sencha',
align: 'right',
hidden: true,
hideAnimation: Ext.os.is.Android ? false : {
type: 'fadeOut',
duration: 200
},
showAnimation: Ext.os.is.Android ? false : {
type: 'fadeIn',
duration: 200
}
}
]
},
items: [
{ xtype: 'expApprovals' }
]
}
});
ExpApproval.view
Ext.define('KapselApp.view.ExpApproval', {
extend: 'Ext.dataview.List',
xtype: 'expApprovals',
config: {
title: 'Expense Approval',
cls: 'x-ExpApprovals',
items: [{
xtype: 'list',
//id: 'expApproval',
store: expApprovals,
itemTpl: ['<div class="headshot" style="background-image:url(ExpType.Images/blue_btn_left.png);"></div>',
'From:{UserName} {WorkItem}',
'<div>Subject:{SUBJECT}</div>'
],
listeners: {
itemtap: function(view, index, item, e){
alert ('itemtap 1');
}
}
}],
itemtap: function(me, index, target, record){
alert ('itemtap');
//do other logic here
}
},
initialize: function() {
console.log ('KapselApp.view.ExpApproval:initialize: ');
}
});
Controller
Ext.define('KapselApp.controller.ExpApprovalApplication', {
extend: 'Ext.app.Controller',
config: {
refs: {
main: 'mainview',
editButton: '#editButton',
expApprovalDetails: 'expapproval-details',
expApprovalList: 'expApprovals',
confirmExpApprovals: 'expapproval-confirm',
contacts: 'contacts',
showContact: 'contact-show',
editContact: 'contact-edit',
saveButton: '#saveButton'
},
control: {
main: {
push: 'onMainPush',
pop: 'onMainPop'
},
editButton: {
tap: 'onContactEdit'
},
expApprovalList: {
itemtap: 'onExpApprovalsSelect'
},
saveButton: {
tap: 'onContactSave'
},
editContact: {
change: 'onContactChange'
},
'expApproval list' : {itemtap: 'onExpApprovalsSelect'},
}
},
onExpApprovalsSelect: function(list, index, node, record) {
alert ('onExpApprovalsSelect');
}
}
Ok .. found the sollution to your problem. You made the same mistake as I did. you overrode the initialize method in the list view without calling in the initiallize method "this.callParent()". By adding this in my code events started firing. I am sure it will work in yours.
So your List initialize handler should look something like this:
initialize: function(){
console.log('eventsView being initialized.');
this.callParent();
},
You can still use the code bellow to check which events are being fired for debugging in similar situations.
---- Previous post ----
I am facing a similar issue. I am extending Ext.dataview.List and have a controller capture the itemtap event but the event does not seem to be firing.
I tried adding the following code to capture all the events being fired... The list seems to fire the show event and the scroll events but no other such as itemtap, etc ...
Ext.define('Override.mixin.Observable', {
override : 'Ext.mixin.Observable',
fireEvent : function(eventName, args) {
console.log('Event:', eventName, args);
this.callOverridden(arguments);
//debugger;
},
fireAction : function(eventName) {
console.log('Action:',eventName);
this.callOverridden(arguments);
}
});
Try adding this code and see if you are getting the itemtap events.
Let me know if you make any progress.