mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
docs(item-divider): update usage examples and add preview
This commit is contained in:
Brandy Carney
@ -1,7 +1,6 @@
|
||||
# ion-item-divider
|
||||
|
||||
Item Divider is divider component for list items.
|
||||
Similar to ListHeaders, item dividers are styled to be inset with the rest of the list items.
|
||||
Item Dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead of being placed at the top of a list, they should go in between groups of like items.
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
154
core/src/components/item-divider/test/preview/index.html
Normal file
154
core/src/components/item-divider/test/preview/index.html
Normal file
@ -0,0 +1,154 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Item - Dividers</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-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Item Divider</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content id="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>
|
||||
<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>
|
||||
<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">
|
||||
<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 slot="start">
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</ion-avatar>
|
||||
<ion-label>Light</ion-label>
|
||||
<ion-button slot="end" fill="clear" color="danger">
|
||||
<ion-icon name="sunny"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item-divider color="primary">
|
||||
<ion-label>Primary</ion-label>
|
||||
<ion-thumbnail slot="end">
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</ion-thumbnail>
|
||||
</ion-item-divider>
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item-group>
|
||||
<ion-item-divider color="secondary">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
Column 1
|
||||
</ion-label>
|
||||
<ion-label>
|
||||
Column 2
|
||||
</ion-label>
|
||||
<ion-label>
|
||||
Column 3
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
img {
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,16 +1,40 @@
|
||||
```html
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
Basic Item Divider
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item-divider color="secondary">
|
||||
<ion-label>
|
||||
Secondary Item Divider
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<!-- Item Dividers in a List -->
|
||||
<ion-list>
|
||||
<ion-item-divider>Section A</ion-item-divider>
|
||||
<ion-item>A1</ion-item>
|
||||
<ion-item>A2</ion-item>
|
||||
<ion-item>A3</ion-item>
|
||||
<ion-item>A4</ion-item>
|
||||
<ion-item>A5</ion-item>
|
||||
<ion-item-divider>Section B</ion-item-divider>
|
||||
<ion-item>B1</ion-item>
|
||||
<ion-item>B2</ion-item>
|
||||
<ion-item>B3</ion-item>
|
||||
<ion-item>B4</ion-item>
|
||||
<ion-item>B5</ion-item>
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
Section A
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item><ion-label>A1</ion-label></ion-item>
|
||||
<ion-item><ion-label>A2</ion-label></ion-item>
|
||||
<ion-item><ion-label>A3</ion-label></ion-item>
|
||||
<ion-item><ion-label>A4</ion-label></ion-item>
|
||||
<ion-item><ion-label>A5</ion-label></ion-item>
|
||||
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
Section B
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item><ion-label>B1</ion-label></ion-item>
|
||||
<ion-item><ion-label>B2</ion-label></ion-item>
|
||||
<ion-item><ion-label>B3</ion-label></ion-item>
|
||||
<ion-item><ion-label>B4</ion-label></ion-item>
|
||||
<ion-item><ion-label>B5</ion-label></ion-item>
|
||||
</ion-list>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user