javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(title): update button example with large title (#20222)

Browse Source 
fixes #20217
This commit is contained in:
Liam DeBeasi
2020-01-17 10:04:37 -05:00
committed by GitHub
parent dc78f98153
commit dbccf8dd77
5 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
core/src/components/title/readme.md
View File

@ -60,7 +60,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
```html ```html
<ion-header translucent="true"> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Settings</ion-title> <ion-title>Settings</ion-title>
@ -70,7 +70,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
<ion-content fullscreen="true"> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
</ion-buttons> </ion-buttons>
<ion-title size="large">Settings</ion-title> <ion-title size="large">Settings</ion-title>
@ -87,7 +87,7 @@ 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. 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. `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
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. 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.
@ -188,7 +188,7 @@ export const LargeTitleExample: React.FC = () => (
<> <>
<IonHeader translucent="true"> <IonHeader translucent="true">
<IonToolbar> <IonToolbar>
<IonButtons collapse="true"> <IonButtons collapse="true" slot="end">
<IonButton>Click Me</IonButton> <IonButton>Click Me</IonButton>
</IonButtons> </IonButtons>
<IonTitle>Settings</IonTitle> <IonTitle>Settings</IonTitle>
@ -198,7 +198,7 @@ export const LargeTitleExample: React.FC = () => (
<IonContent fullscreen="true"> <IonContent fullscreen="true">
<IonHeader collapse="condense"> <IonHeader collapse="condense">
<IonToolbar> <IonToolbar>
<IonButtons collapse="true"> <IonButtons collapse="true" slot="end">
<IonButton>Click Me</IonButton> <IonButton>Click Me</IonButton>
</IonButtons> </IonButtons>
<IonTitle size="large">Settings</IonTitle> <IonTitle size="large">Settings</IonTitle>
@ -217,7 +217,7 @@ 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. 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. `IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
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. 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.
@ -289,7 +289,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
<template> <template>
<ion-header translucent="true"> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Settings</ion-title> <ion-title>Settings</ion-title>
@ -299,7 +299,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
<ion-content fullscreen="true"> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
</ion-buttons> </ion-buttons>
<ion-title size="large">Settings</ion-title> <ion-title size="large">Settings</ion-title>
@ -317,7 +317,7 @@ 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. 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. `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
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. 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.

6
core/src/components/title/usage/angular.md
View File

@ -49,7 +49,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
```html ```html
<ion-header translucent="true"> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Settings</ion-title> <ion-title>Settings</ion-title>
@ -59,7 +59,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
<ion-content fullscreen="true"> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
</ion-buttons> </ion-buttons>
<ion-title size="large">Settings</ion-title> <ion-title size="large">Settings</ion-title>
@ -76,7 +76,7 @@ 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. 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. `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
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. 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.

6
core/src/components/title/usage/javascript.md
View File

@ -49,7 +49,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
```html ```html
<ion-header translucent="true"> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Settings</ion-title> <ion-title>Settings</ion-title>
@ -59,7 +59,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
<ion-content fullscreen="true"> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
</ion-buttons> </ion-buttons>
<ion-title size="large">Settings</ion-title> <ion-title size="large">Settings</ion-title>
@ -76,7 +76,7 @@ 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. 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. `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
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. 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.

6
core/src/components/title/usage/react.md
View File

@ -83,7 +83,7 @@ export const LargeTitleExample: React.FC = () => (
<> <>
<IonHeader translucent="true"> <IonHeader translucent="true">
<IonToolbar> <IonToolbar>
<IonButtons collapse="true"> <IonButtons collapse="true" slot="end">
<IonButton>Click Me</IonButton> <IonButton>Click Me</IonButton>
</IonButtons> </IonButtons>
<IonTitle>Settings</IonTitle> <IonTitle>Settings</IonTitle>
@ -93,7 +93,7 @@ export const LargeTitleExample: React.FC = () => (
<IonContent fullscreen="true"> <IonContent fullscreen="true">
<IonHeader collapse="condense"> <IonHeader collapse="condense">
<IonToolbar> <IonToolbar>
<IonButtons collapse="true"> <IonButtons collapse="true" slot="end">
<IonButton>Click Me</IonButton> <IonButton>Click Me</IonButton>
</IonButtons> </IonButtons>
<IonTitle size="large">Settings</IonTitle> <IonTitle size="large">Settings</IonTitle>
@ -112,7 +112,7 @@ 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. 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. `IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
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. 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.

6
core/src/components/title/usage/vue.md
View File

@ -54,7 +54,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
<template> <template>
<ion-header translucent="true"> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Settings</ion-title> <ion-title>Settings</ion-title>
@ -64,7 +64,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
<ion-content fullscreen="true"> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
</ion-buttons> </ion-buttons>
<ion-title size="large">Settings</ion-title> <ion-title size="large">Settings</ion-title>
@ -82,7 +82,7 @@ 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. 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. `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
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. 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.