mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
feat(list-header): redesign list header for iOS spec (#19915)
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user