feat(list-header): redesign list header for iOS spec (#19915)

This commit is contained in:
Brandy Carney
2019-11-19 14:53:37 -05:00
committed by GitHub
parent abdaaf320b
commit 5bbb95fae1
49 changed files with 763 additions and 195 deletions

View File

@@ -2,7 +2,11 @@
```html
<ion-list>
<ion-list-header>Single Selection</ion-list-header>
<ion-list-header>
<ion-label>
Single Selection
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Gender</ion-label>
@@ -29,7 +33,11 @@
```html
<ion-list>
<ion-list-header>Multiple Selection</ion-list-header>
<ion-list-header>
<ion-label>
Multiple Selection
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Toppings</ion-label>
@@ -63,8 +71,12 @@
```html
<ion-list>
<ion-list-header>Objects as Values (compareWith)</ion-list-header>
<ion-list-header>
<ion-label>
Objects as Values (compareWith)
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Users</ion-label>
<ion-select [compareWith]="compareWith">
@@ -113,7 +125,11 @@ export class SelectExample {
```html
<ion-list>
<ion-list-header>Interface Options</ion-list-header>
<ion-list-header>
<ion-label>
Interface Options
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Alert</ion-label>

View File

@@ -2,7 +2,11 @@
```html
<ion-list>
<ion-list-header>Single Selection</ion-list-header>
<ion-list-header>
<ion-label>
Single Selection
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Gender</ion-label>
@@ -29,7 +33,11 @@
```html
<ion-list>
<ion-list-header>Multiple Selection</ion-list-header>
<ion-list-header>
<ion-label>
Multiple Selection
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Toppings</ion-label>
@@ -63,7 +71,11 @@
```html
<ion-list>
<ion-list-header>Objects as Values (compareWith)</ion-list-header>
<ion-list-header>
<ion-label>
Objects as Values (compareWith)
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Users</ion-label>
@@ -97,13 +109,13 @@
let objectSelectElement = document.getElementById('objectSelectCompareWith');
objectSelectElement.compareWith = compareWithFn;
objectOptions.forEach((option, i) => {
let selectOption = document.createElement('ion-select-option');
selectOption.value = option;
selectOption.textContent = option.first + ' ' + option.last;
selectOption.selected = (i === 0);
objectSelectElement.appendChild(selectOption)
});
}
@@ -113,7 +125,11 @@
```html
<ion-list>
<ion-list-header>Interface Options</ion-list-header>
<ion-list-header>
<ion-label>
Interface Options
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Alert</ion-label>

View File

@@ -54,7 +54,11 @@ export const SelectExample: React.FC = () => (
<IonContent>
## Single Selection
<IonList>
<IonListHeader>Single Selection</IonListHeader>
<IonListHeader>
<IonLabel>
Single Selection
</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Gender</IonLabel>
@@ -76,7 +80,11 @@ export const SelectExample: React.FC = () => (
</IonList>
## Multiple Selection
<IonList>
<IonListHeader>Multiple Selection</IonListHeader>
<IonListHeader>
<IonLabel>
Multiple Selection
</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Toppings</IonLabel>
@@ -110,7 +118,11 @@ export const SelectExample: React.FC = () => (
</IonList>
## Objects as Values
<IonList>
<IonListHeader>Objects as Values (compareWith)</IonListHeader>
<IonListHeader>
<IonLabel>
Objects as Values (compareWith)
</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Users</IonLabel>
<IonSelect compareWith={compareWith}>
@@ -126,7 +138,11 @@ export const SelectExample: React.FC = () => (
</IonList>
## Interface Options
<IonList>
<IonListHeader>Interface Options</IonListHeader>
<IonListHeader>
<IonLabel>
Interface Options
</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Alert</IonLabel>

View File

@@ -3,7 +3,11 @@
```html
<template>
<ion-list>
<ion-list-header>Single Selection</ion-list-header>
<ion-list-header>
<ion-label>
Single Selection
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Gender</ion-label>
@@ -32,7 +36,11 @@
```html
<template>
<ion-list>
<ion-list-header>Multiple Selection</ion-list-header>
<ion-list-header>
<ion-label>
Multiple Selection
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Toppings</ion-label>
@@ -68,7 +76,11 @@
```html
<template>
<ion-list>
<ion-list-header>Interface Options</ion-list-header>
<ion-list-header>
<ion-label>
Interface Options
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Alert</ion-label>