javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(item): update existing item tests and add new ones

Browse Source
This commit is contained in:
Brandy Carney
2018-01-17 18:26:17 -05:00
parent aa45ff1c34
commit 458f758e19
3 changed files with 79 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/core/src/components/item-divider/test/standalone/index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Item Divider - Standalone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-item-divider>
<ion-label>Item Divider</ion-label>
<ion-button slot="end">button</ion-button>
</ion-item-divider>
</body>
<style>
body {
margin: 0;
}
</style>
</html>

60
packages/core/src/components/item/test/dividers/index.html
View File

@ -20,76 +20,104 @@
<ion-content class="outer-content">
<ion-item-divider>
<ion-label>
Divider by itself
</ion-label>
</ion-item-divider>
<ion-list>
<ion-item-divider>
<ion-label>
Divider in List
</ion-label>
</ion-item-divider>
<ion-item-divider color="danger">
<ion-label>
Danger Divider in List
</ion-label>
</ion-item-divider>
</ion-list>
<ion-item-group>
<ion-item-divider>
<ion-label>
Divider in Item Group
</ion-label>
</ion-item-divider>
<ion-item-divider color="secondary">
<ion-label>
Secondary Divider in Item Group
</ion-label>
</ion-item-divider>
</ion-item-group>
<ion-item-group>
<ion-item>
<h3 ion-text color="secondary">Secondary header</h3>
<ion-label>
<ion-text color="secondary"><h3>Secondary header</h3></ion-text>
Plain Ol' div with some text
</ion-label>
</ion-item>
</ion-item-group>
<ion-item-group>
<ion-item-divider>
Item Divider <span ion-text color="danger">Danger Span</span>
<button ion-button item-end>button</button>
<ion-label>
Item Divider
<ion-text color="danger">
Danger Span
</ion-text>
</ion-label>
<ion-button slot="end">button</ion-button>
</ion-item-divider>
<ion-item text-wrap class="custom-item">
<ion-label>
Multiline text that should wrap when it is too long
to fit on one line in the item. Attribute on .item
</ion-label>
</ion-item>
</ion-item-group>
<ion-item-group>
<ion-item-divider color="dark">
<button ion-button item-start clear>
<ion-icon name="cloudy"></ion-icon>
</button>
<button ion-button item-start clear color="light">
<ion-icon name="rainy"></ion-icon>
</button>
Dark <h5 ion-text color="primary">Primary h5</h5>
<ion-button slot="start" fill="clear">
<ion-icon slot="icon-only" name="cloudy"></ion-icon>
</ion-button>
<ion-button slot="start" fill="clear" color="light">
<ion-icon slot="icon-only" name="rainy"></ion-icon>
</ion-button>
<ion-label>
Dark
<ion-text color="primary">
<h5>Primary h5</h5>
</ion-text>
</ion-label>
</ion-item-divider>
<ion-item text-wrap>
<ion-label>
<h1>H1 Title Text</h1>
</ion-label>
</ion-item>
</ion-item-group>
<ion-item-group>
<ion-item-divider color="light">
<ion-avatar item-start>
<ion-avatar slot="start">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
Light
<button ion-button item-end clear color="danger">
<ion-label>Light</ion-label>
<ion-button slot="end" fill="clear" color="danger">
<ion-icon name="sunny"></ion-icon>
</button>
</ion-button>
</ion-item-divider>
<ion-item-divider color="primary">
Primary
<ion-thumbnail item-end>
<ion-label>Primary</ion-label>
<ion-thumbnail slot="end">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail>
</ion-item-divider>

4
packages/core/src/components/item/test/text/index.html
View File

@ -82,9 +82,9 @@
<ion-item text-wrap>
<ion-label>
<ion-text><h3 color="primary">H3 Title Text</h3></ion-text>
<ion-text color="primary"><h3>H3 Title Text</h3></ion-text>
<p>Paragraph line 1</p>
<ion-text><p color="secondary">Paragraph line 2 secondary</p></ion-text>
<ion-text color="secondary"><p>Paragraph line 2 secondary</p></ion-text>
</ion-label>
</ion-item>