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>

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

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

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

@ -82,9 +82,9 @@
<ion-item text-wrap> <ion-item text-wrap>
<ion-label> <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> <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-label>
</ion-item> </ion-item>