From f0e4215f41fdf6979f28d09531b9e7959a505b83 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 17 Oct 2019 14:19:33 -0400 Subject: [PATCH] docs(header): add collapse header styling details (#19669) * update large title styles * add missing space --- core/src/components/title/readme.md | 27 +++++++++++++++++++ core/src/components/title/usage/angular.md | 11 +++++++- core/src/components/title/usage/javascript.md | 11 +++++++- core/src/components/title/usage/react.md | 9 +++++++ core/src/components/title/usage/vue.md | 9 +++++++ 5 files changed, 65 insertions(+), 2 deletions(-) diff --git a/core/src/components/title/readme.md b/core/src/components/title/readme.md index b2860c231b..5163960738 100644 --- a/core/src/components/title/readme.md +++ b/core/src/components/title/readme.md @@ -89,6 +89,15 @@ In this example, notice that we have added two sets of `ion-buttons` both with ` `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. +When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation. + +```css +ion-title.large-title { + color: purple; + font-size: 30px; +} +``` + ### React @@ -208,6 +217,15 @@ In this example, notice that we have added two sets of `IonButtons` both with `c `IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. +When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation. + +```css +ion-title.large-title { + color: purple; + font-size: 30px; +} +``` + ### Vue @@ -297,6 +315,15 @@ In this example, notice that we have added two sets of `ion-buttons` both with ` `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. +When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation. + +```css +ion-title.large-title { + color: purple; + font-size: 30px; +} +``` + ## Properties diff --git a/core/src/components/title/usage/angular.md b/core/src/components/title/usage/angular.md index 53172232b6..0a9a4d0a6e 100644 --- a/core/src/components/title/usage/angular.md +++ b/core/src/components/title/usage/angular.md @@ -76,4 +76,13 @@ In the example above, notice there are two `ion-header` elements. The first `ion In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element. -`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. \ No newline at end of file +`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. + +When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation. + +```css +ion-title.large-title { + color: purple; + font-size: 30px; +} +``` \ No newline at end of file diff --git a/core/src/components/title/usage/javascript.md b/core/src/components/title/usage/javascript.md index 53172232b6..0a9a4d0a6e 100644 --- a/core/src/components/title/usage/javascript.md +++ b/core/src/components/title/usage/javascript.md @@ -76,4 +76,13 @@ In the example above, notice there are two `ion-header` elements. The first `ion In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element. -`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. \ No newline at end of file +`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. + +When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation. + +```css +ion-title.large-title { + color: purple; + font-size: 30px; +} +``` \ No newline at end of file diff --git a/core/src/components/title/usage/react.md b/core/src/components/title/usage/react.md index 621f6c89d6..273693234d 100644 --- a/core/src/components/title/usage/react.md +++ b/core/src/components/title/usage/react.md @@ -113,3 +113,12 @@ export const LargeTitleExample: React.FC = () => ( In this example, notice that we have added two sets of `IonButtons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `IonTitle` element. `IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. + +When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation. + +```css +ion-title.large-title { + color: purple; + font-size: 30px; +} +``` \ No newline at end of file diff --git a/core/src/components/title/usage/vue.md b/core/src/components/title/usage/vue.md index 95fbdba3ad..6f5da376c7 100644 --- a/core/src/components/title/usage/vue.md +++ b/core/src/components/title/usage/vue.md @@ -83,3 +83,12 @@ In the example above, notice there are two `ion-header` elements. The first `ion In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element. `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. + +When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation. + +```css +ion-title.large-title { + color: purple; + font-size: 30px; +} +``` \ No newline at end of file