javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(title): update large title docs to mention translucent and fullscreen requirements (#19956)

Browse Source 
fixes #19483
This commit is contained in:
Liam DeBeasi
2019-11-20 15:34:54 -05:00
committed by GitHub
parent a33cb957f6
commit 7734d27bc2
5 changed files with 46 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,13 +34,13 @@
Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements. Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.
```html ```html
<ion-header> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-title>Settings</ion-title> <ion-title>Settings</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-title size="large">Settings</ion-title> <ion-title size="large">Settings</ion-title>
@ -58,7 +58,7 @@ Ionic provides a way to create the collapsible titles that exist on stock iOS ap
In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`. In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
```html ```html
<ion-header> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
@ -67,7 +67,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true">
@ -98,6 +98,8 @@ ion-title.large-title {
} }
``` ```
> When using collapsible large titles, it is required that `fullscreen="true"` be set on `ion-content` and `translucent="true"` be set on the main `ion-header`.
### React ### React
@ -145,13 +147,13 @@ import {
export const LargeTitleExample: React.FC = () => ( export const LargeTitleExample: React.FC = () => (
<> <>
<IonHeader> <IonHeader translucent="true">
<IonToolbar> <IonToolbar>
<IonTitle>Settings</IonTitle> <IonTitle>Settings</IonTitle>
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<IonContent> <IonContent fullscreen="true">
<IonHeader collapse="condense"> <IonHeader collapse="condense">
<IonToolbar> <IonToolbar>
<IonTitle size="large">Settings</IonTitle> <IonTitle size="large">Settings</IonTitle>
@ -184,7 +186,7 @@ import {
export const LargeTitleExample: React.FC = () => ( export const LargeTitleExample: React.FC = () => (
<> <>
<IonHeader> <IonHeader translucent="true">
<IonToolbar> <IonToolbar>
<IonButtons collapse="true"> <IonButtons collapse="true">
<IonButton>Click Me</IonButton> <IonButton>Click Me</IonButton>
@ -193,7 +195,7 @@ export const LargeTitleExample: React.FC = () => (
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<IonContent> <IonContent fullscreen="true">
<IonHeader collapse="condense"> <IonHeader collapse="condense">
<IonToolbar> <IonToolbar>
<IonButtons collapse="true"> <IonButtons collapse="true">
@ -226,6 +228,8 @@ ion-title.large-title {
} }
``` ```
> When using collapsible large titles, it is required that `fullscreen="true"` be set on `IonContent` and `translucent="true"` be set on the main `IonHeader`.
### Vue ### Vue
@ -257,13 +261,13 @@ Ionic provides a way to create the collapsible titles that exist on stock iOS ap
```html ```html
<template> <template>
<ion-header> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-title>Settings</ion-title> <ion-title>Settings</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-title size="large">Settings</ion-title> <ion-title size="large">Settings</ion-title>
@ -283,7 +287,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
```html ```html
<template> <template>
<ion-header> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
@ -292,7 +296,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true">
@ -324,6 +328,8 @@ ion-title.large-title {
} }
``` ```
> When using collapsible large titles, it is required that `fullscreen="true"` be set on `ion-content` and `translucent="true"` be set on the main `ion-header`.
## Properties ## Properties

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

@ -23,13 +23,13 @@
Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements. Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.
```html ```html
<ion-header> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-title>Settings</ion-title> <ion-title>Settings</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-title size="large">Settings</ion-title> <ion-title size="large">Settings</ion-title>
@ -47,7 +47,7 @@ Ionic provides a way to create the collapsible titles that exist on stock iOS ap
In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`. In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
```html ```html
<ion-header> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
@ -56,7 +56,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true">
@ -85,4 +85,6 @@ ion-title.large-title {
color: purple; color: purple;
font-size: 30px; font-size: 30px;
} }
``` ```
> When using collapsible large titles, it is required that `fullscreen="true"` be set on `ion-content` and `translucent="true"` be set on the main `ion-header`.

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

@ -23,13 +23,13 @@
Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements. Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.
```html ```html
<ion-header> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-title>Settings</ion-title> <ion-title>Settings</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-title size="large">Settings</ion-title> <ion-title size="large">Settings</ion-title>
@ -47,7 +47,7 @@ Ionic provides a way to create the collapsible titles that exist on stock iOS ap
In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`. In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
```html ```html
<ion-header> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
@ -56,7 +56,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true">
@ -85,4 +85,6 @@ ion-title.large-title {
color: purple; color: purple;
font-size: 30px; font-size: 30px;
} }
``` ```
> When using collapsible large titles, it is required that `fullscreen="true"` be set on `ion-content` and `translucent="true"` be set on the main `ion-header`.

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

@ -42,13 +42,13 @@ import {
export const LargeTitleExample: React.FC = () => ( export const LargeTitleExample: React.FC = () => (
<> <>
<IonHeader> <IonHeader translucent="true">
<IonToolbar> <IonToolbar>
<IonTitle>Settings</IonTitle> <IonTitle>Settings</IonTitle>
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<IonContent> <IonContent fullscreen="true">
<IonHeader collapse="condense"> <IonHeader collapse="condense">
<IonToolbar> <IonToolbar>
<IonTitle size="large">Settings</IonTitle> <IonTitle size="large">Settings</IonTitle>
@ -81,7 +81,7 @@ import {
export const LargeTitleExample: React.FC = () => ( export const LargeTitleExample: React.FC = () => (
<> <>
<IonHeader> <IonHeader translucent="true">
<IonToolbar> <IonToolbar>
<IonButtons collapse="true"> <IonButtons collapse="true">
<IonButton>Click Me</IonButton> <IonButton>Click Me</IonButton>
@ -90,7 +90,7 @@ export const LargeTitleExample: React.FC = () => (
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<IonContent> <IonContent fullscreen="true">
<IonHeader collapse="condense"> <IonHeader collapse="condense">
<IonToolbar> <IonToolbar>
<IonButtons collapse="true"> <IonButtons collapse="true">
@ -121,4 +121,6 @@ ion-title.large-title {
color: purple; color: purple;
font-size: 30px; font-size: 30px;
} }
``` ```
> When using collapsible large titles, it is required that `fullscreen="true"` be set on `IonContent` and `translucent="true"` be set on the main `IonHeader`.

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

@ -26,13 +26,13 @@ Ionic provides a way to create the collapsible titles that exist on stock iOS ap
```html ```html
<template> <template>
<ion-header> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-title>Settings</ion-title> <ion-title>Settings</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-title size="large">Settings</ion-title> <ion-title size="large">Settings</ion-title>
@ -52,7 +52,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
```html ```html
<template> <template>
<ion-header> <ion-header translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true">
<ion-button>Click Me</ion-button> <ion-button>Click Me</ion-button>
@ -61,7 +61,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content fullscreen="true">
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-buttons collapse="true"> <ion-buttons collapse="true">
@ -91,4 +91,6 @@ ion-title.large-title {
color: purple; color: purple;
font-size: 30px; font-size: 30px;
} }
``` ```
> When using collapsible large titles, it is required that `fullscreen="true"` be set on `ion-content` and `translucent="true"` be set on the main `ion-header`.