javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

96
core/src/components/select/readme.md
View File

@@ -55,7 +55,11 @@ Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert
```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>
@@ -82,7 +86,11 @@ Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert
```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>
@@ -116,8 +124,12 @@ Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert
```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">
@@ -166,7 +178,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>
@@ -244,7 +260,11 @@ export class SelectExample {
```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>
@@ -271,7 +291,11 @@ export class SelectExample {
```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>
@@ -305,7 +329,11 @@ export class SelectExample {
```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>
@@ -339,13 +367,13 @@ export class SelectExample {
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)
});
}
@@ -355,7 +383,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>
@@ -482,7 +514,11 @@ export const SelectExample: React.FC = () => (
<IonContent>
## Single Selection
<IonList>
<IonListHeader>Single Selection</IonListHeader>
<IonListHeader>
<IonLabel>
Single Selection
</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Gender</IonLabel>
@@ -504,7 +540,11 @@ export const SelectExample: React.FC = () => (
</IonList>
## Multiple Selection
<IonList>
<IonListHeader>Multiple Selection</IonListHeader>
<IonListHeader>
<IonLabel>
Multiple Selection
</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Toppings</IonLabel>
@@ -538,7 +578,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}>
@@ -554,7 +598,11 @@ export const SelectExample: React.FC = () => (
</IonList>
## Interface Options
<IonList>
<IonListHeader>Interface Options</IonListHeader>
<IonListHeader>
<IonLabel>
Interface Options
</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Alert</IonLabel>
@@ -614,7 +662,11 @@ export const SelectExample: React.FC = () => (
```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>
@@ -643,7 +695,11 @@ export const SelectExample: React.FC = () => (
```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>
@@ -679,7 +735,11 @@ export const SelectExample: React.FC = () => (
```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>

36
core/src/components/select/test/basic/index.html
View File

@@ -22,7 +22,11 @@
<ion-content class="outer-content test-content">
<ion-list>
<ion-list-header>Single Value Select</ion-list-header>
<ion-list-header>
<ion-label>
Single Value Select
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Gender</ion-label>
@@ -56,7 +60,11 @@
</ion-list>
<ion-list>
<ion-list-header>Object Values with trackBy</ion-list-header>
<ion-list-header>
<ion-label>
Object Values with trackBy
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Users</ion-label>
@@ -65,7 +73,11 @@
</ion-list>
<ion-list>
<ion-list-header>Select - Custom Interface Options</ion-list-header>
<ion-list-header>
<ion-label>
Select - Custom Interface Options
</ion-label>
</ion-list-header>
<ion-item color="danger">
<ion-label>Alert</ion-label>
@@ -107,7 +119,11 @@
</ion-list>
<ion-list>
<ion-list-header>Popover Interface Select</ion-list-header>
<ion-list-header>
<ion-label>
Popover Interface Select
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Gender</ion-label>
@@ -164,7 +180,11 @@
<ion-list>
<ion-list-header>Action Sheet Interface Select</ion-list-header>
<ion-list-header>
<ion-label>
Action Sheet Interface Select
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Mute Notifications</ion-label>
@@ -190,7 +210,11 @@
</ion-list>
<ion-list>
<ion-list-header>Multiple Value Select</ion-list-header>
<ion-list-header>
<ion-label>
Multiple Value Select
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Toppings</ion-label>

26
core/src/components/select/usage/angular.md
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>

28
core/src/components/select/usage/javascript.md
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>

24
core/src/components/select/usage/react.md
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>

18
core/src/components/select/usage/vue.md
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>