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

12
core/src/components/badge/test/basic/index.html
View File

@@ -22,7 +22,11 @@
<ion-content id="content">
<ion-list>
<ion-list-header>Badges Right</ion-list-header>
<ion-list-header>
<ion-label>
Badges Right
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Default Badge</ion-label>
<ion-badge slot="end">00</ion-badge>
@@ -70,7 +74,11 @@
</ion-list>
<ion-list>
<ion-list-header>Badges Left</ion-list-header>
<ion-list-header>
<ion-label>
Badges Left
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Default Badge</ion-label>
<ion-badge slot="start">00</ion-badge>

5
core/src/components/button/button.ios.scss
View File

@@ -68,6 +68,11 @@
--background-focused: #{ion-color(primary, base, .1)};
--color-activated: #{ion-color(primary, base)};
--color-focused: #{ion-color(primary, base)};
font-size: #{$button-ios-clear-font-size};
font-weight: #{$button-ios-clear-font-weight};
letter-spacing: #{$button-ios-clear-letter-spacing};
}

9
core/src/components/button/button.ios.vars.scss
View File

@@ -153,6 +153,15 @@ $button-ios-outline-background-color-focused: ion-color(primary, base, $
// iOS Clear Button
// --------------------------------------------------
/// @prop - Font size of the clear button
$button-ios-clear-font-size: 17px !default;
/// @prop - Font weight of the clear button
$button-ios-clear-font-weight: normal !default;
/// @prop - Letter spacing of the clear button
$button-ios-clear-letter-spacing: 0 !default;
/// @prop - Border color of the clear button
$button-ios-clear-border-color: transparent !default;

7
core/src/components/button/button.tsx
View File

@@ -23,9 +23,9 @@ import { createColorClasses, openURL } from '../../utils/theme';
shadow: true,
})
export class Button implements ComponentInterface, AnchorInterface, ButtonInterface {
private inToolbar = false;
private inItem = false;
private inListHeader = false;
private inToolbar = false;
@Element() el!: HTMLElement;
@@ -124,6 +124,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
componentWillLoad() {
this.inToolbar = !!this.el.closest('ion-buttons');
this.inListHeader = !!this.el.closest('ion-list-header');
this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
}
@@ -189,7 +190,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
let fill = this.fill;
if (fill === undefined) {
fill = this.inToolbar ? 'clear' : 'solid';
fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
}
return (
<Host

16
core/src/components/checkbox/test/indeterminate/index.html
View File

@@ -23,7 +23,9 @@
<ion-content id="content">
<ion-list-header>
Native
<ion-label>
Native
</ion-label>
</ion-list-header>
<div class="ion-padding-start">
@@ -49,7 +51,9 @@
</div>
<ion-list-header>
Ionic
<ion-label>
Ionic
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Unchecked</ion-label>
@@ -72,7 +76,9 @@
</ion-item>
<ion-list-header>
Colors
<ion-label>
Colors
</ion-label>
</ion-list-header>
<div class="ion-padding-start">
<ion-checkbox indeterminate></ion-checkbox>
@@ -87,7 +93,9 @@
</div>
<ion-list-header>
Parent
<ion-label>
Parent
</ion-label>
</ion-list-header>
<ul>

24
core/src/components/item-sliding/test/lines/index.html
View File

@@ -22,22 +22,38 @@
<ion-content>
<ion-list>
<ion-list-header>Default List</ion-list-header>
<ion-list-header>
<ion-label>
Default List
</ion-label>
</ion-list-header>
<!-- Sliding items are generated below -->
</ion-list>
<ion-list lines="full">
<ion-list-header>Full List</ion-list-header>
<ion-list-header>
<ion-label>
Full List
</ion-label>
</ion-list-header>
<!-- Sliding items are generated below -->
</ion-list>
<ion-list lines="inset">
<ion-list-header>Inset List</ion-list-header>
<ion-list-header>
<ion-label>
Inset List
</ion-label>
</ion-list-header>
<!-- Sliding items are generated below -->
</ion-list>
<ion-list lines="none">
<ion-list-header>No Lines List</ion-list-header>
<ion-list-header>
<ion-label>
No Lines List
</ion-label>
</ion-list-header>
<!-- Sliding items are generated below -->
</ion-list>
</ion-content>

4
core/src/components/item/item.ios.vars.scss
View File

@@ -46,13 +46,13 @@ $item-ios-detail-icon-color: $item-ios-border-color !default;
$item-ios-padding-top: 10px !default;
/// @prop - Padding end for the item content
$item-ios-padding-end: 16px !default;
$item-ios-padding-end: 20px !default;
/// @prop - Padding bottom for the item content
$item-ios-padding-bottom: 10px !default;
/// @prop - Padding start for the item content
$item-ios-padding-start: 16px !default;
$item-ios-padding-start: 20px !default;
/// @prop - Border bottom width for the item when lines are displayed
$item-ios-border-bottom-width: $hairlines-width !default;

12
core/src/components/item/test/inputs/index.html
View File

@@ -80,7 +80,11 @@
</form>
<ion-list>
<ion-list-header>Controls</ion-list-header>
<ion-list-header>
<ion-label>
Controls
</ion-label>
</ion-list-header>
<ion-item-divider>Value Controls</ion-item-divider>
<ion-item button onClick="toggleDisabled()" id="btnDisabled">
@@ -113,7 +117,11 @@
</ion-item>
</ion-list>
<ion-list-header>Multiple inputs/clickables</ion-list-header>
<ion-list-header>
<ion-label>
Multiple inputs/clickables
</ion-label>
</ion-list-header>
<ion-list class="multiple">
<ion-item>
<ion-checkbox slot="start" id="checkbox-start"></ion-checkbox>

28
core/src/components/item/test/lines/index.html
View File

@@ -70,7 +70,11 @@
<!-- List Lines Full -->
<ion-list lines="full">
<ion-list-header>List Full Lines</ion-list-header>
<ion-list-header>
<ion-label>
List Full Lines
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Item</ion-label>
</ion-item>
@@ -84,7 +88,9 @@
<ion-list lines="inset">
<ion-list-header>
List Inset Lines
<ion-label>
List Inset Lines
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Item</ion-label>
@@ -99,7 +105,9 @@
<ion-list lines="none">
<ion-list-header>
List No Lines
<ion-label>
List No Lines
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Item</ion-label>
@@ -165,7 +173,11 @@
<!-- List Lines Full -->
<ion-list lines="full">
<ion-list-header>List Full Lines</ion-list-header>
<ion-list-header>
<ion-label>
List Full Lines
</ion-label>
</ion-list-header>
<ion-item color="light">
<ion-label>Item</ion-label>
</ion-item>
@@ -179,7 +191,9 @@
<ion-list lines="inset">
<ion-list-header>
List Inset Lines
<ion-label>
List Inset Lines
</ion-label>
</ion-list-header>
<ion-item color="dark">
<ion-label>Item</ion-label>
@@ -194,7 +208,9 @@
<ion-list lines="none">
<ion-list-header>
List No Lines
<ion-label>
List No Lines
</ion-label>
</ion-list-header>
<ion-item color="tertiary">
<ion-label>Item</ion-label>

12
core/src/components/item/test/reorder/index.html
View File

@@ -28,12 +28,20 @@
</ion-list>
<ion-list>
<ion-list-header>start</ion-list-header>
<ion-list-header>
<ion-label>
Start
</ion-label>
</ion-list-header>
<ion-reorder-group id="startGroup"></ion-reorder-group>
</ion-list>
<ion-list>
<ion-list-header>end</ion-list-header>
<ion-list-header>
<ion-label>
End
</ion-label>
</ion-list-header>
<ion-reorder-group id="endGroup"></ion-reorder-group>
</ion-list>
</ion-content>

4
core/src/components/label/label.ios.scss
View File

@@ -45,9 +45,9 @@
// --------------------------------------------------
::slotted(*) h1 {
@include margin(0, 0, 2px);
@include margin(3px, 0, 2px);
font-size: 24px;
font-size: 22px;
font-weight: normal;
}

43
core/src/components/list-header/list-header.ios.scss
View File

@@ -5,17 +5,46 @@
// --------------------------------------------------
:host {
--background: #{$list-ios-header-background-color};
--color: #{$list-ios-header-color};
--background: #{$list-header-ios-background-color};
--color: #{$list-header-ios-color};
--border-color: #{$item-ios-border-bottom-color};
@include padding-horizontal(calc(var(--ion-safe-area-left, 0px) + #{$list-ios-header-padding-start}), null);
@include padding-horizontal(calc(var(--ion-safe-area-left, 0px) + #{$list-header-ios-padding-start}), null);
position: relative;
font-size: $list-ios-header-font-size;
font-weight: $list-ios-header-font-weight;
align-items: flex-end;
letter-spacing: $list-ios-header-letter-spacing;
font-size: $list-header-ios-font-size;
font-weight: $list-header-ios-font-weight;
text-transform: $list-ios-header-text-transform;
letter-spacing: $list-header-ios-letter-spacing;
}
// List Header: Slotted Components
// --------------------------------------------------
::slotted(ion-button),
::slotted(ion-label) {
@include margin(29px, null, 6px);
}
::slotted(ion-button) {
@include margin(null, 3px);
height: 1.4em;
}
// List Header Lines
// --------------------------------------------------
// Full lines - apply the border to the list header
// Inset lines - apply the border to the list header inner
:host(.list-header-lines-full) {
--border-width: #{0 0 $item-ios-border-bottom-width 0};
}
:host(.list-header-lines-inset) {
--inner-border-width: #{0 0 $item-ios-border-bottom-width 0};
}

27
core/src/components/list-header/list-header.ios.vars.scss
View File

@@ -4,23 +4,20 @@
// iOS List Header
// --------------------------------------------------
/// @prop - Padding start of the header in a list
$list-ios-header-padding-start: $item-ios-padding-start !default;
/// @prop - Padding start of the list header
$list-header-ios-padding-start: $item-ios-padding-start !default;
/// @prop - Font size of the header in a list
$list-ios-header-font-size: 12px !default;
/// @prop - Font size of the list header
$list-header-ios-font-size: 22px !default;
/// @prop - Font weight of the header in a list
$list-ios-header-font-weight: 500 !default;
/// @prop - Font weight of the list header
$list-header-ios-font-weight: 700 !default;
/// @prop - Letter spacing of the header in a list
$list-ios-header-letter-spacing: 1px !default;
/// @prop - Letter spacing of the list header
$list-header-ios-letter-spacing: 0 !default;
/// @prop - Text transform of the header in a list
$list-ios-header-text-transform: uppercase !default;
/// @prop - Text color of the list header
$list-header-ios-color: $text-color-step-150 !default;
/// @prop - Text color of the header in a list
$list-ios-header-color: $text-color-step-150 !default;
/// @prop - Background color of the header in a list
$list-ios-header-background-color: transparent !default;
/// @prop - Background color of the list header
$list-header-ios-background-color: transparent !default;

22
core/src/components/list-header/list-header.md.scss
View File

@@ -6,11 +6,25 @@
:host {
--background: transparent;
--color: #{$list-md-header-color};
--color: #{$list-header-md-color};
--border-color: #{$item-md-border-bottom-color};
@include padding-horizontal(calc(var(--ion-safe-area-left, 0px) + #{$list-md-header-padding-start}), null);
@include padding-horizontal(calc(var(--ion-safe-area-left, 0) + #{$list-header-md-padding-start}), null);
min-height: $list-md-header-min-height;
min-height: $list-header-md-min-height;
font-size: $list-md-header-font-size;
font-size: $list-header-md-font-size;
}
// List Header Lines
// --------------------------------------------------
// Full lines - apply the border to the list header
// Inset lines - apply the border to the list header inner
:host(.list-header-lines-full) {
--border-width: #{0 0 $item-md-border-bottom-width 0};
}
:host(.list-header-lines-inset) {
--inner-border-width: #{0 0 $item-md-border-bottom-width 0};
}

16
core/src/components/list-header/list-header.md.vars.scss
View File

@@ -4,14 +4,14 @@
// Material Design List Header
// --------------------------------------------------
/// @prop - Padding start of the header in a list
$list-md-header-padding-start: $item-md-padding-start !default;
/// @prop - Padding start of the list header
$list-header-md-padding-start: $item-md-padding-start !default;
/// @prop - Minimum height of the header in a list
$list-md-header-min-height: 45px !default;
/// @prop - Minimum height of the list header
$list-header-md-min-height: 45px !default;
/// @prop - Font size of the header in a list
$list-md-header-font-size: 14px !default;
/// @prop - Font size of the list header
$list-header-md-font-size: 14px !default;
/// @prop - Text color of the header in a list
$list-md-header-color: $text-color !default;
/// @prop - Text color of the list header
$list-header-md-color: $text-color !default;

57
core/src/components/list-header/list-header.scss
View File

@@ -8,7 +8,16 @@
/**
* @prop --background: Background of the list header
* @prop --color: Color of the list header text
*
* @prop --border-color: Color of the list header border
* @prop --border-width: Width of the list header border
* @prop --border-style: Style of the list header border
*
* @prop --inner-border-width: Width of the inner list header border
*/
--border-style: solid;
--border-width: 0;
--inner-border-width: 0;
@include font-smoothing();
@include margin(0);
@@ -22,6 +31,10 @@
width: 100%;
min-height: 40px;
border-width: var(--border-width);
border-style: var(--border-style);
border-color: var(--border-color);
background: var(--background);
color: var(--color);
@@ -32,3 +45,47 @@
background: current-color(base);
color: current-color(contrast);
}
// Inner List Header
// --------------------------------------------------
.list-header-inner {
display: flex;
// This is required to work with an inset highlight
position: relative;
flex: 1;
flex-direction: inherit;
align-items: inherit;
align-self: stretch;
min-height: inherit;
border-width: var(--inner-border-width);
border-style: var(--border-style);
border-color: var(--border-color);
overflow: inherit;
box-sizing: border-box;
}
::slotted(ion-label) {
flex: 1 1 auto;
}
// List Header Lines
// --------------------------------------------------
// Full lines - remove the border from the item inner (inset list items)
// Inset lines - remove the border on the item (full list items)
// No lines - remove the border on both (full / inset list items)
:host(.list-header-lines-inset),
:host(.list-header-lines-none) {
--border-width: 0;
}
:host(.list-header-lines-full),
:host(.list-header-lines-none) {
--inner-border-width: 0;
}

12
core/src/components/list-header/list-header.tsx
View File

@@ -24,16 +24,26 @@ export class ListHeader implements ComponentInterface {
*/
@Prop() color?: Color;
/**
* How the bottom border should be displayed on the list header.
*/
@Prop() lines?: 'full' | 'inset' | 'none';
render() {
const { lines } = this;
const mode = getIonMode(this);
return (
<Host
class={{
...createColorClasses(this.color),
[mode]: true,
[`list-header-lines-${lines}`]: lines !== undefined,
}}
>
<slot></slot>
<div class="list-header-inner">
<slot></slot>
</div>
</Host>
);
}

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

@@ -51,18 +51,23 @@ export const ListHeaderExample: React.FC = () => (
## Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `lines` | `lines` | How the bottom border should be displayed on the list header. | `"full" \| "inset" \| "none" \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## CSS Custom Properties
| Name | Description |
| -------------- | ----------------------------- |
| `--background` | Background of the list header |
| `--color` | Color of the list header text |
| Name | Description |
| ---------------------- | ------------------------------------- |
| `--background` | Background of the list header |
| `--border-color` | Color of the list header border |
| `--border-style` | Style of the list header border |
| `--border-width` | Width of the list header border |
| `--color` | Color of the list header text |
| `--inner-border-width` | Width of the inner list header border |
## Dependencies

10
core/src/components/list-header/test/spec/e2e.ts Normal file
View File

@@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
test('list-header: spec', async () => {
const page = await newE2EPage({
url: '/src/components/list-header/test/spec?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

80
core/src/components/list-header/test/spec/index.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>List Header - Spec</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>List Header - Spec</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content">
<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>
<ion-list>
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<ion-list-header lines="full">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<ion-list-header lines="inset">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
</ion-list>
</ion-content>
</ion-app>
<style>
</style>
</body>
</html>

2
core/src/components/list/list.ios.vars.scss
View File

@@ -11,7 +11,7 @@ $list-ios-margin-top: 10px !default;
$list-ios-margin-end: 0 !default;
/// @prop - Margin bottom of the list
$list-ios-margin-bottom: 32px !default;
$list-ios-margin-bottom: 0 !default;
/// @prop - Margin start of the list
$list-ios-margin-start: 0 !default;

108
core/src/components/list/test/lines/index.html
View File

@@ -22,64 +22,92 @@
<ion-content>
<ion-list lines="full">
<ion-list-header>Lines: full</ion-list-header>
<ion-item>Pokémon Yellow</ion-item>
<ion-item>Super Metroid</ion-item>
<ion-item>Mega Man X</ion-item>
<ion-item>The Legend of Zelda</ion-item>
<ion-item>Pac-Man</ion-item>
<ion-list-header>
<ion-label>
Lines: full
</ion-label>
</ion-list-header>
<ion-item><ion-label>Pokémon Yellow</ion-label></ion-item>
<ion-item><ion-label>Super Metroid</ion-label></ion-item>
<ion-item><ion-label>Mega Man X</ion-label></ion-item>
<ion-item><ion-label>The Legend of Zelda</ion-label></ion-item>
<ion-item><ion-label>Pac-Man</ion-label></ion-item>
</ion-list>
<ion-list lines="inset">
<ion-list-header>Lines: inset</ion-list-header>
<ion-item>Super Mario World</ion-item>
<ion-item>Street Fighter II</ion-item>
<ion-item>Half Life</ion-item>
<ion-item>Portal</ion-item>
<ion-list-header>
<ion-label>
Lines: inset
</ion-label>
</ion-list-header>
<ion-item><ion-label>Super Mario World</ion-label></ion-item>
<ion-item><ion-label>Street Fighter II</ion-label></ion-item>
<ion-item><ion-label>Half Life</ion-label></ion-item>
<ion-item><ion-label>Portal</ion-label></ion-item>
</ion-list>
<ion-list lines="none">
<ion-list-header>Lines: none</ion-list-header>
<ion-item>Star Fox</ion-item>
<ion-item>Tetris</ion-item>
<ion-item>Donkey Kong III</ion-item>
<ion-item>Goldeneye 007</ion-item>
<ion-list-header>
<ion-label>
Lines: none
</ion-label>
</ion-list-header>
<ion-item><ion-label>Star Fox</ion-label></ion-item>
<ion-item><ion-label>Tetris</ion-label></ion-item>
<ion-item><ion-label>Donkey Kong III</ion-label></ion-item>
<ion-item><ion-label>Goldeneye 007</ion-label></ion-item>
</ion-list>
<ion-list>
<ion-list-header>Lines: Default</ion-list-header>
<ion-item>Fallout</ion-item>
<ion-item>GTA</ion-item>
<ion-item>Halo</ion-item>
<ion-item>Doom</ion-item>
<ion-item>Final Fantasy VII</ion-item>
<ion-list-header>
<ion-label>
Lines: Default
</ion-label>
</ion-list-header>
<ion-item><ion-label>Fallout</ion-label></ion-item>
<ion-item><ion-label>GTA</ion-label></ion-item>
<ion-item><ion-label>Halo</ion-label></ion-item>
<ion-item><ion-label>Doom</ion-label></ion-item>
<ion-item><ion-label>Final Fantasy VII</ion-label></ion-item>
</ion-list>
<ion-list>
<ion-list-header>Wrapper item: default</ion-list-header>
<div><ion-item>Pokémon Yellow</ion-item></div>
<div><ion-item>Super Metroid</ion-item></div>
<div><ion-item>Mega Man X</ion-item></div>
<div><ion-item>The Legend of Zelda</ion-item></div>
<div><ion-item>Pac-Man</ion-item></div>
<ion-list-header>
<ion-label>
Wrapper item: default
</ion-label>
</ion-list-header>
<div><ion-item><ion-label>Pokémon Yellow</ion-item></ion-label></div>
<div><ion-item><ion-label>Super Metroid</ion-item></ion-label></div>
<div><ion-item><ion-label>Mega Man X</ion-item></ion-label></div>
<div><ion-item><ion-label>The Legend of Zelda</ion-item></ion-label></div>
<div><ion-item><ion-label>Pac-Man</ion-item></ion-label></div>
</ion-list>
<ion-list lines="none">
<ion-list-header>Wrapper list lines: none</ion-list-header>
<div><ion-item>Pokémon Yellow</ion-item></div>
<div><ion-item>Super Metroid</ion-item></div>
<div><ion-item>Mega Man X</ion-item></div>
<div><ion-item>The Legend of Zelda</ion-item></div>
<div><ion-item>Pac-Man</ion-item></div>
<ion-list-header>
<ion-label>
Wrapper list lines: none
</ion-label>
</ion-list-header>
<div><ion-item><ion-label>Pokémon Yellow</ion-item></ion-label></div>
<div><ion-item><ion-label>Super Metroid</ion-item></ion-label></div>
<div><ion-item><ion-label>Mega Man X</ion-item></ion-label></div>
<div><ion-item><ion-label>The Legend of Zelda</ion-item></ion-label></div>
<div><ion-item><ion-label>Pac-Man</ion-item></ion-label></div>
</ion-list>
<ion-list>
<ion-list-header>Wrapper w/ item lines: none</ion-list-header>
<div><ion-item lines="none">Pokémon Yellow</ion-item></div>
<div><ion-item lines="none">Super Metroid</ion-item></div>
<div><ion-item lines="none">Mega Man X</ion-item></div>
<div><ion-item lines="none">The Legend of Zelda</ion-item></div>
<div><ion-item lines="none">Pac-Man</ion-item></div>
<ion-list-header>
<ion-label>
Wrapper w/ item lines: none
</ion-label>
</ion-list-header>
<div><ion-item lines="none"><ion-label>Pokémon Yellow</ion-label></ion-item></div>
<div><ion-item lines="none"><ion-label>Super Metroid</ion-label></ion-item></div>
<div><ion-item lines="none"><ion-label>Mega Man X</ion-label></ion-item></div>
<div><ion-item lines="none"><ion-label>The Legend of Zelda</ion-label></ion-item></div>
<div><ion-item lines="none"><ion-label>Pac-Man</ion-label></ion-item></div>
</ion-list>
</ion-content>

12
core/src/components/note/test/basic/index.html
View File

@@ -22,7 +22,11 @@
<ion-content>
<ion-list>
<ion-list-header>Notes Right</ion-list-header>
<ion-list-header>
<ion-label>
Notes Right
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Default Note</ion-label>
<ion-note slot="end">99</ion-note>
@@ -80,7 +84,11 @@
</ion-list>
<ion-list>
<ion-list-header>Notes Left</ion-list-header>
<ion-list-header>
<ion-label>
Notes Left
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Default Note</ion-label>
<ion-note slot="start">99</ion-note>

4
core/src/components/popover/test/basic/index.html
View File

@@ -74,7 +74,7 @@
this.innerHTML = `
<ion-content>
<ion-list>
<ion-list-header>Ionic</ion-list-header>
<ion-list-header><ion-label>Ionic</ion-label></ion-list-header>
<ion-item><ion-label>Item 0</ion-label></ion-item>
<ion-item><ion-label>Item 1</ion-label></ion-item>
<ion-item><ion-label>Item 2</ion-label></ion-item>
@@ -101,7 +101,7 @@
this.innerHTML = `
<ion-content>
<ion-list>
<ion-list-header>Ionic</ion-list-header>
<ion-list-header><ion-label>Ionic</ion-label></ion-list-header>
` + items + `
</ion-list>
</ion-content>

4
core/src/components/popover/test/standalone/index.html
View File

@@ -49,7 +49,7 @@
this.innerHTML = `
<ion-content>
<ion-list>
<ion-list-header>Ionic</ion-list-header>
<ion-list-header><ion-label>Ionic</ion-label></ion-list-header>
<ion-item><ion-label>Item 0</ion-label></ion-item>
<ion-item><ion-label>Item 1</ion-label></ion-item>
<ion-item><ion-label>Item 2</ion-label></ion-item>
@@ -76,7 +76,7 @@
this.innerHTML = `
<ion-content>
<ion-list>
<ion-list-header>Ionic</ion-list-header>
<ion-list-header><ion-label>Ionic</ion-label></ion-list-header>
` + items + `
</ion-list>
</ion-content>

14
core/src/components/radio-group/readme.md
View File

@@ -19,7 +19,9 @@ radio button within the same group.
<ion-list>
<ion-radio-group>
<ion-list-header>
Auto Manufacturers
<ion-label>
Auto Manufacturers
</ion-label>
</ion-list-header>
<ion-item>
@@ -61,7 +63,11 @@ export const RadioGroupExample: React.FC = () => (
<IonContent>
<IonList>
<IonRadioGroup>
<IonListHeader>Auto Manufacturers</IonListHeader>
<IonListHeader>
<IonLabel>
Auto Manufacturers
</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Cord</IonLabel>
@@ -101,7 +107,9 @@ export const RadioGroupExample: React.FC = () => (
<ion-list>
<ion-radio-group>
<ion-list-header>
Auto Manufacturers
<ion-label>
Auto Manufacturers
</ion-label>
</ion-list-header>
<ion-item>

4
core/src/components/radio-group/usage/angular.md
View File

@@ -2,7 +2,9 @@
<ion-list>
<ion-radio-group>
<ion-list-header>
Auto Manufacturers
<ion-label>
Auto Manufacturers
</ion-label>
</ion-list-header>
<ion-item>

4
core/src/components/radio-group/usage/javascript.md
View File

@@ -2,7 +2,9 @@
<ion-list>
<ion-radio-group>
<ion-list-header>
Auto Manufacturers
<ion-label>
Auto Manufacturers
</ion-label>
</ion-list-header>
<ion-item>

6
core/src/components/radio-group/usage/react.md
View File

@@ -6,7 +6,11 @@ export const RadioGroupExample: React.FC = () => (
<IonContent>
<IonList>
<IonRadioGroup>
<IonListHeader>Auto Manufacturers</IonListHeader>
<IonListHeader>
<IonLabel>
Auto Manufacturers
</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Cord</IonLabel>

4
core/src/components/radio-group/usage/vue.md
View File

@@ -3,7 +3,9 @@
<ion-list>
<ion-radio-group>
<ion-list-header>
Auto Manufacturers
<ion-label>
Auto Manufacturers
</ion-label>
</ion-list-header>
<ion-item>

4
core/src/components/radio/test/basic/index.html
View File

@@ -89,7 +89,9 @@
<ion-list>
<ion-list-header>
No Radio Group
<ion-label>
No Radio Group
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>

20
core/src/components/range/test/basic/index.html
View File

@@ -23,7 +23,9 @@
<ion-content id="content">
<ion-list>
<ion-list-header>
Range color
<ion-label>
Range color
</ion-label>
</ion-list-header>
<ion-item>
<ion-range value="20"></ion-range>
@@ -54,7 +56,9 @@
<ion-list>
<ion-list-header>
Dynamic Value
<ion-label>
Dynamic Value
</ion-label>
</ion-list-header>
<ion-item>
<ion-range pin="true" step="0" color="secondary" id="progressValue"></ion-range>
@@ -75,7 +79,9 @@
<ion-list>
<ion-list-header>
Mode
<ion-label>
Mode
</ion-label>
</ion-list-header>
<ion-item>
<ion-range value="50" mode="md"></ion-range>
@@ -87,7 +93,9 @@
<ion-list>
<ion-list-header>
Options
<ion-label>
Options
</ion-label>
</ion-list-header>
<ion-item>
<ion-range pin="true"></ion-range>
@@ -113,7 +121,9 @@
<ion-list>
<ion-list-header>
Coupled sliders
<ion-label>
Coupled sliders
</ion-label>
</ion-list-header>
<ion-item>
<ion-range min="0" value="0" max="50" id="minRange"></ion-range>

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>

40
core/src/components/skeleton-text/readme.md
View File

@@ -18,7 +18,11 @@ Skeleton Text is a component for rendering placeholder content. The element will
</div>
<ion-list>
<ion-list-header>Data</ion-list-header>
<ion-list-header>
<ion-label>
Data
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="./avatar.svg">
@@ -80,7 +84,9 @@ Skeleton Text is a component for rendering placeholder content. The element will
<ion-list>
<ion-list-header>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
<ion-label>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
@@ -179,7 +185,11 @@ export class SkeletonTextExample {
</div>
<ion-list>
<ion-list-header>Data</ion-list-header>
<ion-list-header>
<ion-label>
Data
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="./avatar.svg">
@@ -241,7 +251,9 @@ export class SkeletonTextExample {
<ion-list>
<ion-list-header>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
<ion-label>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
@@ -360,7 +372,11 @@ export const SkeletonTextExample: React.FC = () => {
</div>
<IonList>
<IonListHeader>Data</IonListHeader>
<IonListHeader>
<IonLabel>
Data
</IonLabel>
</IonListHeader>
<IonItem>
<IonAvatar slot="start">
<img src="./avatar.svg" />
@@ -403,7 +419,9 @@ export const SkeletonTextExample: React.FC = () => {
<IonList>
<IonListHeader>
<IonSkeletonText animated style={{ width: '20%' }} />
<IonLabel>
<IonSkeletonText animated style={{ width: '20%' }} />
</IonLabel>
</IonListHeader>
<IonItem>
<IonAvatar slot="start">
@@ -482,7 +500,11 @@ export const SkeletonTextExample: React.FC = () => {
</div>
<ion-list>
<ion-list-header>Data</ion-list-header>
<ion-list-header>
<ion-label>
Data
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="./avatar.svg">
@@ -544,7 +566,9 @@ export const SkeletonTextExample: React.FC = () => {
<ion-list>
<ion-list-header>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
<ion-label>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">

16
core/src/components/skeleton-text/test/basic/index.html
View File

@@ -29,7 +29,11 @@
</div>
<ion-list>
<ion-list-header>Data</ion-list-header>
<ion-list-header>
<ion-label>
Data
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="/src/components/avatar/test/avatar.svg">
@@ -90,7 +94,9 @@
<ion-list>
<ion-list-header>
<ion-skeleton-text style="width: 20%"></ion-skeleton-text>
<ion-label>
<ion-skeleton-text style="width: 20%"></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
@@ -142,7 +148,11 @@
</div>
<ion-list>
<ion-list-header>Animated</ion-list-header>
<ion-list-header>
<ion-label>
Animated
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<ion-skeleton-text animated></ion-skeleton-text>

10
core/src/components/skeleton-text/usage/angular.md
View File

@@ -6,7 +6,11 @@
</div>
<ion-list>
<ion-list-header>Data</ion-list-header>
<ion-list-header>
<ion-label>
Data
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="./avatar.svg">
@@ -68,7 +72,9 @@
<ion-list>
<ion-list-header>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
<ion-label>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">

10
core/src/components/skeleton-text/usage/javascript.md
View File

@@ -6,7 +6,11 @@
</div>
<ion-list>
<ion-list-header>Data</ion-list-header>
<ion-list-header>
<ion-label>
Data
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="./avatar.svg">
@@ -68,7 +72,9 @@
<ion-list>
<ion-list-header>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
<ion-label>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">

10
core/src/components/skeleton-text/usage/react.md
View File

@@ -35,7 +35,11 @@ export const SkeletonTextExample: React.FC = () => {
</div>
<IonList>
<IonListHeader>Data</IonListHeader>
<IonListHeader>
<IonLabel>
Data
</IonLabel>
</IonListHeader>
<IonItem>
<IonAvatar slot="start">
<img src="./avatar.svg" />
@@ -78,7 +82,9 @@ export const SkeletonTextExample: React.FC = () => {
<IonList>
<IonListHeader>
<IonSkeletonText animated style={{ width: '20%' }} />
<IonLabel>
<IonSkeletonText animated style={{ width: '20%' }} />
</IonLabel>
</IonListHeader>
<IonItem>
<IonAvatar slot="start">

10
core/src/components/skeleton-text/usage/vue.md
View File

@@ -7,7 +7,11 @@
</div>
<ion-list>
<ion-list-header>Data</ion-list-header>
<ion-list-header>
<ion-label>
Data
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="./avatar.svg">
@@ -69,7 +73,9 @@
<ion-list>
<ion-list-header>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
<ion-label>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">

4
core/src/components/spinner/test/basic/index.html
View File

@@ -23,7 +23,9 @@
<ion-content id="content">
<ion-list>
<ion-list-header>
Spinner Loading Indicators
<ion-label>
Spinner Loading Indicators
</ion-label>
</ion-list-header>
<ion-item>
<ion-spinner slot="start"></ion-spinner>