fix(title): mode is inherited

fixes #15187
This commit is contained in:
Manu Mtz.-Almeida
2018-08-20 19:01:12 +02:00
parent 2e94227675
commit 94ea0a6d73
7 changed files with 52 additions and 52 deletions

View File

@ -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 {

View File

@ -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) {

View File

@ -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;
}

View File

@ -1,8 +0,0 @@
@import "./title";
:host {
@include padding(0, 12px);
font-size: 20px;
font-weight: 500;
}

View File

@ -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)};
} }

View File

@ -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
}
}; };
} }

View File

@ -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>