mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
12
core/src/components.d.ts
vendored
12
core/src/components.d.ts
vendored
@ -1872,7 +1872,7 @@ declare global {
|
|||||||
|
|
||||||
interface IonRippleEffect {
|
interface IonRippleEffect {
|
||||||
/**
|
/**
|
||||||
* Adds the ripple effect to the parent elment
|
* Adds the ripple effect to the parent element
|
||||||
*/
|
*/
|
||||||
'addRipple': (pageX: number, pageY: number) => void;
|
'addRipple': (pageX: number, pageY: number) => void;
|
||||||
'parent': HTMLElement | string;
|
'parent': HTMLElement | string;
|
||||||
@ -2107,7 +2107,7 @@ declare global {
|
|||||||
* The text to display on the ok button. Default: `OK`.
|
* The text to display on the ok button. Default: `OK`.
|
||||||
*/
|
*/
|
||||||
'okText': string;
|
'okText': string;
|
||||||
'open': (ev?: UIEvent | undefined) => Promise<HTMLIonPopoverElement> | Promise<HTMLIonActionSheetElement> | Promise<HTMLIonAlertElement>;
|
'open': (ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement> | Promise<HTMLIonAlertElement> | Promise<HTMLIonPopoverElement>;
|
||||||
/**
|
/**
|
||||||
* The text to display when the select is empty.
|
* The text to display when the select is empty.
|
||||||
*/
|
*/
|
||||||
@ -2510,10 +2510,6 @@ declare global {
|
|||||||
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
|
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
|
||||||
*/
|
*/
|
||||||
'color': Color;
|
'color': Color;
|
||||||
/**
|
|
||||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
|
||||||
*/
|
|
||||||
'mode': Mode;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IonToastController {
|
interface IonToastController {
|
||||||
@ -6072,10 +6068,6 @@ declare global {
|
|||||||
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
|
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
|
||||||
*/
|
*/
|
||||||
'color'?: Color;
|
'color'?: Color;
|
||||||
/**
|
|
||||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
|
||||||
*/
|
|
||||||
'mode'?: Mode;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IonToastControllerAttributes extends HTMLAttributes {
|
export interface IonToastControllerAttributes extends HTMLAttributes {
|
||||||
|
@ -52,7 +52,7 @@ export class RippleEffect {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Adds the ripple effect to the parent elment
|
* Adds the ripple effect to the parent element
|
||||||
*/
|
*/
|
||||||
@Method()
|
@Method()
|
||||||
addRipple(pageX: number, pageY: number) {
|
addRipple(pageX: number, pageY: number) {
|
||||||
|
@ -1,22 +0,0 @@
|
|||||||
@import "./title";
|
|
||||||
|
|
||||||
:host {
|
|
||||||
@include position(0, null, null, 0);
|
|
||||||
@include padding(0, 90px, 0);
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
transform: translateZ(0);
|
|
||||||
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 600;
|
|
||||||
|
|
||||||
letter-spacing: -.03em;
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
@ -1,8 +0,0 @@
|
|||||||
@import "./title";
|
|
||||||
|
|
||||||
:host {
|
|
||||||
@include padding(0, 12px);
|
|
||||||
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
@ -12,6 +12,34 @@
|
|||||||
transform: translateZ(0);
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host(.title-ios) {
|
||||||
|
@include position(0, null, null, 0);
|
||||||
|
@include padding(0, 90px, 0);
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
transform: translateZ(0);
|
||||||
|
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
letter-spacing: -.03em;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(.title-md) {
|
||||||
|
@include padding(0, 12px);
|
||||||
|
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
:host(.ion-color) {
|
:host(.ion-color) {
|
||||||
color: #{current-color(base)};
|
color: #{current-color(base)};
|
||||||
}
|
}
|
||||||
|
@ -1,23 +1,18 @@
|
|||||||
import { Component, Prop } from '@stencil/core';
|
import { Component, Element, Prop } from '@stencil/core';
|
||||||
|
|
||||||
import { Color, Mode } from '../../interface';
|
import { Color, Mode } from '../../interface';
|
||||||
import { createColorClasses } from '../../utils/theme';
|
import { createColorClasses } from '../../utils/theme';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
tag: 'ion-title',
|
tag: 'ion-title',
|
||||||
styleUrls: {
|
styleUrl: 'title.scss',
|
||||||
ios: 'title.ios.scss',
|
|
||||||
md: 'title.md.scss'
|
|
||||||
},
|
|
||||||
shadow: true
|
shadow: true
|
||||||
})
|
})
|
||||||
export class ToolbarTitle {
|
export class ToolbarTitle {
|
||||||
|
|
||||||
/**
|
mode!: Mode;
|
||||||
* The mode determines which platform styles to use.
|
|
||||||
* Possible values are: `"ios"` or `"md"`.
|
@Element() el!: HTMLElement;
|
||||||
*/
|
|
||||||
@Prop() mode!: Mode;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The color to use from your application's color palette.
|
* The color to use from your application's color palette.
|
||||||
@ -26,9 +21,18 @@ export class ToolbarTitle {
|
|||||||
*/
|
*/
|
||||||
@Prop() color?: Color;
|
@Prop() color?: Color;
|
||||||
|
|
||||||
|
private getMode() {
|
||||||
|
const toolbar = this.el.closest('ion-toolbar');
|
||||||
|
return (toolbar && toolbar.mode) || this.mode;
|
||||||
|
}
|
||||||
|
|
||||||
hostData() {
|
hostData() {
|
||||||
|
const mode = this.getMode();
|
||||||
return {
|
return {
|
||||||
class: createColorClasses(this.color)
|
class: {
|
||||||
|
...createColorClasses(this.color),
|
||||||
|
[`title-${mode}`]: true
|
||||||
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -228,6 +228,12 @@
|
|||||||
</ion-segment-button>
|
</ion-segment-button>
|
||||||
</ion-segment>
|
</ion-segment>
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
|
<ion-toolbar mode="ios">
|
||||||
|
<ion-title>This is an iOS toolbar</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
<ion-toolbar mode="md">
|
||||||
|
<ion-title>This is an MD toolbar</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-app>
|
</ion-app>
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user