mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
feat(alert): add alert component/ctrl functionality
This commit is contained in:
Brandy Carney
@ -0,0 +1,68 @@
|
|||||||
|
import { Component, Listen, Method } from '@stencil/core';
|
||||||
|
import { Alert, AlertEvent, AlertOptions } from '../../index';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
tag: 'ion-alert-controller'
|
||||||
|
})
|
||||||
|
export class AlertController {
|
||||||
|
private ids = 0;
|
||||||
|
private alertResolves: { [alertId: string]: Function } = {};
|
||||||
|
private alerts: Alert[] = [];
|
||||||
|
|
||||||
|
@Method()
|
||||||
|
create(opts?: AlertOptions) {
|
||||||
|
// create ionic's wrapping ion-alert component
|
||||||
|
const alert = document.createElement('ion-alert');
|
||||||
|
|
||||||
|
const id = this.ids++;
|
||||||
|
|
||||||
|
// give this action sheet a unique id
|
||||||
|
alert.id = `alert-${id}`;
|
||||||
|
alert.style.zIndex = (20000 + id).toString();
|
||||||
|
|
||||||
|
// convert the passed in action sheet options into props
|
||||||
|
// that get passed down into the new action sheet
|
||||||
|
Object.assign(alert, opts);
|
||||||
|
|
||||||
|
// append the action sheet element to the document body
|
||||||
|
const appRoot = document.querySelector('ion-app') || document.body;
|
||||||
|
appRoot.appendChild(alert as any);
|
||||||
|
|
||||||
|
// store the resolve function to be called later up when the action sheet loads
|
||||||
|
return new Promise<Alert>(resolve => {
|
||||||
|
this.alertResolves[alert.id] = resolve;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
@Listen('body:ionAlertDidLoad')
|
||||||
|
protected viewDidLoad(ev: AlertEvent) {
|
||||||
|
const alert = ev.detail.alert;
|
||||||
|
const alertResolve = this.alertResolves[alert.id];
|
||||||
|
if (alertResolve) {
|
||||||
|
alertResolve(alert);
|
||||||
|
delete this.alertResolves[alert.id];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Listen('body:ionAlertWillPresent')
|
||||||
|
protected willPresent(ev: AlertEvent) {
|
||||||
|
this.alerts.push(ev.detail.alert);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Listen('body:ionAlertWillDismiss, body:ionAlertDidUnload')
|
||||||
|
protected willDismiss(ev: AlertEvent) {
|
||||||
|
const index = this.alerts.indexOf(ev.detail.alert);
|
||||||
|
if (index > -1) {
|
||||||
|
this.alerts.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Listen('body:keyup.escape')
|
||||||
|
protected escapeKeyUp() {
|
||||||
|
const lastAlert = this.alerts[this.alerts.length - 1];
|
||||||
|
if (lastAlert) {
|
||||||
|
lastAlert.dismiss();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
577
packages/core/src/components/alert/alert.ios.scss
Normal file
577
packages/core/src/components/alert/alert.ios.scss
Normal file
@ -0,0 +1,577 @@
|
|||||||
|
@import "../../themes/ionic.globals.ios";
|
||||||
|
@import "./alert";
|
||||||
|
|
||||||
|
// iOS Alerts
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
/// @prop - Max width of the alert
|
||||||
|
$alert-ios-max-width: 270px !default;
|
||||||
|
|
||||||
|
/// @prop - Border radius of the alert
|
||||||
|
$alert-ios-border-radius: 13px !default;
|
||||||
|
|
||||||
|
/// @prop - Background color of the alert
|
||||||
|
$alert-ios-background: #f8f8f8 !default;
|
||||||
|
|
||||||
|
/// @prop - Box shadow of the alert
|
||||||
|
$alert-ios-box-shadow: none !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-ios-head-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the alert head
|
||||||
|
$alert-ios-head-padding-top: 12px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the alert head
|
||||||
|
$alert-ios-head-padding-end: 16px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the alert head
|
||||||
|
$alert-ios-head-padding-bottom: 7px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the alert head
|
||||||
|
$alert-ios-head-padding-start: $alert-ios-head-padding-end !default;
|
||||||
|
|
||||||
|
/// @prop - Text align of the alert head
|
||||||
|
$alert-ios-head-text-align: center !default;
|
||||||
|
|
||||||
|
/// @prop - Margin top of the alert title
|
||||||
|
$alert-ios-title-margin-top: 8px !default;
|
||||||
|
|
||||||
|
/// @prop - Font size of the alert title
|
||||||
|
$alert-ios-title-font-size: 17px !default;
|
||||||
|
|
||||||
|
/// @prop - Font weight of the alert title
|
||||||
|
$alert-ios-title-font-weight: 600 !default;
|
||||||
|
|
||||||
|
/// @prop - Font size of the alert sub title
|
||||||
|
$alert-ios-sub-title-font-size: 14px !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the alert sub title
|
||||||
|
$alert-ios-sub-title-text-color: #666 !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-ios-message-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the alert message
|
||||||
|
$alert-ios-message-padding-top: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the alert message
|
||||||
|
$alert-ios-message-padding-end: 16px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the alert message
|
||||||
|
$alert-ios-message-padding-bottom: 21px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the alert message
|
||||||
|
$alert-ios-message-padding-start: $alert-ios-message-padding-end !default;
|
||||||
|
|
||||||
|
|
||||||
|
/// @prop - Font size of the alert message
|
||||||
|
$alert-ios-message-font-size: 13px !default;
|
||||||
|
|
||||||
|
/// @prop - Text align of the alert message
|
||||||
|
$alert-ios-message-text-align: center !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the alert message
|
||||||
|
$alert-ios-message-text-color: inherit !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-ios-message-padding-empty: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the alert empty message
|
||||||
|
$alert-ios-message-empty-padding-top: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the alert empty message
|
||||||
|
$alert-ios-message-empty-padding-end: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the alert empty message
|
||||||
|
$alert-ios-message-empty-padding-bottom: 12px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the alert empty message
|
||||||
|
$alert-ios-message-empty-padding-start: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Maximum height of the alert content
|
||||||
|
$alert-ios-content-max-height: 240px !default;
|
||||||
|
|
||||||
|
/// @prop - Margin top of the alert input
|
||||||
|
$alert-ios-input-margin-top: 10px !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-ios-input-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top on the alert input
|
||||||
|
$alert-ios-input-padding-top: 6px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end on the alert input
|
||||||
|
$alert-ios-input-padding-end: $alert-ios-input-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom on the alert input
|
||||||
|
$alert-ios-input-padding-bottom: $alert-ios-input-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start on the alert input
|
||||||
|
$alert-ios-input-padding-start: $alert-ios-input-padding-end !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the alert input
|
||||||
|
$alert-ios-input-border-color: #ccc !default;
|
||||||
|
|
||||||
|
/// @prop - Border of the alert input
|
||||||
|
$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color !default;
|
||||||
|
|
||||||
|
/// @prop - Border radius of the alert input
|
||||||
|
$alert-ios-input-border-radius: 4px !default;
|
||||||
|
|
||||||
|
/// @prop - Background color of the alert input
|
||||||
|
$alert-ios-input-background-color: #fff !default;
|
||||||
|
|
||||||
|
/// @prop - Flex wrap of the alert button group
|
||||||
|
$alert-ios-button-group-flex-wrap: wrap !default;
|
||||||
|
|
||||||
|
/// @prop - Flex of the alert button
|
||||||
|
$alert-ios-button-flex: 1 1 auto !default;
|
||||||
|
|
||||||
|
/// @prop - Margin of the alert button
|
||||||
|
$alert-ios-button-margin: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Min width of the alert button
|
||||||
|
$alert-ios-button-min-width: 50% !default;
|
||||||
|
|
||||||
|
/// @prop - Minimum height of the alert button
|
||||||
|
$alert-ios-button-min-height: 44px !default;
|
||||||
|
|
||||||
|
/// @prop - Font size of the alert button
|
||||||
|
$alert-ios-button-font-size: 17px !default;
|
||||||
|
|
||||||
|
/// @prop - Color of the text in the alert button
|
||||||
|
$alert-ios-button-text-color: color($colors-ios, primary) !default;
|
||||||
|
|
||||||
|
/// @prop - Background color of the alert button
|
||||||
|
$alert-ios-button-background-color: transparent !default;
|
||||||
|
|
||||||
|
/// @prop - Background color of the alert activated button
|
||||||
|
$alert-ios-button-background-color-activated: #e9e9e9 !default;
|
||||||
|
|
||||||
|
/// @prop - Border width of the alert button
|
||||||
|
$alert-ios-button-border-width: $hairlines-width !default;
|
||||||
|
|
||||||
|
/// @prop - Border style of the alert button
|
||||||
|
$alert-ios-button-border-style: solid !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the alert button
|
||||||
|
$alert-ios-button-border-color: #dbdbdf !default;
|
||||||
|
|
||||||
|
/// @prop - Border radius of the alert button
|
||||||
|
$alert-ios-button-border-radius: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Font weight of the main text on the alert button
|
||||||
|
$alert-ios-button-main-font-weight: bold !default;
|
||||||
|
|
||||||
|
/// @prop - Border top of the alert list
|
||||||
|
$alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-ios-radio-label-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top on the label for the radio alert
|
||||||
|
$alert-ios-radio-label-padding-top: 13px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end on the label for the radio alert
|
||||||
|
$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom on the label for the radio alert
|
||||||
|
$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start on the label for the radio alert
|
||||||
|
$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the label for the radio alert
|
||||||
|
$alert-ios-radio-label-text-color: initial !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the label for the checked radio alert
|
||||||
|
$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default;
|
||||||
|
|
||||||
|
/// @prop - Min width of the radio alert
|
||||||
|
$alert-ios-radio-min-width: 30px !default;
|
||||||
|
|
||||||
|
/// @prop - Top of the icon in the radio alert
|
||||||
|
$alert-ios-radio-icon-top: -7px !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-ios-radio-icon-left: 7px !default;
|
||||||
|
/// @prop - Start of the icon in the radio alert
|
||||||
|
$alert-ios-radio-icon-start: $alert-ios-radio-icon-left !default;
|
||||||
|
|
||||||
|
/// @prop - Width of the icon in the radio alert
|
||||||
|
$alert-ios-radio-icon-width: 6px !default;
|
||||||
|
|
||||||
|
/// @prop - Height of the icon in the radio alert
|
||||||
|
$alert-ios-radio-icon-height: 12px !default;
|
||||||
|
|
||||||
|
/// @prop - Border width of the icon in the radio alert
|
||||||
|
$alert-ios-radio-icon-border-width: 2px !default;
|
||||||
|
|
||||||
|
/// @prop - Border style of the icon in the radio alert
|
||||||
|
$alert-ios-radio-icon-border-style: solid !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the icon in the radio alert
|
||||||
|
$alert-ios-radio-icon-border-color: $alert-ios-button-text-color !default;
|
||||||
|
|
||||||
|
/// @prop - Transform of the icon in the radio alert
|
||||||
|
$alert-ios-radio-icon-transform: rotate(45deg) !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-ios-checkbox-label-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the label for the checkbox in the alert
|
||||||
|
$alert-ios-checkbox-label-padding-top: 13px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the label for the checkbox in the alert
|
||||||
|
$alert-ios-checkbox-label-padding-end: $alert-ios-checkbox-label-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the label for the checkbox in the alert
|
||||||
|
$alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the label for the checkbox in the alert
|
||||||
|
$alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the label for the checkbox in the alert
|
||||||
|
$alert-ios-checkbox-label-text-color: initial !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the label for the checked checkbox in the alert
|
||||||
|
$alert-ios-checkbox-label-text-color-checked: initial !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-ios-checkbox-margin: null !default;
|
||||||
|
|
||||||
|
/// @prop - Margin top of the checkbox in the alert
|
||||||
|
$alert-ios-checkbox-margin-top: 10px !default;
|
||||||
|
|
||||||
|
/// @prop - Margin end of the checkbox in the alert
|
||||||
|
$alert-ios-checkbox-margin-end: 6px !default;
|
||||||
|
|
||||||
|
/// @prop - Margin bottom of the checkbox in the alert
|
||||||
|
$alert-ios-checkbox-margin-bottom: 10px !default;
|
||||||
|
|
||||||
|
/// @prop - Margin start of the checkbox in the alert
|
||||||
|
$alert-ios-checkbox-margin-start: 16px !default;
|
||||||
|
|
||||||
|
/// @prop - Size of the checkbox in the alert
|
||||||
|
$alert-ios-checkbox-size: 21px !default;
|
||||||
|
|
||||||
|
/// @prop - Border width of the checkbox in the alert
|
||||||
|
$alert-ios-checkbox-border-width: $hairlines-width !default;
|
||||||
|
|
||||||
|
/// @prop - Border style of the checkbox in the alert
|
||||||
|
$alert-ios-checkbox-border-style: solid !default;
|
||||||
|
|
||||||
|
/// @prop - Border radius of the checkbox in the alert
|
||||||
|
$alert-ios-checkbox-border-radius: 50% !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the checkbox in the alert when off
|
||||||
|
$alert-ios-checkbox-border-color-off: $list-ios-border-color !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the checkbox in the alert when on
|
||||||
|
$alert-ios-checkbox-border-color-on: color($colors-ios, primary) !default;
|
||||||
|
|
||||||
|
/// @prop - Background color of the checkbox in the alert when off
|
||||||
|
$alert-ios-checkbox-background-color-off: $list-ios-background-color !default;
|
||||||
|
|
||||||
|
/// @prop - Background color of the checkbox in the alert when on
|
||||||
|
$alert-ios-checkbox-background-color-on: color($colors-ios, primary) !default;
|
||||||
|
|
||||||
|
/// @prop - Top of the icon in the checkbox alert
|
||||||
|
$alert-ios-checkbox-icon-top: 4px !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-ios-checkbox-icon-left: 7px !default;
|
||||||
|
/// @prop - Start of the icon in the checkbox alert
|
||||||
|
$alert-ios-checkbox-icon-start: $alert-ios-checkbox-icon-left !default;
|
||||||
|
|
||||||
|
/// @prop - Width of the icon in the checkbox alert
|
||||||
|
$alert-ios-checkbox-icon-width: 4px !default;
|
||||||
|
|
||||||
|
/// @prop - Height of the icon in the checkbox alert
|
||||||
|
$alert-ios-checkbox-icon-height: 9px !default;
|
||||||
|
|
||||||
|
/// @prop - Border width of the icon in the checkbox alert
|
||||||
|
$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width !default;
|
||||||
|
|
||||||
|
/// @prop - Border style of the icon in the checkbox alert
|
||||||
|
$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the icon in the checkbox alert
|
||||||
|
$alert-ios-checkbox-icon-border-color: $background-ios-color !default;
|
||||||
|
|
||||||
|
/// @prop - Transform of the icon in the checkbox alert
|
||||||
|
$alert-ios-checkbox-icon-transform: rotate(45deg) !default;
|
||||||
|
|
||||||
|
|
||||||
|
.alert-ios .alert-wrapper {
|
||||||
|
@include border-radius($alert-ios-border-radius);
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
max-width: $alert-ios-max-width;
|
||||||
|
|
||||||
|
background-color: $alert-ios-background;
|
||||||
|
|
||||||
|
box-shadow: $alert-ios-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// iOS Alert Header
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-ios .alert-head {
|
||||||
|
@include text-align($alert-ios-head-text-align);
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-ios-head-padding) {
|
||||||
|
@include padding($alert-ios-head-padding-top, $alert-ios-head-padding-end, $alert-ios-head-padding-bottom, $alert-ios-head-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-ios .alert-title {
|
||||||
|
@include margin($alert-ios-title-margin-top, null, null, null);
|
||||||
|
|
||||||
|
font-size: $alert-ios-title-font-size;
|
||||||
|
font-weight: $alert-ios-title-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-ios .alert-sub-title {
|
||||||
|
font-size: $alert-ios-sub-title-font-size;
|
||||||
|
color: $alert-ios-sub-title-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// iOS Alert Message
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-ios .alert-message,
|
||||||
|
.alert-ios .alert-input-group {
|
||||||
|
@include text-align($alert-ios-message-text-align);
|
||||||
|
|
||||||
|
font-size: $alert-ios-message-font-size;
|
||||||
|
color: $alert-ios-message-text-color;
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-ios-message-padding) {
|
||||||
|
@include padding($alert-ios-message-padding-top, $alert-ios-message-padding-end, $alert-ios-message-padding-bottom, $alert-ios-message-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-ios .alert-message {
|
||||||
|
max-height: $alert-ios-content-max-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-ios .alert-message:empty {
|
||||||
|
@include deprecated-variable(padding, $alert-ios-message-padding-empty) {
|
||||||
|
@include padding($alert-ios-message-empty-padding-top, $alert-ios-message-empty-padding-end, $alert-ios-message-empty-padding-bottom, $alert-ios-message-empty-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// iOS Alert Input
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-ios .alert-input {
|
||||||
|
@include appearance(none);
|
||||||
|
@include margin($alert-ios-input-margin-top, null, null, null);
|
||||||
|
@include border-radius($alert-ios-input-border-radius);
|
||||||
|
|
||||||
|
border: $alert-ios-input-border;
|
||||||
|
background-color: $alert-ios-input-background-color;
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-ios-input-padding) {
|
||||||
|
@include padding($alert-ios-input-padding-top, $alert-ios-input-padding-end, $alert-ios-input-padding-bottom, $alert-ios-input-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// iOS Alert Radio/Checkbox Group
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-ios .alert-radio-group,
|
||||||
|
.alert-ios .alert-checkbox-group {
|
||||||
|
overflow: scroll;
|
||||||
|
|
||||||
|
max-height: $alert-ios-content-max-height;
|
||||||
|
|
||||||
|
border-top: $alert-ios-list-border-top;
|
||||||
|
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-ios .alert-tappable {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
min-height: $alert-ios-button-min-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// iOS Alert Radio Label
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-ios .alert-radio-label {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
order: 0;
|
||||||
|
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
color: $alert-ios-radio-label-text-color;
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-ios-radio-label-padding) {
|
||||||
|
@include padding($alert-ios-radio-label-padding-top, $alert-ios-radio-label-padding-end, $alert-ios-radio-label-padding-bottom, $alert-ios-radio-label-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// iOS Alert Radio Label: Checked
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-ios [aria-checked=true] .alert-radio-label {
|
||||||
|
color: $alert-ios-radio-label-text-color-checked;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// iOS Alert Radio Checkmark: Unchecked
|
||||||
|
// -----------------------------------------
|
||||||
|
|
||||||
|
.alert-ios .alert-radio-icon {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
order: 1;
|
||||||
|
|
||||||
|
min-width: $alert-ios-radio-min-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// iOS Alert Radio Checked
|
||||||
|
// -----------------------------------------
|
||||||
|
|
||||||
|
.alert-ios [aria-checked=true] .alert-radio-inner {
|
||||||
|
@include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-start);
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: $alert-ios-radio-icon-width;
|
||||||
|
height: $alert-ios-radio-icon-height;
|
||||||
|
|
||||||
|
border-width: $alert-ios-radio-icon-border-width;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-left-width: 0;
|
||||||
|
border-style: $alert-ios-radio-icon-border-style;
|
||||||
|
border-color: $alert-ios-radio-icon-border-color;
|
||||||
|
transform: $alert-ios-radio-icon-transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// iOS Alert Checkbox Label
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-ios .alert-checkbox-label {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
color: $alert-ios-checkbox-label-text-color;
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-ios-checkbox-label-padding) {
|
||||||
|
@include padding($alert-ios-checkbox-label-padding-top, $alert-ios-checkbox-label-padding-end, $alert-ios-checkbox-label-padding-bottom, $alert-ios-checkbox-label-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-ios [aria-checked=true] .alert-checkbox-label {
|
||||||
|
color: $alert-ios-checkbox-label-text-color-checked;
|
||||||
|
}
|
||||||
|
|
||||||
|
// iOS Alert Checkbox Outer Circle: Unchecked
|
||||||
|
// -----------------------------------------
|
||||||
|
|
||||||
|
.alert-ios .alert-checkbox-icon {
|
||||||
|
@include border-radius($alert-ios-checkbox-border-radius);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
width: $alert-ios-checkbox-size;
|
||||||
|
height: $alert-ios-checkbox-size;
|
||||||
|
|
||||||
|
border-width: $alert-ios-checkbox-border-width;
|
||||||
|
border-style: $alert-ios-checkbox-border-style;
|
||||||
|
border-color: $alert-ios-checkbox-border-color-off;
|
||||||
|
background-color: $alert-ios-checkbox-background-color-off;
|
||||||
|
|
||||||
|
@include deprecated-variable(margin, $alert-ios-checkbox-margin) {
|
||||||
|
@include margin($alert-ios-checkbox-margin-top, $alert-ios-checkbox-margin-end, $alert-ios-checkbox-margin-bottom, $alert-ios-checkbox-margin-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// iOS Alert Checkbox Outer Circle: Checked
|
||||||
|
// -----------------------------------------
|
||||||
|
|
||||||
|
.alert-ios [aria-checked=true] .alert-checkbox-icon {
|
||||||
|
border-color: $alert-ios-checkbox-border-color-on;
|
||||||
|
background-color: $alert-ios-checkbox-background-color-on;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// iOS Alert Checkbox Inner Checkmark: Checked
|
||||||
|
// -----------------------------------------
|
||||||
|
|
||||||
|
.alert-ios [aria-checked=true] .alert-checkbox-inner {
|
||||||
|
@include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-start);
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: $alert-ios-checkbox-icon-width;
|
||||||
|
height: $alert-ios-checkbox-icon-height;
|
||||||
|
|
||||||
|
border-width: $alert-ios-checkbox-icon-border-width;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-left-width: 0;
|
||||||
|
border-style: $alert-ios-checkbox-icon-border-style;
|
||||||
|
border-color: $alert-ios-checkbox-icon-border-color;
|
||||||
|
transform: $alert-ios-checkbox-icon-transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// iOS Alert Button
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-ios .alert-button-group {
|
||||||
|
@include margin-horizontal(null, -$alert-ios-button-border-width);
|
||||||
|
|
||||||
|
flex-wrap: $alert-ios-button-group-flex-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-ios .alert-button {
|
||||||
|
@include margin($alert-ios-button-margin);
|
||||||
|
@include border-radius($alert-ios-button-border-radius);
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
flex: $alert-ios-button-flex;
|
||||||
|
|
||||||
|
min-width: $alert-ios-button-min-width;
|
||||||
|
height: $alert-ios-button-min-height;
|
||||||
|
|
||||||
|
border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
|
||||||
|
border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
|
||||||
|
font-size: $alert-ios-button-font-size;
|
||||||
|
color: $alert-ios-button-text-color;
|
||||||
|
background-color: $alert-ios-button-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-ios .alert-button:last-child {
|
||||||
|
border-right: 0;
|
||||||
|
font-weight: $alert-ios-button-main-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-ios .alert-button.activated {
|
||||||
|
background-color: $alert-ios-button-background-color-activated;
|
||||||
|
}
|
||||||
623
packages/core/src/components/alert/alert.md.scss
Normal file
623
packages/core/src/components/alert/alert.md.scss
Normal file
@ -0,0 +1,623 @@
|
|||||||
|
@import "../../themes/ionic.globals.md";
|
||||||
|
@import "./alert";
|
||||||
|
|
||||||
|
// Material Design Alerts
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
/// @prop - Max width of the alert
|
||||||
|
$alert-md-max-width: 280px !default;
|
||||||
|
|
||||||
|
/// @prop - Border radius of the alert
|
||||||
|
$alert-md-border-radius: 2px !default;
|
||||||
|
|
||||||
|
/// @prop - Background color of the alert
|
||||||
|
$alert-md-background-color: #fafafa !default;
|
||||||
|
|
||||||
|
/// @prop - Box shadow color of the alert
|
||||||
|
$alert-md-box-shadow-color: rgba(0, 0, 0, .4) !default;
|
||||||
|
|
||||||
|
/// @prop - Box shadow of the alert
|
||||||
|
$alert-md-box-shadow: 0 16px 20px $alert-md-box-shadow-color !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-md-head-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the alert head
|
||||||
|
$alert-md-head-padding-top: 24px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the alert head
|
||||||
|
$alert-md-head-padding-end: 24px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the alert head
|
||||||
|
$alert-md-head-padding-bottom: 20px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the alert head
|
||||||
|
$alert-md-head-padding-start: 24px !default;
|
||||||
|
|
||||||
|
|
||||||
|
/// @prop - Text align of the alert head
|
||||||
|
$alert-md-head-text-align: start !default;
|
||||||
|
|
||||||
|
/// @prop - Font size of the alert title
|
||||||
|
$alert-md-title-font-size: 22px !default;
|
||||||
|
|
||||||
|
/// @prop - Font size of the alert sub title
|
||||||
|
$alert-md-sub-title-font-size: 16px !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-md-message-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the alert message
|
||||||
|
$alert-md-message-padding-top: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the alert message
|
||||||
|
$alert-md-message-padding-end: 24px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the alert message
|
||||||
|
$alert-md-message-padding-bottom: 24px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the alert message
|
||||||
|
$alert-md-message-padding-start: 24px !default;
|
||||||
|
|
||||||
|
/// @prop - Font size of the alert message
|
||||||
|
$alert-md-message-font-size: 15px !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the alert message
|
||||||
|
$alert-md-message-text-color: rgba(0, 0, 0, .5) !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-md-message-padding-empty: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the alert empty message
|
||||||
|
$alert-md-message-empty-padding-top: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the alert empty message
|
||||||
|
$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the alert empty message
|
||||||
|
$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the alert empty message
|
||||||
|
$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end !default;
|
||||||
|
|
||||||
|
/// @prop - Maximum height of the alert content
|
||||||
|
$alert-md-content-max-height: 240px !default;
|
||||||
|
|
||||||
|
/// @prop - Border width of the alert input
|
||||||
|
$alert-md-input-border-width: 1px !default;
|
||||||
|
|
||||||
|
/// @prop - Border style of the alert input
|
||||||
|
$alert-md-input-border-style: solid !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the alert input
|
||||||
|
$alert-md-input-border-color: #dedede !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the alert input
|
||||||
|
$alert-md-input-text-color: #000 !default;
|
||||||
|
|
||||||
|
/// @prop - Border width of the alert input when focused
|
||||||
|
$alert-md-input-border-width-focused: 2px !default;
|
||||||
|
|
||||||
|
/// @prop - Border style of the alert input when focused
|
||||||
|
$alert-md-input-border-style-focused: $alert-md-input-border-style !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the alert input when focused
|
||||||
|
$alert-md-input-border-color-focused: color($colors-md, primary) !default;
|
||||||
|
|
||||||
|
/// @prop - Margin top of the alert input
|
||||||
|
$alert-md-input-margin-top: 5px !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-md-input-margin-right: 0 !default;
|
||||||
|
/// @prop - Margin end of the alert input
|
||||||
|
$alert-md-input-margin-end: $alert-md-input-margin-right !default;
|
||||||
|
|
||||||
|
/// @prop - Margin bottom of the alert input
|
||||||
|
$alert-md-input-margin-bottom: 5px !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-md-input-margin-left: 0 !default;
|
||||||
|
/// @prop - Margin start of the alert input
|
||||||
|
$alert-md-input-margin-start: $alert-md-input-margin-left !default;
|
||||||
|
|
||||||
|
/// @prop - Flex wrap of the alert button group
|
||||||
|
$alert-md-button-group-flex-wrap: wrap-reverse !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-md-button-group-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the alert button group
|
||||||
|
$alert-md-button-group-padding-top: 8px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the alert button group
|
||||||
|
$alert-md-button-group-padding-end: 8px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the alert button group
|
||||||
|
$alert-md-button-group-padding-bottom: 8px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the alert button group
|
||||||
|
$alert-md-button-group-padding-start: 24px !default;
|
||||||
|
|
||||||
|
/// @prop - Justify content of the alert button group
|
||||||
|
$alert-md-button-group-justify-content: flex-end !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-md-button-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the alert button
|
||||||
|
$alert-md-button-padding-top: 10px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the alert button
|
||||||
|
$alert-md-button-padding-end: $alert-md-button-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the alert button
|
||||||
|
$alert-md-button-padding-bottom: $alert-md-button-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the alert button
|
||||||
|
$alert-md-button-padding-start: $alert-md-button-padding-end !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-md-button-margin: null !default;
|
||||||
|
|
||||||
|
/// @prop - Margin top of the alert button
|
||||||
|
$alert-md-button-margin-top: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Margin end of the alert button
|
||||||
|
$alert-md-button-margin-end: 8px !default;
|
||||||
|
|
||||||
|
/// @prop - Margin bottom of the alert button
|
||||||
|
$alert-md-button-margin-bottom: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Margin start of the alert button
|
||||||
|
$alert-md-button-margin-start: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Font weight of the alert button
|
||||||
|
$alert-md-button-font-weight: 500 !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the alert button
|
||||||
|
$alert-md-button-text-color: color($colors-md, primary) !default;
|
||||||
|
|
||||||
|
/// @prop - Background color of the alert button
|
||||||
|
$alert-md-button-background-color: transparent !default;
|
||||||
|
|
||||||
|
/// @prop - Background color of the alert activated button
|
||||||
|
$alert-md-button-background-color-activated: rgba(158, 158, 158, .2) !default;
|
||||||
|
|
||||||
|
/// @prop - Border radius of the alert button
|
||||||
|
$alert-md-button-border-radius: 2px !default;
|
||||||
|
|
||||||
|
/// @prop - Text transform of the alert button
|
||||||
|
$alert-md-button-text-transform: uppercase !default;
|
||||||
|
|
||||||
|
/// @prop - Text align of the alert button
|
||||||
|
$alert-md-button-text-align: end !default;
|
||||||
|
|
||||||
|
|
||||||
|
/// @prop - Border top of the alert list
|
||||||
|
$alert-md-list-border-top: 1px solid $alert-md-input-border-color !default;
|
||||||
|
|
||||||
|
/// @prop - Border bottom of the alert list
|
||||||
|
$alert-md-list-border-bottom: $alert-md-list-border-top !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-md-radio-label-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top on the label for the radio alert
|
||||||
|
$alert-md-radio-label-padding-top: 13px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end on the label for the radio alert
|
||||||
|
$alert-md-radio-label-padding-end: 26px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom on the label for the radio alert
|
||||||
|
$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start on the label for the radio alert
|
||||||
|
$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the label for the radio alert
|
||||||
|
$alert-md-radio-label-text-color: initial !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the label for the checked radio alert
|
||||||
|
$alert-md-radio-label-text-color-checked: $alert-md-button-text-color !default;
|
||||||
|
|
||||||
|
/// @prop - Top of the alert radio
|
||||||
|
$alert-md-radio-top: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Left of the alert radio
|
||||||
|
$alert-md-radio-left: 13px !default;
|
||||||
|
|
||||||
|
/// @prop - Width of the alert radio
|
||||||
|
$alert-md-radio-width: 16px !default;
|
||||||
|
|
||||||
|
/// @prop - Height of the alert radio
|
||||||
|
$alert-md-radio-height: 16px !default;
|
||||||
|
|
||||||
|
/// @prop - Border width of the alert radio
|
||||||
|
$alert-md-radio-border-width: 2px !default;
|
||||||
|
|
||||||
|
/// @prop - Border style of the alert radio
|
||||||
|
$alert-md-radio-border-style: solid !default;
|
||||||
|
|
||||||
|
/// @prop - Border radius of the alert radio
|
||||||
|
$alert-md-radio-border-radius: 50% !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the alert radio when off
|
||||||
|
$alert-md-radio-border-color-off: darken($list-md-border-color, 40%) !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the alert radio when on
|
||||||
|
$alert-md-radio-border-color-on: $alert-md-button-text-color !default;
|
||||||
|
|
||||||
|
/// @prop - Top of the icon in the alert radio
|
||||||
|
$alert-md-radio-icon-top: 2px !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-md-radio-icon-left: 2px !default;
|
||||||
|
/// @prop - Start of the icon in the radio alert
|
||||||
|
$alert-md-radio-icon-start: $alert-md-radio-icon-left !default;
|
||||||
|
|
||||||
|
/// @prop - Width of the icon in the alert radio
|
||||||
|
$alert-md-radio-icon-width: 8px !default;
|
||||||
|
|
||||||
|
/// @prop - Height of the icon in the alert radio
|
||||||
|
$alert-md-radio-icon-height: 8px !default;
|
||||||
|
|
||||||
|
/// @prop - Border radius of the icon in the alert radio
|
||||||
|
$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius !default;
|
||||||
|
|
||||||
|
/// @prop - Transform of the icon in the alert radio when off
|
||||||
|
$alert-md-radio-icon-transform-off: scale3d(0, 0, 0) !default;
|
||||||
|
|
||||||
|
/// @prop - Transform of the icon in the alert radio when on
|
||||||
|
$alert-md-radio-icon-transform-on: scale3d(1, 1, 1) !default;
|
||||||
|
|
||||||
|
/// @prop - Transition of the icon in the alert radio
|
||||||
|
$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1) !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-md-checkbox-label-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the label for the checkbox in the alert
|
||||||
|
$alert-md-checkbox-label-padding-top: 13px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the label for the checkbox in the alert
|
||||||
|
$alert-md-checkbox-label-padding-end: 26px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the label for the checkbox in the alert
|
||||||
|
$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the label for the checkbox in the alert
|
||||||
|
$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the label for the checkbox in the alert
|
||||||
|
$alert-md-checkbox-label-text-color: initial !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the label for the checked checkbox in the alert
|
||||||
|
$alert-md-checkbox-label-text-color-checked: initial !default;
|
||||||
|
|
||||||
|
|
||||||
|
/// @prop - Top of the checkbox in the alert
|
||||||
|
$alert-md-checkbox-top: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Left of the checkbox in the alert
|
||||||
|
$alert-md-checkbox-left: 13px !default;
|
||||||
|
|
||||||
|
/// @prop - Width of the checkbox in the alert
|
||||||
|
$alert-md-checkbox-width: 16px !default;
|
||||||
|
|
||||||
|
/// @prop - Height of the checkbox in the alert
|
||||||
|
$alert-md-checkbox-height: 16px !default;
|
||||||
|
|
||||||
|
/// @prop - Border width of the checkbox in the alert
|
||||||
|
$alert-md-checkbox-border-width: 2px !default;
|
||||||
|
|
||||||
|
/// @prop - Border style of the checkbox in the alert
|
||||||
|
$alert-md-checkbox-border-style: solid !default;
|
||||||
|
|
||||||
|
/// @prop - Border radius of the checkbox in the alert
|
||||||
|
$alert-md-checkbox-border-radius: 2px !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the checkbox in the alert when off
|
||||||
|
$alert-md-checkbox-border-color-off: darken($list-md-border-color, 40%) !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the checkbox in the alert when on
|
||||||
|
$alert-md-checkbox-border-color-on: $alert-md-button-text-color !default;
|
||||||
|
|
||||||
|
|
||||||
|
/// @prop - Top of the icon in the checkbox alert
|
||||||
|
$alert-md-checkbox-icon-top: 0 !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-md-checkbox-icon-left: 3px !default;
|
||||||
|
/// @prop - Start of the icon in the checkbox alert
|
||||||
|
$alert-md-checkbox-icon-start: $alert-md-checkbox-icon-left !default;
|
||||||
|
|
||||||
|
/// @prop - Width of the icon in the checkbox alert
|
||||||
|
$alert-md-checkbox-icon-width: 6px !default;
|
||||||
|
|
||||||
|
/// @prop - Height of the icon in the checkbox alert
|
||||||
|
$alert-md-checkbox-icon-height: 10px !default;
|
||||||
|
|
||||||
|
/// @prop - Border width of the icon in the checkbox alert
|
||||||
|
$alert-md-checkbox-icon-border-width: 2px !default;
|
||||||
|
|
||||||
|
/// @prop - Border style of the icon in the checkbox alert
|
||||||
|
$alert-md-checkbox-icon-border-style: solid !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the icon in the checkbox alert
|
||||||
|
$alert-md-checkbox-icon-border-color: color-contrast($colors-md, $alert-md-checkbox-border-color-on) !default;
|
||||||
|
|
||||||
|
/// @prop - Transform of the icon in the checkbox alert
|
||||||
|
$alert-md-checkbox-icon-transform: rotate(45deg) !default;
|
||||||
|
|
||||||
|
.alert-md .alert-wrapper {
|
||||||
|
@include border-radius($alert-md-border-radius);
|
||||||
|
|
||||||
|
max-width: $alert-md-max-width;
|
||||||
|
|
||||||
|
background-color: $alert-md-background-color;
|
||||||
|
|
||||||
|
box-shadow: $alert-md-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Material Design Alert Header
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-md .alert-head {
|
||||||
|
@include text-align($alert-md-head-text-align);
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-md-head-padding) {
|
||||||
|
@include padding($alert-md-head-padding-top, $alert-md-head-padding-end, $alert-md-head-padding-bottom, $alert-md-head-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-md .alert-title {
|
||||||
|
font-size: $alert-md-title-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-md .alert-sub-title {
|
||||||
|
font-size: $alert-md-sub-title-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Material Design Alert Message
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-md .alert-message,
|
||||||
|
.alert-md .alert-input-group {
|
||||||
|
color: $alert-md-message-text-color;
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-md-message-padding) {
|
||||||
|
@include padding($alert-md-message-padding-top, $alert-md-message-padding-end, $alert-md-message-padding-bottom, $alert-md-message-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-md .alert-message {
|
||||||
|
max-height: $alert-md-content-max-height;
|
||||||
|
|
||||||
|
font-size: $alert-md-message-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-md .alert-message:empty {
|
||||||
|
@include deprecated-variable(padding, $alert-md-message-padding-empty) {
|
||||||
|
@include padding($alert-md-message-empty-padding-top, $alert-md-message-empty-padding-end, $alert-md-message-empty-padding-bottom, $alert-md-message-empty-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Material Design Alert Input
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-md .alert-input {
|
||||||
|
@include margin($alert-md-input-margin-top, $alert-md-input-margin-end, $alert-md-input-margin-bottom, $alert-md-input-margin-start);
|
||||||
|
|
||||||
|
border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color;
|
||||||
|
color: $alert-md-input-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-md .alert-input:focus {
|
||||||
|
@include margin(null, null, $alert-md-input-margin-bottom - 1, null);
|
||||||
|
|
||||||
|
border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Material Design Alert Radio/Checkbox Group
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-md .alert-radio-group,
|
||||||
|
.alert-md .alert-checkbox-group {
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
max-height: $alert-md-content-max-height;
|
||||||
|
|
||||||
|
border-top: $alert-md-list-border-top;
|
||||||
|
border-bottom: $alert-md-list-border-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-md .alert-tappable {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// TODO this should be a variable that matches item
|
||||||
|
min-height: 4.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Material Design Alert Radio
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-md .alert-radio-label {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
color: $alert-md-radio-label-text-color;
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-md-radio-label-padding) {
|
||||||
|
@include padding($alert-md-radio-label-padding-top, $alert-md-radio-label-padding-end, $alert-md-radio-label-padding-bottom, $alert-md-radio-label-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Material Design Alert Radio Unchecked Circle
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
|
.alert-md .alert-radio-icon {
|
||||||
|
@include position($alert-md-radio-top, null, null, $alert-md-radio-left);
|
||||||
|
@include border-radius($alert-md-radio-border-radius);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
width: $alert-md-radio-width;
|
||||||
|
height: $alert-md-radio-height;
|
||||||
|
|
||||||
|
border-width: $alert-md-radio-border-width;
|
||||||
|
border-style: $alert-md-radio-border-style;
|
||||||
|
border-color: $alert-md-radio-border-color-off;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Material Design Alert Radio Checked Dot
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
|
.alert-md .alert-radio-inner {
|
||||||
|
@include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-start);
|
||||||
|
@include border-radius($alert-md-radio-icon-border-radius);
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: $alert-md-radio-icon-width;
|
||||||
|
height: $alert-md-radio-icon-height;
|
||||||
|
|
||||||
|
background-color: $alert-md-radio-border-color-on;
|
||||||
|
transform: $alert-md-radio-icon-transform-off;
|
||||||
|
transition: $alert-md-radio-icon-transition;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Material Design Alert Radio Checked
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
|
.alert-md [aria-checked=true] .alert-radio-label {
|
||||||
|
color: $alert-md-radio-label-text-color-checked;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-md [aria-checked=true] .alert-radio-icon {
|
||||||
|
border-color: $alert-md-radio-border-color-on;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-md [aria-checked=true] .alert-radio-inner {
|
||||||
|
transform: $alert-md-radio-icon-transform-on;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Material Design Alert Checkbox Label
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-md .alert-checkbox-label {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
color: $alert-md-checkbox-label-text-color;
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-md-checkbox-label-padding) {
|
||||||
|
@include padding($alert-md-checkbox-label-padding-top, $alert-md-checkbox-label-padding-end, $alert-md-checkbox-label-padding-bottom, $alert-md-checkbox-label-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-md [aria-checked=true] .alert-checkbox-label {
|
||||||
|
color: $alert-md-checkbox-label-text-color-checked;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Material Design Alert Checkbox Outline: Unchecked
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-md .alert-checkbox-icon {
|
||||||
|
@include position($alert-md-checkbox-top, null, null, $alert-md-checkbox-left);
|
||||||
|
@include border-radius($alert-md-checkbox-border-radius);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
width: $alert-md-checkbox-width;
|
||||||
|
height: $alert-md-checkbox-height;
|
||||||
|
|
||||||
|
border-width: $alert-md-checkbox-border-width;
|
||||||
|
border-style: $alert-md-checkbox-border-style;
|
||||||
|
border-color: $alert-md-checkbox-border-color-off;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Material Design Alert Checkbox Checkmark: Checked
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-md [aria-checked=true] .alert-checkbox-icon {
|
||||||
|
border-color: $alert-md-checkbox-border-color-on;
|
||||||
|
background-color: $alert-md-checkbox-border-color-on;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-md [aria-checked=true] .alert-checkbox-inner {
|
||||||
|
@include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-start);
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: $alert-md-checkbox-icon-width;
|
||||||
|
height: $alert-md-checkbox-icon-height;
|
||||||
|
|
||||||
|
border-width: $alert-md-checkbox-icon-border-width;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-left-width: 0;
|
||||||
|
border-style: $alert-md-checkbox-icon-border-style;
|
||||||
|
border-color: $alert-md-checkbox-icon-border-color;
|
||||||
|
transform: $alert-md-checkbox-icon-transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Material Design Alert Button
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-md .alert-button-group {
|
||||||
|
flex-wrap: $alert-md-button-group-flex-wrap;
|
||||||
|
justify-content: $alert-md-button-group-justify-content;
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-md-button-group-padding) {
|
||||||
|
@include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-md .alert-button {
|
||||||
|
@include text-align($alert-md-button-text-align);
|
||||||
|
@include border-radius($alert-md-button-border-radius);
|
||||||
|
|
||||||
|
// necessary for ripple to work properly
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
font-weight: $alert-md-button-font-weight;
|
||||||
|
text-transform: $alert-md-button-text-transform;
|
||||||
|
color: $alert-md-button-text-color;
|
||||||
|
background-color: $alert-md-button-background-color;
|
||||||
|
|
||||||
|
@include deprecated-variable(margin, $alert-md-button-margin) {
|
||||||
|
@include margin($alert-md-button-margin-top, $alert-md-button-margin-end, $alert-md-button-margin-bottom, $alert-md-button-margin-start);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-md-button-padding) {
|
||||||
|
@include padding($alert-md-button-padding-top, $alert-md-button-padding-end, $alert-md-button-padding-bottom, $alert-md-button-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-md .alert-button.activated {
|
||||||
|
background-color: $alert-md-button-background-color-activated;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-md .alert-button .button-inner {
|
||||||
|
justify-content: $alert-md-button-group-justify-content;
|
||||||
|
}
|
||||||
121
packages/core/src/components/alert/alert.scss
Normal file
121
packages/core/src/components/alert/alert.scss
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
@import "../../themes/ionic.globals";
|
||||||
|
|
||||||
|
// Alerts
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
/// @prop - Minimum width of the alert
|
||||||
|
$alert-min-width: 250px !default;
|
||||||
|
|
||||||
|
/// @prop - Maximum height of the alert
|
||||||
|
$alert-max-height: 90% !default;
|
||||||
|
|
||||||
|
/// @prop - Line height of the alert button
|
||||||
|
$alert-button-line-height: 20px !default;
|
||||||
|
|
||||||
|
/// @prop - Font size of the alert button
|
||||||
|
$alert-button-font-size: 14px !default;
|
||||||
|
|
||||||
|
/// @prop - Color of the alert input placeholder
|
||||||
|
$alert-input-placeholder-color: #999 !default;
|
||||||
|
|
||||||
|
|
||||||
|
ion-alert {
|
||||||
|
@include position(0, 0, 0, 0);
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
z-index: $z-index-overlay;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
contain: strict;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-alert.alert-top {
|
||||||
|
@include padding(50px, null, null, null);
|
||||||
|
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-alert input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wrapper {
|
||||||
|
z-index: $z-index-overlay-wrapper;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
min-width: $alert-min-width;
|
||||||
|
max-height: $alert-max-height;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
contain: content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-title {
|
||||||
|
@include margin(0);
|
||||||
|
@include padding(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-sub-title {
|
||||||
|
@include margin(5px, 0, 0);
|
||||||
|
@include padding(0);
|
||||||
|
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-message {
|
||||||
|
overflow-y: scroll;
|
||||||
|
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-input {
|
||||||
|
@include placeholder($alert-input-placeholder-color);
|
||||||
|
@include padding(10px, 0);
|
||||||
|
|
||||||
|
border: 0;
|
||||||
|
background: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-button-group {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-button-group-vertical {
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-button {
|
||||||
|
@include margin(0);
|
||||||
|
|
||||||
|
z-index: 0;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
font-size: $alert-button-font-size;
|
||||||
|
line-height: $alert-button-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-tappable {
|
||||||
|
@include text-align(start);
|
||||||
|
@include appearance(none);
|
||||||
|
@include margin(0);
|
||||||
|
@include padding(0);
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: initial;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
389
packages/core/src/components/alert/alert.tsx
Normal file
389
packages/core/src/components/alert/alert.tsx
Normal file
@ -0,0 +1,389 @@
|
|||||||
|
|
||||||
|
import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
|
||||||
|
import { AnimationBuilder, Animation, AnimationController, Config } from '../../index';
|
||||||
|
|
||||||
|
import iOSEnterAnimation from './animations/ios.enter';
|
||||||
|
import iOSLeaveAnimation from './animations/ios.leave';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
tag: 'ion-alert',
|
||||||
|
styleUrls: {
|
||||||
|
ios: 'alert.ios.scss',
|
||||||
|
md: 'alert.md.scss',
|
||||||
|
wp: 'alert.wp.scss'
|
||||||
|
},
|
||||||
|
host: {
|
||||||
|
theme: 'alert'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
export class Alert {
|
||||||
|
private animation: Animation;
|
||||||
|
|
||||||
|
@Element() private el: HTMLElement;
|
||||||
|
|
||||||
|
@Event() private ionAlertDidLoad: EventEmitter;
|
||||||
|
@Event() private ionAlertDidPresent: EventEmitter;
|
||||||
|
@Event() private ionAlertWillPresent: EventEmitter;
|
||||||
|
@Event() private ionAlertWillDismiss: EventEmitter;
|
||||||
|
@Event() private ionAlertDidDismiss: EventEmitter;
|
||||||
|
@Event() private ionAlertDidUnload: EventEmitter;
|
||||||
|
|
||||||
|
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
|
||||||
|
@Prop({ context: 'config' }) config: Config;
|
||||||
|
|
||||||
|
@Prop() cssClass: string;
|
||||||
|
@Prop() title: string;
|
||||||
|
@Prop() subTitle: string;
|
||||||
|
@Prop() message: string;
|
||||||
|
@Prop() buttons: AlertButton[] = [];
|
||||||
|
@Prop() inputs: AlertInput[] = [];
|
||||||
|
@Prop() enableBackdropDismiss: boolean = true;
|
||||||
|
|
||||||
|
@Prop() enterAnimation: AnimationBuilder;
|
||||||
|
@Prop() exitAnimation: AnimationBuilder;
|
||||||
|
@Prop() id: string;
|
||||||
|
|
||||||
|
present() {
|
||||||
|
return new Promise<void>(resolve => {
|
||||||
|
this._present(resolve);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private _present(resolve: Function) {
|
||||||
|
if (this.animation) {
|
||||||
|
this.animation.destroy();
|
||||||
|
this.animation = null;
|
||||||
|
}
|
||||||
|
this.ionAlertWillPresent.emit({ alert: this });
|
||||||
|
|
||||||
|
// get the user's animation fn if one was provided
|
||||||
|
let animationBuilder = this.enterAnimation;
|
||||||
|
|
||||||
|
if (!animationBuilder) {
|
||||||
|
// user did not provide a custom animation fn
|
||||||
|
// decide from the config which animation to use
|
||||||
|
animationBuilder = iOSEnterAnimation;
|
||||||
|
}
|
||||||
|
|
||||||
|
// build the animation and kick it off
|
||||||
|
this.animationCtrl.create(animationBuilder, this.el).then(animation => {
|
||||||
|
this.animation = animation;
|
||||||
|
|
||||||
|
animation.onFinish((a: any) => {
|
||||||
|
a.destroy();
|
||||||
|
this.ionViewDidEnter();
|
||||||
|
resolve();
|
||||||
|
}).play();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
dismiss() {
|
||||||
|
if (this.animation) {
|
||||||
|
this.animation.destroy();
|
||||||
|
this.animation = null;
|
||||||
|
}
|
||||||
|
return new Promise(resolve => {
|
||||||
|
this.ionAlertWillDismiss.emit({ alert: this });
|
||||||
|
|
||||||
|
// get the user's animation fn if one was provided
|
||||||
|
let animationBuilder = this.exitAnimation;
|
||||||
|
if (!animationBuilder) {
|
||||||
|
// user did not provide a custom animation fn
|
||||||
|
// decide from the config which animation to use
|
||||||
|
animationBuilder = iOSLeaveAnimation;
|
||||||
|
}
|
||||||
|
|
||||||
|
// build the animation and kick it off
|
||||||
|
this.animationCtrl.create(animationBuilder, this.el).then(animation => {
|
||||||
|
this.animation = animation;
|
||||||
|
|
||||||
|
animation.onFinish((a: any) => {
|
||||||
|
a.destroy();
|
||||||
|
this.ionAlertDidDismiss.emit({ alert: this });
|
||||||
|
|
||||||
|
Context.dom.write(() => {
|
||||||
|
this.el.parentNode.removeChild(this.el);
|
||||||
|
});
|
||||||
|
|
||||||
|
resolve();
|
||||||
|
}).play();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
protected ionViewDidUnload() {
|
||||||
|
this.ionAlertDidUnload.emit({ alert: this });
|
||||||
|
}
|
||||||
|
|
||||||
|
@Listen('ionDismiss')
|
||||||
|
protected onDismiss(ev: UIEvent) {
|
||||||
|
ev.stopPropagation();
|
||||||
|
ev.preventDefault();
|
||||||
|
|
||||||
|
this.dismiss();
|
||||||
|
}
|
||||||
|
|
||||||
|
protected ionViewDidLoad() {
|
||||||
|
this.ionAlertDidLoad.emit({ alert: this });
|
||||||
|
}
|
||||||
|
|
||||||
|
protected ionViewDidEnter() {
|
||||||
|
this.ionAlertDidPresent.emit({ loading: this });
|
||||||
|
}
|
||||||
|
|
||||||
|
protected backdropClick() {
|
||||||
|
if (this.enableBackdropDismiss) {
|
||||||
|
// const opts: NavOptions = {
|
||||||
|
// minClickBlockDuration: 400
|
||||||
|
// };
|
||||||
|
this.dismiss();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
rbClick(button: any) {
|
||||||
|
console.log('rbClick', button);
|
||||||
|
// if (this.enabled) {
|
||||||
|
// this.d.inputs.forEach(input => {
|
||||||
|
// input.checked = (button === input);
|
||||||
|
// });
|
||||||
|
// this.activeId = button.id;
|
||||||
|
|
||||||
|
// if (button.handler) {
|
||||||
|
// button.handler(button);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
cbClick(button: any) {
|
||||||
|
console.log('cbClick', button);
|
||||||
|
// if (this.enabled) {
|
||||||
|
// button.checked = !button.checked;
|
||||||
|
|
||||||
|
// if (button.handler) {
|
||||||
|
// button.handler(button);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
btnClick(button: any) {
|
||||||
|
console.log('btnClick', button);
|
||||||
|
|
||||||
|
// if (!this.enabled) {
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// keep the time of the most recent button click
|
||||||
|
// this.lastClick = Date.now();
|
||||||
|
|
||||||
|
let shouldDismiss = true;
|
||||||
|
|
||||||
|
if (button.handler) {
|
||||||
|
// a handler has been provided, execute it
|
||||||
|
// pass the handler the values from the inputs
|
||||||
|
// if (button.handler(this.getValues()) === false) {
|
||||||
|
// // if the return value of the handler is false then do not dismiss
|
||||||
|
// shouldDismiss = false;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
if (shouldDismiss) {
|
||||||
|
this.dismiss();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
buttonClass(button: AlertButton): CssClassMap {
|
||||||
|
let buttonClass: string[] = !button.cssClass
|
||||||
|
? ['alert-button']
|
||||||
|
: [`alert-button`, `${button.cssClass}`];
|
||||||
|
|
||||||
|
return buttonClass.reduce((prevValue: any, cssClass: any) => {
|
||||||
|
prevValue[cssClass] = true;
|
||||||
|
return prevValue;
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderCheckbox(inputs: AlertInput[]) {
|
||||||
|
if (inputs.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="alert-checkbox-group">
|
||||||
|
{ inputs.map(i => (
|
||||||
|
<button onClick={() => this.cbClick(i)} aria-checked={i.checked} id={i.id} disabled={i.disabled} role="checkbox" class="alert-tappable alert-checkbox alert-checkbox-button">
|
||||||
|
<div class="button-inner">
|
||||||
|
<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>
|
||||||
|
<div class="alert-checkbox-label">
|
||||||
|
{i.label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderRadio(inputs: AlertInput[]) {
|
||||||
|
const hdrId = 'TODO';
|
||||||
|
const activeId = 'TODO';
|
||||||
|
|
||||||
|
if (inputs.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="alert-radio-group" role="radiogroup" aria-labelledby={hdrId} aria-activedescendant={activeId}>
|
||||||
|
{ inputs.map(i => (
|
||||||
|
<button onClick={() => this.rbClick(i)} aria-checked={i.checked} disabled={i.disabled} id={i.id} class="alert-radio-button alert-tappable alert-radio" role="radio">
|
||||||
|
<div class="button-inner">
|
||||||
|
<div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>
|
||||||
|
<div class="alert-radio-label">
|
||||||
|
{i.label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderInput(inputs: AlertInput[]) {
|
||||||
|
if (inputs.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="alert-input-group">
|
||||||
|
{ inputs.map(i => (
|
||||||
|
<div class="alert-input-wrapper">
|
||||||
|
<input
|
||||||
|
placeholder={i.placeholder}
|
||||||
|
value={i.value}
|
||||||
|
type={i.type}
|
||||||
|
min={i.min}
|
||||||
|
max={i.max}
|
||||||
|
id={i.id}
|
||||||
|
class="alert-input"/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected render() {
|
||||||
|
const hdrId = 'TODO';
|
||||||
|
const subHdrId = 'TODO';
|
||||||
|
const msgId = 'TODO';
|
||||||
|
|
||||||
|
const alertButtonGroupClass = {
|
||||||
|
'alert-button-group': true,
|
||||||
|
'alert-button-group-vertical': this.buttons.length > 2
|
||||||
|
};
|
||||||
|
|
||||||
|
let buttons = this.buttons
|
||||||
|
.map(b => {
|
||||||
|
if (typeof b === 'string') {
|
||||||
|
b = { text: b };
|
||||||
|
}
|
||||||
|
return b;
|
||||||
|
})
|
||||||
|
.filter(b => b !== null);
|
||||||
|
|
||||||
|
// An alert can be created with several different inputs. Radios,
|
||||||
|
// checkboxes and inputs are all accepted, but they cannot be mixed.
|
||||||
|
const inputTypes: string[] = [];
|
||||||
|
|
||||||
|
let inputs = this.inputs
|
||||||
|
.map(i => {
|
||||||
|
return i;
|
||||||
|
})
|
||||||
|
.filter(i => i !== null);
|
||||||
|
|
||||||
|
inputs.forEach(i => {
|
||||||
|
if (inputTypes.indexOf(i.type) < 0) {
|
||||||
|
inputTypes.push(i.type);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (inputTypes.length > 1 && (inputTypes.indexOf('checkbox') > -1 || inputTypes.indexOf('radio') > -1)) {
|
||||||
|
console.warn(`Alert cannot mix input types: ${(inputTypes.join('/'))}. Please see alert docs for more info.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
let inputType = inputTypes.length ? inputTypes[0] : null;
|
||||||
|
|
||||||
|
return [
|
||||||
|
<ion-backdrop
|
||||||
|
onClick={this.backdropClick.bind(this)}
|
||||||
|
class="alert-backdrop"
|
||||||
|
/>,
|
||||||
|
<div class="alert-wrapper">
|
||||||
|
<div class="alert-head">
|
||||||
|
{this.title
|
||||||
|
? <h2 id={hdrId} class="alert-title">{this.title}</h2>
|
||||||
|
: null}
|
||||||
|
{this.subTitle
|
||||||
|
? <h2 id={subHdrId} class="alert-sub-title">{this.subTitle}</h2>
|
||||||
|
: null}
|
||||||
|
</div>
|
||||||
|
<div id={msgId} class="alert-message" innerHTML={this.message}></div>
|
||||||
|
|
||||||
|
{(() => {
|
||||||
|
switch(inputType) {
|
||||||
|
case 'checkbox':
|
||||||
|
return this.renderCheckbox(inputs);
|
||||||
|
|
||||||
|
case 'radio':
|
||||||
|
return this.renderRadio(inputs);
|
||||||
|
|
||||||
|
default:
|
||||||
|
return this.renderInput(inputs);
|
||||||
|
};
|
||||||
|
})()}
|
||||||
|
|
||||||
|
<div class={alertButtonGroupClass}>
|
||||||
|
{buttons.map(b =>
|
||||||
|
<button class={this.buttonClass(b)} onClick={() => this.btnClick(b)}>
|
||||||
|
<span class="button-inner">
|
||||||
|
{b.text}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AlertOptions {
|
||||||
|
title?: string;
|
||||||
|
subTitle?: string;
|
||||||
|
message?: string;
|
||||||
|
cssClass?: string;
|
||||||
|
mode?: string;
|
||||||
|
inputs?: AlertInput[];
|
||||||
|
buttons?: (AlertButton|string)[];
|
||||||
|
enableBackdropDismiss?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AlertInput {
|
||||||
|
type?: string;
|
||||||
|
name?: string | number;
|
||||||
|
placeholder?: string;
|
||||||
|
value?: string;
|
||||||
|
label?: string;
|
||||||
|
checked?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
id?: string;
|
||||||
|
handler?: Function;
|
||||||
|
min?: string | number;
|
||||||
|
max?: string | number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AlertButton {
|
||||||
|
text?: string;
|
||||||
|
role?: string;
|
||||||
|
cssClass?: string;
|
||||||
|
handler?: (value: any) => boolean|void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface AlertEvent {
|
||||||
|
detail: {
|
||||||
|
alert: Alert;
|
||||||
|
};
|
||||||
|
}
|
||||||
641
packages/core/src/components/alert/alert.wp.scss
Normal file
641
packages/core/src/components/alert/alert.wp.scss
Normal file
@ -0,0 +1,641 @@
|
|||||||
|
@import "../../themes/ionic.globals.wp";
|
||||||
|
@import "./alert";
|
||||||
|
|
||||||
|
// Windows Alerts
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
/// @prop - Background of the alert backdrop
|
||||||
|
$alert-wp-backdrop-background: #fff !default;
|
||||||
|
|
||||||
|
/// @prop - Width of the alert
|
||||||
|
$alert-wp-width: 100% !default;
|
||||||
|
|
||||||
|
/// @prop - Max width of the alert
|
||||||
|
$alert-wp-max-width: 520px !default;
|
||||||
|
|
||||||
|
/// @prop - Border width of the alert
|
||||||
|
$alert-wp-border-width: 1px !default;
|
||||||
|
|
||||||
|
/// @prop - Border style of the alert
|
||||||
|
$alert-wp-border-style: solid !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the alert
|
||||||
|
$alert-wp-border-color: color($colors-wp, primary) !default;
|
||||||
|
|
||||||
|
/// @prop - Border radius of the alert
|
||||||
|
$alert-wp-border-radius: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Background color of the alert
|
||||||
|
$alert-wp-background: #e6e6e6 !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-wp-head-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the alert head
|
||||||
|
$alert-wp-head-padding-top: 20px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the alert head
|
||||||
|
$alert-wp-head-padding-end: 22px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the alert head
|
||||||
|
$alert-wp-head-padding-bottom: 5px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the alert head
|
||||||
|
$alert-wp-head-padding-start: 22px !default;
|
||||||
|
|
||||||
|
/// @prop - Text align of the alert head
|
||||||
|
$alert-wp-head-text-align: start !default;
|
||||||
|
|
||||||
|
/// @prop - Font size of the alert title
|
||||||
|
$alert-wp-title-font-size: 20px !default;
|
||||||
|
|
||||||
|
/// @prop - Font weight of the alert title
|
||||||
|
$alert-wp-title-font-weight: 400 !default;
|
||||||
|
|
||||||
|
/// @prop - Font size of the alert sub title
|
||||||
|
$alert-wp-sub-title-font-size: 16px !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-wp-message-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the alert message
|
||||||
|
$alert-wp-message-padding-top: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the alert message
|
||||||
|
$alert-wp-message-padding-end: 22px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the alert message
|
||||||
|
$alert-wp-message-padding-bottom: 8px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the alert message
|
||||||
|
$alert-wp-message-padding-start: 22px !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-wp-message-padding-empty: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the alert empty message
|
||||||
|
$alert-wp-message-empty-padding-top: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the alert empty message
|
||||||
|
$alert-wp-message-empty-padding-end: $alert-wp-message-empty-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the alert empty message
|
||||||
|
$alert-wp-message-empty-padding-bottom: $alert-wp-message-empty-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the alert empty message
|
||||||
|
$alert-wp-message-empty-padding-start: $alert-wp-message-empty-padding-end !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the alert message
|
||||||
|
$alert-wp-message-text-color: #000 !default;
|
||||||
|
|
||||||
|
/// @prop - Font size of the alert message
|
||||||
|
$alert-wp-message-font-size: 13px !default;
|
||||||
|
|
||||||
|
/// @prop - Maximum height of the alert content
|
||||||
|
$alert-wp-content-max-height: 240px !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-wp-input-margin: null !default;
|
||||||
|
|
||||||
|
/// @prop - Margin top of the alert input
|
||||||
|
$alert-wp-input-margin-top: 5px !default;
|
||||||
|
|
||||||
|
/// @prop - Margin end of the alert input
|
||||||
|
$alert-wp-input-margin-end: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Margin bottom of the alert input
|
||||||
|
$alert-wp-input-margin-bottom: 5px !default;
|
||||||
|
|
||||||
|
/// @prop - Margin start of the alert input
|
||||||
|
$alert-wp-input-margin-start: 0 !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-wp-input-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top on the alert input
|
||||||
|
$alert-wp-input-padding-top: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end on the alert input
|
||||||
|
$alert-wp-input-padding-end: 8px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom on the alert input
|
||||||
|
$alert-wp-input-padding-bottom: $alert-wp-input-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start on the alert input
|
||||||
|
$alert-wp-input-padding-start: $alert-wp-input-padding-end !default;
|
||||||
|
|
||||||
|
/// @prop - Border width of the alert input
|
||||||
|
$alert-wp-input-border-width: 2px !default;
|
||||||
|
|
||||||
|
/// @prop - Border style of the alert input
|
||||||
|
$alert-wp-input-border-style: $alert-wp-border-style !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the alert input
|
||||||
|
$alert-wp-input-border-color: $input-wp-border-color !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the alert input when focused
|
||||||
|
$alert-wp-input-border-color-focused: color($colors-wp, primary) !default;
|
||||||
|
|
||||||
|
/// @prop - Line height of the alert input
|
||||||
|
$alert-wp-input-line-height: 3rem !default;
|
||||||
|
|
||||||
|
/// @prop - Color of the text in the alert input
|
||||||
|
$alert-wp-input-text-color: #000 !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-wp-button-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the alert button
|
||||||
|
$alert-wp-button-padding-top: 5px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the alert button
|
||||||
|
$alert-wp-button-padding-end: $alert-wp-button-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the alert button
|
||||||
|
$alert-wp-button-padding-bottom: $alert-wp-button-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the alert button
|
||||||
|
$alert-wp-button-padding-start: $alert-wp-button-padding-end !default;
|
||||||
|
|
||||||
|
/// @prop - Width of the alert button
|
||||||
|
$alert-wp-button-width: 49.5% !default;
|
||||||
|
|
||||||
|
/// @prop - Border radius of the alert button
|
||||||
|
$alert-wp-button-border-radius: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Font weight of the alert button
|
||||||
|
$alert-wp-button-font-weight: 400 !default;
|
||||||
|
|
||||||
|
/// @prop - Color of the text in the alert button
|
||||||
|
$alert-wp-button-text-color: #000 !default;
|
||||||
|
|
||||||
|
/// @prop - Background color of the alert button
|
||||||
|
$alert-wp-button-background: #b8b8b8 !default;
|
||||||
|
|
||||||
|
/// @prop - Background color of the activated alert button
|
||||||
|
$alert-wp-button-background-activated: color-shade($alert-wp-button-background) !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-wp-button-margin-right: 1% !default;
|
||||||
|
/// @prop - Margin end of the alert button
|
||||||
|
$alert-wp-button-margin-end: $alert-wp-button-margin-right !default;
|
||||||
|
|
||||||
|
$alert-wp-button-group-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the alert button group
|
||||||
|
$alert-wp-button-group-padding-top: 20px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the alert button group
|
||||||
|
$alert-wp-button-group-padding-end: 22px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the alert button group
|
||||||
|
$alert-wp-button-group-padding-bottom: 20px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the alert button group
|
||||||
|
$alert-wp-button-group-padding-start: 22px !default;
|
||||||
|
|
||||||
|
|
||||||
|
/// @prop - Justify content of the alert button group
|
||||||
|
$alert-wp-button-group-justify-content: flex-end !default;
|
||||||
|
|
||||||
|
/// @prop - Flex wrap of the alert button group
|
||||||
|
$alert-wp-button-group-flex-wrap: wrap-reverse !default;
|
||||||
|
|
||||||
|
/// @prop - Vertical width of the vertical alert button group
|
||||||
|
$alert-wp-button-group-vertical-width: 100% !default;
|
||||||
|
|
||||||
|
/// @prop - Margin top of the vertical alert button group
|
||||||
|
$alert-wp-button-group-vertical-margin-top: 5px !default;
|
||||||
|
|
||||||
|
|
||||||
|
/// @prop - Background color of the radio alert
|
||||||
|
$alert-wp-radio-background: color($colors-wp, primary) !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the radio alert
|
||||||
|
$alert-wp-radio-border-color: $input-wp-border-color !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-wp-radio-label-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the label for the radio alert
|
||||||
|
$alert-wp-radio-label-padding-top: 13px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the label for the radio alert
|
||||||
|
$alert-wp-radio-label-padding-end: 26px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the label for the radio alert
|
||||||
|
$alert-wp-radio-label-padding-bottom: $alert-wp-radio-label-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the label for the radio alert
|
||||||
|
$alert-wp-radio-label-padding-start: $alert-wp-radio-label-padding-end !default;
|
||||||
|
|
||||||
|
|
||||||
|
/// @prop - Text color of the label for the radio alert
|
||||||
|
$alert-wp-radio-label-text-color: initial !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the label for the checked radio alert
|
||||||
|
$alert-wp-radio-label-text-color-checked: $alert-wp-button-text-color !default;
|
||||||
|
|
||||||
|
/// @prop - Top of the radio alert
|
||||||
|
$alert-wp-radio-top: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Left of the radio alert
|
||||||
|
$alert-wp-radio-left: 13px !default;
|
||||||
|
|
||||||
|
/// @prop - Width of the radio alert
|
||||||
|
$alert-wp-radio-width: 16px !default;
|
||||||
|
|
||||||
|
/// @prop - Height of the radio alert
|
||||||
|
$alert-wp-radio-height: 16px !default;
|
||||||
|
|
||||||
|
/// @prop - Border width of the radio alert
|
||||||
|
$alert-wp-radio-border-width: 2px !default;
|
||||||
|
|
||||||
|
/// @prop - Border style of the radio alert
|
||||||
|
$alert-wp-radio-border-style: solid !default;
|
||||||
|
|
||||||
|
/// @prop - Border radius of the radio alert
|
||||||
|
$alert-wp-radio-border-radius: 50% !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the radio alert
|
||||||
|
$alert-wp-radio-border-color: $input-wp-border-color !default;
|
||||||
|
|
||||||
|
/// @prop - Top of the icon in the radio alert
|
||||||
|
$alert-wp-radio-icon-top: 2px !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-wp-radio-icon-left: 2px !default;
|
||||||
|
/// @prop - Start of the icon in the radio alert
|
||||||
|
$alert-wp-radio-icon-start: $alert-wp-radio-icon-left !default;
|
||||||
|
|
||||||
|
/// @prop - Width of the icon in the radio alert
|
||||||
|
$alert-wp-radio-icon-width: 8px !default;
|
||||||
|
|
||||||
|
/// @prop - Height of the icon in the radio alert
|
||||||
|
$alert-wp-radio-icon-height: 8px !default;
|
||||||
|
|
||||||
|
/// @prop - Border radius of the icon in the radio alert
|
||||||
|
$alert-wp-radio-icon-border-radius: $alert-wp-radio-border-radius !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-wp-checkbox-label-padding: null !default;
|
||||||
|
|
||||||
|
/// @prop - Padding top of the label for the checkbox in the alert
|
||||||
|
$alert-wp-checkbox-label-padding-top: 13px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end of the label for the checkbox in the alert
|
||||||
|
$alert-wp-checkbox-label-padding-end: 26px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom of the label for the checkbox in the alert
|
||||||
|
$alert-wp-checkbox-label-padding-bottom: $alert-wp-checkbox-label-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start of the label for the checkbox in the alert
|
||||||
|
$alert-wp-checkbox-label-padding-start: $alert-wp-checkbox-label-padding-end !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the label for the checkbox in the alert
|
||||||
|
$alert-wp-checkbox-label-text-color: initial !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the label for the checked checkbox in the alert
|
||||||
|
$alert-wp-checkbox-label-text-color-checked: initial !default;
|
||||||
|
|
||||||
|
/// @prop - Top of the checkbox in the alert
|
||||||
|
$alert-wp-checkbox-top: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Left of the checkbox in the alert
|
||||||
|
$alert-wp-checkbox-left: 13px !default;
|
||||||
|
|
||||||
|
/// @prop - Width of the checkbox in the alert
|
||||||
|
$alert-wp-checkbox-width: 16px !default;
|
||||||
|
|
||||||
|
/// @prop - Height of the checkbox in the alert
|
||||||
|
$alert-wp-checkbox-height: 16px !default;
|
||||||
|
|
||||||
|
/// @prop - Border width of the checkbox in the alert
|
||||||
|
$alert-wp-checkbox-border-width: 2px !default;
|
||||||
|
|
||||||
|
/// @prop - Border style of the checkbox in the alert
|
||||||
|
$alert-wp-checkbox-border-style: solid !default;
|
||||||
|
|
||||||
|
/// @prop - Border radius of the checkbox in the alert
|
||||||
|
$alert-wp-checkbox-border-radius: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the checkbox in the alert
|
||||||
|
$alert-wp-checkbox-border-color: $input-wp-border-color !default;
|
||||||
|
|
||||||
|
/// @prop - Background color of the checkbox in the alert when off
|
||||||
|
$alert-wp-checkbox-background-off: transparent !default;
|
||||||
|
|
||||||
|
/// @prop - Background color of the checkbox in the alert when on
|
||||||
|
$alert-wp-checkbox-background-on: color($colors-wp, primary) !default;
|
||||||
|
|
||||||
|
/// @prop - Top of the icon in the checkbox alert
|
||||||
|
$alert-wp-checkbox-icon-top: -2px !default;
|
||||||
|
|
||||||
|
// deprecated
|
||||||
|
$alert-wp-checkbox-icon-left: 3px !default;
|
||||||
|
/// @prop - Start of the icon in the checkbox alert
|
||||||
|
$alert-wp-checkbox-icon-start: $alert-wp-checkbox-icon-left !default;
|
||||||
|
|
||||||
|
/// @prop - Width of the icon in the checkbox alert
|
||||||
|
$alert-wp-checkbox-icon-width: 6px !default;
|
||||||
|
|
||||||
|
/// @prop - Height of the icon in the checkbox alert
|
||||||
|
$alert-wp-checkbox-icon-height: 12px !default;
|
||||||
|
|
||||||
|
/// @prop - Border width of the icon in the checkbox alert
|
||||||
|
$alert-wp-checkbox-icon-border-width: 1px !default;
|
||||||
|
|
||||||
|
/// @prop - Border style of the icon in the checkbox alert
|
||||||
|
$alert-wp-checkbox-icon-border-style: solid !default;
|
||||||
|
|
||||||
|
/// @prop - Border color of the icon in the checkbox alert
|
||||||
|
$alert-wp-checkbox-icon-border-color: color-contrast($colors-wp, $alert-wp-checkbox-background-on) !default;
|
||||||
|
|
||||||
|
/// @prop - Transform of the icon in the checkbox alert
|
||||||
|
$alert-wp-checkbox-icon-transform: rotate(45deg) !default;
|
||||||
|
|
||||||
|
|
||||||
|
.alert-wp ion-backdrop {
|
||||||
|
background: $alert-wp-backdrop-background;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp .alert-wrapper {
|
||||||
|
@include border-radius($alert-wp-border-radius);
|
||||||
|
|
||||||
|
width: $alert-wp-width;
|
||||||
|
max-width: $alert-wp-max-width;
|
||||||
|
|
||||||
|
border: $alert-wp-border-width $alert-wp-border-style $alert-wp-border-color;
|
||||||
|
background: $alert-wp-background;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Windows Alert Header
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-wp .alert-head {
|
||||||
|
@include text-align($alert-wp-head-text-align);
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-wp-head-padding) {
|
||||||
|
@include padding($alert-wp-head-padding-top, $alert-wp-head-padding-end, $alert-wp-head-padding-bottom, $alert-wp-head-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp .alert-title {
|
||||||
|
font-size: $alert-wp-title-font-size;
|
||||||
|
font-weight: $alert-wp-title-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp .alert-sub-title {
|
||||||
|
font-size: $alert-wp-sub-title-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Windows Alert Message
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-wp .alert-message,
|
||||||
|
.alert-wp .alert-input-group {
|
||||||
|
color: $alert-wp-message-text-color;
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-wp-message-padding) {
|
||||||
|
@include padding($alert-wp-message-padding-top, $alert-wp-message-padding-end, $alert-wp-message-padding-bottom, $alert-wp-message-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp .alert-message {
|
||||||
|
max-height: $alert-wp-content-max-height;
|
||||||
|
|
||||||
|
font-size: $alert-wp-message-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp .alert-message:empty {
|
||||||
|
@include deprecated-variable(padding, $alert-wp-message-padding-empty) {
|
||||||
|
@include padding($alert-wp-message-empty-padding-top, $alert-wp-message-empty-padding-end, $alert-wp-message-empty-padding-bottom, $alert-wp-message-empty-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Windows Alert Input
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-wp .alert-input {
|
||||||
|
border: $alert-wp-input-border-width $alert-wp-input-border-style $alert-wp-input-border-color;
|
||||||
|
line-height: $alert-wp-input-line-height;
|
||||||
|
color: $alert-wp-input-text-color;
|
||||||
|
|
||||||
|
@include deprecated-variable(margin, $alert-wp-input-margin) {
|
||||||
|
@include margin($alert-wp-input-margin-top, $alert-wp-input-margin-end, $alert-wp-input-margin-bottom, $alert-wp-input-margin-start);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-wp-input-padding) {
|
||||||
|
@include padding($alert-wp-input-padding-top, $alert-wp-input-padding-end, $alert-wp-input-padding-bottom, $alert-wp-input-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp .alert-input:focus {
|
||||||
|
border-color: $alert-wp-input-border-color-focused;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Windows Alert Radio/Checkbox Group
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-wp .alert-radio-group,
|
||||||
|
.alert-wp .alert-checkbox-group {
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
max-height: $alert-wp-content-max-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp .alert-tappable {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// TODO this should be a variable that matches item
|
||||||
|
min-height: 4.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Windows Alert Radio Label
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-wp .alert-radio-label {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
color: $alert-wp-radio-label-text-color;
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-wp-radio-label-padding) {
|
||||||
|
@include padding($alert-wp-radio-label-padding-top, $alert-wp-radio-label-padding-end, $alert-wp-radio-label-padding-bottom, $alert-wp-radio-label-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Windows Alert Radio Unchecked Circle
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
|
.alert-wp .alert-radio-icon {
|
||||||
|
@include position($alert-wp-radio-top, null, null, $alert-wp-radio-left);
|
||||||
|
@include margin(0);
|
||||||
|
@include border-radius($alert-wp-radio-border-radius);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
width: $alert-wp-radio-width;
|
||||||
|
height: $alert-wp-radio-height;
|
||||||
|
|
||||||
|
border-width: $alert-wp-radio-border-width;
|
||||||
|
border-style: $alert-wp-radio-border-style;
|
||||||
|
border-color: $alert-wp-radio-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Windows Alert Radio Checked Dot
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
|
.alert-wp .alert-radio-inner {
|
||||||
|
@include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-start);
|
||||||
|
@include border-radius($alert-wp-radio-icon-border-radius);
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
width: $alert-wp-radio-icon-width;
|
||||||
|
height: $alert-wp-radio-icon-height;
|
||||||
|
|
||||||
|
background: $alert-wp-radio-background;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Windows Alert Radio Checked
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
|
.alert-wp [aria-checked=true] .alert-radio-label {
|
||||||
|
color: $alert-wp-radio-label-text-color-checked;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp [aria-checked=true] .alert-radio-icon {
|
||||||
|
border-color: $alert-wp-radio-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp [aria-checked=true] .alert-radio-inner {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Windows Alert Checkbox Label
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-wp .alert-checkbox-label {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
color: $alert-wp-checkbox-label-text-color;
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-wp-checkbox-label-padding) {
|
||||||
|
@include padding($alert-wp-checkbox-label-padding-top, $alert-wp-checkbox-label-padding-end, $alert-wp-checkbox-label-padding-bottom, $alert-wp-checkbox-label-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp [aria-checked=true] .alert-checkbox-label {
|
||||||
|
color: $alert-wp-checkbox-label-text-color-checked;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Windows Alert Checkbox Outline: Unchecked
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-wp .alert-checkbox-icon {
|
||||||
|
@include position($alert-wp-checkbox-top, null, null, $alert-wp-checkbox-left);
|
||||||
|
@include border-radius($alert-wp-checkbox-border-radius);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
width: $alert-wp-checkbox-width;
|
||||||
|
height: $alert-wp-checkbox-height;
|
||||||
|
|
||||||
|
border-width: $alert-wp-checkbox-border-width;
|
||||||
|
border-style: $alert-wp-checkbox-border-style;
|
||||||
|
border-color: $alert-wp-checkbox-border-color;
|
||||||
|
background: $alert-wp-checkbox-background-off;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Windows Alert Checkbox Outline: Checked
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-wp [aria-checked=true] .alert-checkbox-icon {
|
||||||
|
border-color: $alert-wp-checkbox-background-on;
|
||||||
|
background: $alert-wp-checkbox-background-on;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Windows Alert Checkbox Checkmark: Checked
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-wp [aria-checked=true] .alert-checkbox-inner {
|
||||||
|
@include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-start);
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: $alert-wp-checkbox-icon-width;
|
||||||
|
height: $alert-wp-checkbox-icon-height;
|
||||||
|
|
||||||
|
border-width: $alert-wp-checkbox-icon-border-width;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-left-width: 0;
|
||||||
|
border-style: $alert-wp-checkbox-icon-border-style;
|
||||||
|
border-color: $alert-wp-checkbox-icon-border-color;
|
||||||
|
transform: $alert-wp-checkbox-icon-transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Windows Alert Button
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.alert-wp .alert-button-group {
|
||||||
|
flex-wrap: $alert-wp-button-group-flex-wrap;
|
||||||
|
justify-content: $alert-wp-button-group-justify-content;
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-wp-button-group-padding) {
|
||||||
|
@include padding($alert-wp-button-group-padding-top, $alert-wp-button-group-padding-end, $alert-wp-button-group-padding-bottom, $alert-wp-button-group-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp .alert-button-group-vertical .alert-button {
|
||||||
|
@include margin($alert-wp-button-group-vertical-margin-top, null, null, null);
|
||||||
|
|
||||||
|
width: $alert-wp-button-group-vertical-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp .alert-button-group-vertical .alert-button:first-child:not(:only-child) {
|
||||||
|
@include margin(0, 0, null, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp .alert-button {
|
||||||
|
@include border-radius($alert-wp-button-border-radius);
|
||||||
|
|
||||||
|
width: $alert-wp-button-width;
|
||||||
|
|
||||||
|
font-weight: $alert-wp-button-font-weight;
|
||||||
|
color: $alert-wp-button-text-color;
|
||||||
|
background: $alert-wp-button-background;
|
||||||
|
|
||||||
|
@include deprecated-variable(padding, $alert-wp-button-padding) {
|
||||||
|
@include padding($alert-wp-button-padding-top, $alert-wp-button-padding-end, $alert-wp-button-padding-bottom, $alert-wp-button-padding-start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp .alert-button:first-child:not(:only-child) {
|
||||||
|
@include margin-horizontal(null, $alert-wp-button-margin-end);
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-wp .alert-button.activated {
|
||||||
|
background: $alert-wp-button-background-activated;
|
||||||
|
}
|
||||||
25
packages/core/src/components/alert/animations/ios.enter.ts
Normal file
25
packages/core/src/components/alert/animations/ios.enter.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { Animation } from '../../../index';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* iOS Alert Enter Animation
|
||||||
|
*/
|
||||||
|
export default function(Animation: Animation, baseElm: HTMLElement) {
|
||||||
|
const baseAnimation = new Animation();
|
||||||
|
|
||||||
|
const backdropAnimation = new Animation();
|
||||||
|
backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop'));
|
||||||
|
|
||||||
|
const wrapperAnimation = new Animation();
|
||||||
|
wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper'));
|
||||||
|
|
||||||
|
backdropAnimation.fromTo('opacity', 0.01, 0.3);
|
||||||
|
|
||||||
|
wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
|
||||||
|
|
||||||
|
return baseAnimation
|
||||||
|
.addElement(baseElm)
|
||||||
|
.easing('ease-in-out')
|
||||||
|
.duration(200)
|
||||||
|
.add(backdropAnimation)
|
||||||
|
.add(wrapperAnimation);
|
||||||
|
}
|
||||||
25
packages/core/src/components/alert/animations/ios.leave.ts
Normal file
25
packages/core/src/components/alert/animations/ios.leave.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { Animation } from '../../../index';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* iOS Alert Leave Animation
|
||||||
|
*/
|
||||||
|
export default function(Animation: Animation, baseElm: HTMLElement) {
|
||||||
|
const baseAnimation = new Animation();
|
||||||
|
|
||||||
|
const backdropAnimation = new Animation();
|
||||||
|
backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop'));
|
||||||
|
|
||||||
|
const wrapperAnimation = new Animation();
|
||||||
|
wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper'));
|
||||||
|
|
||||||
|
backdropAnimation.fromTo('opacity', 0.3, 0);
|
||||||
|
|
||||||
|
wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
|
||||||
|
|
||||||
|
return baseAnimation
|
||||||
|
.addElement(baseElm)
|
||||||
|
.easing('ease-in-out')
|
||||||
|
.duration(200)
|
||||||
|
.add(backdropAnimation)
|
||||||
|
.add(wrapperAnimation);
|
||||||
|
}
|
||||||
292
packages/core/src/components/alert/test/basic.html
Normal file
292
packages/core/src/components/alert/test/basic.html
Normal file
@ -0,0 +1,292 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Alert Basic</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>Alerts</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content padding>
|
||||||
|
<ion-alert-controller></ion-alert-controller>
|
||||||
|
|
||||||
|
<ion-button block onclick="presentAlert()">Alert</ion-button>
|
||||||
|
<ion-button block onclick="presentAlertLongMessage()">Alert Long Message</ion-button>
|
||||||
|
<ion-button block onclick="presentAlertMultipleButtons()">Multiple Buttons (>2)</ion-button>
|
||||||
|
<ion-button block onclick="presentAlertNoMessage()">Alert No Message</ion-button>
|
||||||
|
<ion-button block onclick="presentAlertConfirm()">Confirm</ion-button>
|
||||||
|
<ion-button block onclick="presentAlertPrompt()">Prompt</ion-button>
|
||||||
|
<ion-button block onclick="presentAlertRadio()">Radio</ion-button>
|
||||||
|
<ion-button block onclick="presentAlertCheckbox()">Checkbox</ion-button>
|
||||||
|
</ion-content>
|
||||||
|
</ion-app>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var alertController = document.querySelector('ion-alert-controller');
|
||||||
|
|
||||||
|
function presentAlert() {
|
||||||
|
alertController.create({
|
||||||
|
title: 'Alert',
|
||||||
|
subTitle: 'Subtitle',
|
||||||
|
message: 'This is an alert message.',
|
||||||
|
buttons: ['OK']
|
||||||
|
})
|
||||||
|
.then(alert => {
|
||||||
|
alert.present()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function presentAlertLongMessage() {
|
||||||
|
alertController.create({
|
||||||
|
title: 'Alert',
|
||||||
|
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
|
||||||
|
buttons: ['Cancel', 'OK']
|
||||||
|
})
|
||||||
|
.then(alert => {
|
||||||
|
alert.present()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function presentAlertMultipleButtons() {
|
||||||
|
alertController.create({
|
||||||
|
title: 'Alert',
|
||||||
|
subTitle: 'Subtitle',
|
||||||
|
message: 'This is an alert message.',
|
||||||
|
buttons: ['Cancel', 'Open Modal', 'Delete']
|
||||||
|
})
|
||||||
|
.then(alert => {
|
||||||
|
alert.present()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function presentAlertNoMessage() {
|
||||||
|
alertController.create({
|
||||||
|
title: 'Alert',
|
||||||
|
buttons: ['OK']
|
||||||
|
})
|
||||||
|
.then(alert => {
|
||||||
|
alert.present()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function presentAlertConfirm() {
|
||||||
|
alertController.create({
|
||||||
|
title: 'Confirm!',
|
||||||
|
message: 'Message <strong>text</strong>!!!',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: 'Cancel',
|
||||||
|
role: 'cancel',
|
||||||
|
cssClass: 'secondary',
|
||||||
|
handler: () => {
|
||||||
|
console.log('Confirm Cancel')
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: 'Okay',
|
||||||
|
handler: () => {
|
||||||
|
console.log('Confirm Okay')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
.then(alert => {
|
||||||
|
alert.present()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function presentAlertPrompt() {
|
||||||
|
alertController.create({
|
||||||
|
title: 'Prompt!',
|
||||||
|
inputs: [
|
||||||
|
{
|
||||||
|
placeholder: 'Placeholder 1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'name2',
|
||||||
|
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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
.then(alert => {
|
||||||
|
alert.present()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function presentAlertRadio() {
|
||||||
|
alertController.create({
|
||||||
|
title: 'Radio',
|
||||||
|
inputs: [
|
||||||
|
{
|
||||||
|
type: 'radio',
|
||||||
|
label: 'Radio 1',
|
||||||
|
value: 'value1',
|
||||||
|
checked: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'radio',
|
||||||
|
label: 'Radio 2',
|
||||||
|
value: 'value2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'radio',
|
||||||
|
label: 'Radio 3',
|
||||||
|
value: 'value3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'radio',
|
||||||
|
label: 'Radio 4',
|
||||||
|
value: 'value4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'radio',
|
||||||
|
label: 'Radio 5',
|
||||||
|
value: 'value5'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'radio',
|
||||||
|
label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
|
||||||
|
value: 'value6'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: 'Cancel',
|
||||||
|
role: 'cancel',
|
||||||
|
cssClass: 'secondary',
|
||||||
|
handler: () => {
|
||||||
|
console.log('Confirm Cancel')
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: 'Ok',
|
||||||
|
handler: () => {
|
||||||
|
console.log('Confirm Ok')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
.then(alert => {
|
||||||
|
alert.present()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function presentAlertCheckbox() {
|
||||||
|
alertController.create({
|
||||||
|
title: 'Checkbox',
|
||||||
|
inputs: [
|
||||||
|
{
|
||||||
|
type: 'checkbox',
|
||||||
|
label: 'Checkbox 1',
|
||||||
|
value: 'value1',
|
||||||
|
checked: true
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'checkbox',
|
||||||
|
label: 'Checkbox 2',
|
||||||
|
value: 'value2'
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'checkbox',
|
||||||
|
label: 'Checkbox 3',
|
||||||
|
value: 'value3'
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'checkbox',
|
||||||
|
label: 'Checkbox 4',
|
||||||
|
value: 'value4'
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'checkbox',
|
||||||
|
label: 'Checkbox 5',
|
||||||
|
value: 'value5'
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'checkbox',
|
||||||
|
label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
|
||||||
|
value: 'value6'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: 'Cancel',
|
||||||
|
role: 'cancel',
|
||||||
|
cssClass: 'secondary',
|
||||||
|
handler: () => {
|
||||||
|
console.log('Confirm Cancel')
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: 'Ok',
|
||||||
|
handler: () => {
|
||||||
|
console.log('Confirm Ok')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
.then(alert => {
|
||||||
|
alert.present()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
8
packages/core/src/index.d.ts
vendored
8
packages/core/src/index.d.ts
vendored
@ -1,6 +1,8 @@
|
|||||||
import { Animation, AnimationBuilder, AnimationController } from './components/animation-controller/animation-interface';
|
import { Animation, AnimationBuilder, AnimationController } from './components/animation-controller/animation-interface';
|
||||||
import { ActionSheet, ActionSheetButton, ActionSheetEvent, ActionSheetOptions } from './components/action-sheet/action-sheet';
|
import { ActionSheet, ActionSheetButton, ActionSheetEvent, ActionSheetOptions } from './components/action-sheet/action-sheet';
|
||||||
import { ActionSheetController } from './components/action-sheet-controller/action-sheet-controller';
|
import { ActionSheetController } from './components/action-sheet-controller/action-sheet-controller';
|
||||||
|
import { Alert, AlertButton, AlertEvent, AlertInput, AlertOptions } from './components/alert/alert';
|
||||||
|
import { AlertController } from './components/alert-controller/alert-controller';
|
||||||
import { Backdrop } from './components/backdrop/backdrop'
|
import { Backdrop } from './components/backdrop/backdrop'
|
||||||
import { Loading, LoadingEvent, LoadingOptions } from './components/loading/loading';
|
import { Loading, LoadingEvent, LoadingOptions } from './components/loading/loading';
|
||||||
import { LoadingController } from './components/loading-controller/loading-controller';
|
import { LoadingController } from './components/loading-controller/loading-controller';
|
||||||
@ -56,6 +58,12 @@ export {
|
|||||||
ActionSheetEvent,
|
ActionSheetEvent,
|
||||||
ActionSheetOptions,
|
ActionSheetOptions,
|
||||||
ActionSheetController,
|
ActionSheetController,
|
||||||
|
Alert,
|
||||||
|
AlertButton,
|
||||||
|
AlertEvent,
|
||||||
|
AlertInput,
|
||||||
|
AlertOptions,
|
||||||
|
AlertController,
|
||||||
Animation,
|
Animation,
|
||||||
AnimationBuilder,
|
AnimationBuilder,
|
||||||
AnimationController,
|
AnimationController,
|
||||||
|
|||||||
@ -7,6 +7,7 @@ exports.config = {
|
|||||||
{ components: ['ion-animation-controller'] },
|
{ components: ['ion-animation-controller'] },
|
||||||
{ components: ['ion-app', 'ion-content', 'ion-fixed', 'ion-footer', 'ion-header', 'ion-navbar', 'ion-page', 'ion-title', 'ion-toolbar'] },
|
{ components: ['ion-app', 'ion-content', 'ion-fixed', 'ion-footer', 'ion-header', 'ion-navbar', 'ion-page', 'ion-title', 'ion-toolbar'] },
|
||||||
{ components: ['ion-action-sheet', 'ion-action-sheet-controller'] },
|
{ components: ['ion-action-sheet', 'ion-action-sheet-controller'] },
|
||||||
|
{ components: ['ion-alert', 'ion-alert-controller'] },
|
||||||
{ components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] },
|
{ components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] },
|
||||||
{ components: ['ion-backdrop'] },
|
{ components: ['ion-backdrop'] },
|
||||||
{ components: ['ion-button', 'ion-buttons', 'ion-icon'] },
|
{ components: ['ion-button', 'ion-buttons', 'ion-icon'] },
|
||||||
@ -23,6 +24,7 @@ exports.config = {
|
|||||||
{ components: ['ion-popover', 'ion-popover-controller'] },
|
{ components: ['ion-popover', 'ion-popover-controller'] },
|
||||||
{ components: ['ion-searchbar'] },
|
{ components: ['ion-searchbar'] },
|
||||||
{ components: ['ion-segment', 'ion-segment-button'] },
|
{ components: ['ion-segment', 'ion-segment-button'] },
|
||||||
|
{ components: ['ion-select', 'ion-select-option', 'ion-select-popover'] },
|
||||||
{ components: ['ion-slides', 'ion-slide'] },
|
{ components: ['ion-slides', 'ion-slide'] },
|
||||||
{ components: ['ion-spinner'] },
|
{ components: ['ion-spinner'] },
|
||||||
{ components: ['ion-tabs', 'ion-tab', 'ion-tab-bar', 'ion-tab-button', 'ion-tab-highlight'] },
|
{ components: ['ion-tabs', 'ion-tab', 'ion-tab-bar', 'ion-tab-button', 'ion-tab-highlight'] },
|
||||||
|
|||||||
Reference in New Issue
Block a user