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(list-header): update list header API changes and usage (#20289)

Browse Source 
closes #20284
This commit is contained in:
Brandy Carney
2020-01-24 16:06:54 -05:00
committed by GitHub
parent b14471178e
commit 1c2d64873e
6 changed files with 489 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
core/src/components/list-header/readme.md
View File

@ -9,18 +9,70 @@ Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the
## Usage
### Javascript
### Angular / javascript
```html
<!-- Default List Header -->
<ion-list-header>
<ion-label>List Header</ion-label>
</ion-list-header>
<!-- List Header with Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header with Outline Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button fill="outline">See All</ion-button>
</ion-list-header>
<!-- List Header Full Lines -->
<ion-list-header lines="full">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header Inset Lines -->
<ion-list-header lines="inset">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Headers in Lists -->
<ion-list>
<ion-list-header>
<ion-label>Items</ion-label>
<ion-list-header lines="inset">
<ion-label>Recent</ion-label>
<ion-button>Clear</ion-button>
</ion-list-header>
<ion-item lines="none">
<ion-label color="primary">
<h1>I got you babe</h1>
</ion-label>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header lines="inset">
<ion-label>Trending</ion-label>
</ion-list-header>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
<ion-item>Item 3</ion-item>
<ion-item>Item 4</ion-item>
<ion-item>Item 5</ion-item>
<ion-item>
<ion-label color="primary">
<h1>harry styles</h1>
</ion-label>
</ion-item>
<ion-item>
<ion-label color="primary">
<h1>christmas</h1>
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label color="primary">
<h1>falling</h1>
</ion-label>
</ion-item>
</ion-list>
```
@ -29,25 +81,147 @@ Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the
```tsx
import React from 'react';
import { IonList, IonItem, IonLabel, IonContent, IonListHeader } from '@ionic/react';
import { IonButton, IonContent, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
export const ListHeaderExample: React.FC = () => (
<IonContent>
{/*-- Default List Header --*/}
<IonListHeader>
<IonLabel>List Header</IonLabel>
</IonListHeader>
{/*-- List Header with Button --*/}
<IonListHeader>
<IonLabel>New This Week</IonLabel>
<IonButton>See All</IonButton>
</IonListHeader>
{/*-- List Header with Outline Button --*/}
<IonListHeader>
<IonLabel>New This Week</IonLabel>
<IonButton fill="outline">See All</IonButton>
</IonListHeader>
{/*-- List Header Full Lines --*/}
<IonListHeader lines="full">
<IonLabel>New This Week</IonLabel>
<IonButton>See All</IonButton>
</IonListHeader>
{/*-- List Header Inset Lines --*/}
<IonListHeader lines="inset">
<IonLabel>New This Week</IonLabel>
<IonButton>See All</IonButton>
</IonListHeader>
{/*-- List Headers in Lists --*/}
<IonList>
<IonListHeader lines="inset">
<IonLabel>Recent</IonLabel>
<IonButton>Clear</IonButton>
</IonListHeader>
<IonItem lines="none">
<IonLabel color="primary">
<h1>I got you babe</h1>
</IonLabel>
</IonItem>
</IonList>
<IonList>
<IonListHeader>
<IonLabel>Items</IonLabel>
<IonListHeader lines="inset">
<IonLabel>Trending</IonLabel>
</IonListHeader>
<IonItem>Item 1</IonItem>
<IonItem>Item 2</IonItem>
<IonItem>Item 3</IonItem>
<IonItem>Item 4</IonItem>
<IonItem>Item 5</IonItem>
<IonItem>
<IonLabel color="primary">
<h1>harry styles</h1>
</IonLabel>
</IonItem>
<IonItem>
<IonLabel color="primary">
<h1>christmas</h1>
</IonLabel>
</IonItem>
<IonItem lines="none">
<IonLabel color="primary">
<h1>falling</h1>
</IonLabel>
</IonItem>
</IonList>
</IonContent>
);
```
### Vue
```html
<template>
<!-- Default List Header -->
<ion-list-header>
<ion-label>List Header</ion-label>
</ion-list-header>
<!-- List Header with Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header with Outline Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button fill="outline">See All</ion-button>
</ion-list-header>
<!-- List Header Full Lines -->
<ion-list-header lines="full">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header Inset Lines -->
<ion-list-header lines="inset">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Headers in Lists -->
<ion-list>
<ion-list-header lines="inset">
<ion-label>Recent</ion-label>
<ion-button>Clear</ion-button>
</ion-list-header>
<ion-item lines="none">
<ion-label color="primary">
<h1>I got you babe</h1>
</ion-label>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header lines="inset">
<ion-label>Trending</ion-label>
</ion-list-header>
<ion-item>
<ion-label color="primary">
<h1>harry styles</h1>
</ion-label>
</ion-item>
<ion-item>
<ion-label color="primary">
<h1>christmas</h1>
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label color="primary">
<h1>falling</h1>
</ion-label>
</ion-item>
</ion-list>
</template>
```
## Properties

64
core/src/components/list-header/usage/angular.md Normal file
View File

@ -0,0 +1,64 @@
```html
<!-- Default List Header -->
<ion-list-header>
<ion-label>List Header</ion-label>
</ion-list-header>
<!-- List Header with Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header with Outline Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button fill="outline">See All</ion-button>
</ion-list-header>
<!-- List Header Full Lines -->
<ion-list-header lines="full">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header Inset Lines -->
<ion-list-header lines="inset">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Headers in Lists -->
<ion-list>
<ion-list-header lines="inset">
<ion-label>Recent</ion-label>
<ion-button>Clear</ion-button>
</ion-list-header>
<ion-item lines="none">
<ion-label color="primary">
<h1>I got you babe</h1>
</ion-label>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header lines="inset">
<ion-label>Trending</ion-label>
</ion-list-header>
<ion-item>
<ion-label color="primary">
<h1>harry styles</h1>
</ion-label>
</ion-item>
<ion-item>
<ion-label color="primary">
<h1>christmas</h1>
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label color="primary">
<h1>falling</h1>
</ion-label>
</ion-item>
</ion-list>
```

66
core/src/components/list-header/usage/javascript.md
View File

@ -1,12 +1,64 @@
```html
<!-- Default List Header -->
<ion-list-header>
<ion-label>List Header</ion-label>
</ion-list-header>
<!-- List Header with Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header with Outline Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button fill="outline">See All</ion-button>
</ion-list-header>
<!-- List Header Full Lines -->
<ion-list-header lines="full">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header Inset Lines -->
<ion-list-header lines="inset">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Headers in Lists -->
<ion-list>
<ion-list-header>
<ion-label>Items</ion-label>
<ion-list-header lines="inset">
<ion-label>Recent</ion-label>
<ion-button>Clear</ion-button>
</ion-list-header>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
<ion-item>Item 3</ion-item>
<ion-item>Item 4</ion-item>
<ion-item>Item 5</ion-item>
<ion-item lines="none">
<ion-label color="primary">
<h1>I got you babe</h1>
</ion-label>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header lines="inset">
<ion-label>Trending</ion-label>
</ion-list-header>
<ion-item>
<ion-label color="primary">
<h1>harry styles</h1>
</ion-label>
</ion-item>
<ion-item>
<ion-label color="primary">
<h1>christmas</h1>
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label color="primary">
<h1>falling</h1>
</ion-label>
</ion-item>
</ion-list>
```

70
core/src/components/list-header/usage/react.md
View File

@ -1,19 +1,71 @@
```tsx
import React from 'react';
import { IonList, IonItem, IonLabel, IonContent, IonListHeader } from '@ionic/react';
import { IonButton, IonContent, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
export const ListHeaderExample: React.FC = () => (
<IonContent>
{/*-- Default List Header --*/}
<IonListHeader>
<IonLabel>List Header</IonLabel>
</IonListHeader>
{/*-- List Header with Button --*/}
<IonListHeader>
<IonLabel>New This Week</IonLabel>
<IonButton>See All</IonButton>
</IonListHeader>
{/*-- List Header with Outline Button --*/}
<IonListHeader>
<IonLabel>New This Week</IonLabel>
<IonButton fill="outline">See All</IonButton>
</IonListHeader>
{/*-- List Header Full Lines --*/}
<IonListHeader lines="full">
<IonLabel>New This Week</IonLabel>
<IonButton>See All</IonButton>
</IonListHeader>
{/*-- List Header Inset Lines --*/}
<IonListHeader lines="inset">
<IonLabel>New This Week</IonLabel>
<IonButton>See All</IonButton>
</IonListHeader>
{/*-- List Headers in Lists --*/}
<IonList>
<IonListHeader lines="inset">
<IonLabel>Recent</IonLabel>
<IonButton>Clear</IonButton>
</IonListHeader>
<IonItem lines="none">
<IonLabel color="primary">
<h1>I got you babe</h1>
</IonLabel>
</IonItem>
</IonList>
<IonList>
<IonListHeader>
<IonLabel>Items</IonLabel>
<IonListHeader lines="inset">
<IonLabel>Trending</IonLabel>
</IonListHeader>
<IonItem>Item 1</IonItem>
<IonItem>Item 2</IonItem>
<IonItem>Item 3</IonItem>
<IonItem>Item 4</IonItem>
<IonItem>Item 5</IonItem>
<IonItem>
<IonLabel color="primary">
<h1>harry styles</h1>
</IonLabel>
</IonItem>
<IonItem>
<IonLabel color="primary">
<h1>christmas</h1>
</IonLabel>
</IonItem>
<IonItem lines="none">
<IonLabel color="primary">
<h1>falling</h1>
</IonLabel>
</IonItem>
</IonList>
</IonContent>
);
```
```

66
core/src/components/list-header/usage/vue.md Normal file
View File

@ -0,0 +1,66 @@
```html
<template>
<!-- Default List Header -->
<ion-list-header>
<ion-label>List Header</ion-label>
</ion-list-header>
<!-- List Header with Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header with Outline Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button fill="outline">See All</ion-button>
</ion-list-header>
<!-- List Header Full Lines -->
<ion-list-header lines="full">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header Inset Lines -->
<ion-list-header lines="inset">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Headers in Lists -->
<ion-list>
<ion-list-header lines="inset">
<ion-label>Recent</ion-label>
<ion-button>Clear</ion-button>
</ion-list-header>
<ion-item lines="none">
<ion-label color="primary">
<h1>I got you babe</h1>
</ion-label>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header lines="inset">
<ion-label>Trending</ion-label>
</ion-list-header>
<ion-item>
<ion-label color="primary">
<h1>harry styles</h1>
</ion-label>
</ion-item>
<ion-item>
<ion-label color="primary">
<h1>christmas</h1>
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label color="primary">
<h1>falling</h1>
</ion-label>
</ion-item>
</ion-list>
</template>
```