mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +08:00
docs(components): add usage examples for components missing them
This commit is contained in:
Brandy Carney
48
core/src/components/card/usage/angular.md
Normal file
48
core/src/components/card/usage/angular.md
Normal file
@ -0,0 +1,48 @@
|
||||
```html
|
||||
<ion-card>
|
||||
<ion-card-header>
|
||||
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
|
||||
<ion-card-title>Card Title</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content>
|
||||
Keep close to Nature's heart... and break clear away, once in awhile,
|
||||
and climb a mountain or spend a week in the woods. Wash your spirit clean.
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
<ion-item>
|
||||
<ion-icon name="pin" slot="start"></ion-icon>
|
||||
<ion-label>ion-item in a card, icon left, button right</ion-label>
|
||||
<ion-button fill="outline" slot="end">View</ion-button>
|
||||
</ion-item>
|
||||
|
||||
<ion-card-content>
|
||||
This is content, without any paragraph or header tags,
|
||||
within an ion-card-content element.
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
<ion-item href="#" class="activated">
|
||||
<ion-icon name="wifi" slot="start"></ion-icon>
|
||||
<ion-label>Card Link Item 1 .activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item href="#">
|
||||
<ion-icon name="wine" slot="start"></ion-icon>
|
||||
<ion-label>Card Link Item 2</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="activated">
|
||||
<ion-icon name="warning" slot="start"></ion-icon>
|
||||
<ion-label>Card Button Item 1 .activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="walk" slot="start"></ion-icon>
|
||||
<ion-label>Card Button Item 2</ion-label>
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
```
|
||||
26
core/src/components/chip-button/usage/angular.md
Normal file
26
core/src/components/chip-button/usage/angular.md
Normal file
@ -0,0 +1,26 @@
|
||||
```html
|
||||
<ion-chip>
|
||||
<ion-label>Button Chip</ion-label>
|
||||
<ion-chip-button fill="clear" color="light">
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip-button>
|
||||
</ion-chip>
|
||||
|
||||
<ion-chip>
|
||||
<ion-icon name="pin" color="primary"></ion-icon>
|
||||
<ion-label>Icon Chip</ion-label>
|
||||
<ion-chip-button>
|
||||
<ion-icon name="close"></ion-icon>
|
||||
</ion-chip-button>
|
||||
</ion-chip>
|
||||
|
||||
<ion-chip>
|
||||
<ion-avatar>
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
|
||||
</ion-avatar>
|
||||
<ion-label>Avatar Chip</ion-label>
|
||||
<ion-chip-button fill="clear" color="dark">
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip-button>
|
||||
</ion-chip>
|
||||
```
|
||||
48
core/src/components/chip/usage/angular.md
Normal file
48
core/src/components/chip/usage/angular.md
Normal file
@ -0,0 +1,48 @@
|
||||
```html
|
||||
<ion-chip>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
|
||||
<ion-chip>
|
||||
<ion-label color="secondary">Secondary Label</ion-label>
|
||||
</ion-chip>
|
||||
|
||||
<ion-chip color="secondary">
|
||||
<ion-label color="dark">Secondary w/ Dark label</ion-label>
|
||||
</ion-chip>
|
||||
|
||||
<ion-chip>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
|
||||
<ion-chip>
|
||||
<ion-icon name="heart" color="dark"></ion-icon>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
|
||||
<ion-chip>
|
||||
<ion-label>Button Chip</ion-label>
|
||||
<ion-chip-button fill="clear" color="light">
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip-button>
|
||||
</ion-chip>
|
||||
|
||||
<ion-chip>
|
||||
<ion-icon name="pin" color="primary"></ion-icon>
|
||||
<ion-label>Icon Chip</ion-label>
|
||||
<ion-chip-button>
|
||||
<ion-icon name="close"></ion-icon>
|
||||
</ion-chip-button>
|
||||
</ion-chip>
|
||||
|
||||
<ion-chip>
|
||||
<ion-avatar>
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
|
||||
</ion-avatar>
|
||||
<ion-label>Avatar Chip</ion-label>
|
||||
<ion-chip-button fill="clear" color="dark">
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip-button>
|
||||
</ion-chip>
|
||||
```
|
||||
23
core/src/components/fab-button/usage/angular.md
Normal file
23
core/src/components/fab-button/usage/angular.md
Normal file
@ -0,0 +1,23 @@
|
||||
```html
|
||||
<ion-content>
|
||||
|
||||
<!-- Fixed Floating Action Button that does not scroll with the content -->
|
||||
<ion-fab>
|
||||
<ion-fab-button>Button</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
<!-- Default Floating Action Button that scrolls with the content.-->
|
||||
<ion-fab-button>Default</ion-fab-button>
|
||||
|
||||
<!-- Mini -->
|
||||
<ion-fab-button mini>Mini</ion-fab-button>
|
||||
|
||||
<!-- Colors -->
|
||||
<ion-fab-button color="primary">Primary</ion-fab-button>
|
||||
<ion-fab-button color="secondary">Secondary</ion-fab-button>
|
||||
<ion-fab-button color="danger">Danger</ion-fab-button>
|
||||
<ion-fab-button color="light">Light</ion-fab-button>
|
||||
<ion-fab-button color="dark">Dark</ion-fab-button>
|
||||
|
||||
</ion-content>
|
||||
```
|
||||
16
core/src/components/fab-list/usage/angular.md
Normal file
16
core/src/components/fab-list/usage/angular.md
Normal file
@ -0,0 +1,16 @@
|
||||
```html
|
||||
<ion-fab vertical="bottom" horizontal="end">
|
||||
<ion-fab-button>Share</ion-fab-button>
|
||||
|
||||
<ion-fab-list side="top">
|
||||
<ion-fab-button>Facebook</ion-fab-button>
|
||||
<ion-fab-button>Twitter</ion-fab-button>
|
||||
<ion-fab-button>Youtube</ion-fab-button>
|
||||
</ion-fab-list>
|
||||
|
||||
<ion-fab-list side="start">
|
||||
<ion-fab-button>Vimeo</ion-fab-button>
|
||||
</ion-fab-list>
|
||||
|
||||
</ion-fab>
|
||||
```
|
||||
81
core/src/components/fab/usage/angular.md
Normal file
81
core/src/components/fab/usage/angular.md
Normal file
@ -0,0 +1,81 @@
|
||||
```html
|
||||
<ion-content>
|
||||
<!-- fab placed to the top end -->
|
||||
<ion-fab vertical="top" horizontal="end" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
<!-- fab placed to the bottom end -->
|
||||
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="arrow-dropleft"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
<!-- fab placed to the top start -->
|
||||
<ion-fab vertical="top" horizontal="start" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="arrow-dropright"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
<!-- fab placed to the bottom start -->
|
||||
<ion-fab vertical="bottom" horizontal="start" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="arrow-dropup"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
<!-- fab placed to the (vertical) center and start -->
|
||||
<ion-fab vertical="center" horizontal="start" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="share"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
<!-- fab placed to the (vertical) center and end -->
|
||||
<ion-fab vertical="center" horizontal="end" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
<!-- fab placed to the top and end and on the top edge of the content overlapping header -->
|
||||
<ion-fab vertical="top" horizontal="end" edge slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="person"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
|
||||
<!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->
|
||||
<ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-list side="end">
|
||||
<ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<!-- fab placed in the center of the content with a list on each side -->
|
||||
<ion-fab vertical="center" horizontal="center" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="share"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-list side="top">
|
||||
<ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="bottom">
|
||||
<ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="start">
|
||||
<ion-fab-button><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="end">
|
||||
<ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
</ion-content>
|
||||
```
|
||||
179
core/src/components/grid/usage/angular.md
Normal file
179
core/src/components/grid/usage/angular.md
Normal file
@ -0,0 +1,179 @@
|
||||
```html
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
ion-col [size="6"]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="3">
|
||||
ion-col [size="3"]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col size="3">
|
||||
ion-col [size="3"]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="3">
|
||||
ion-col [size="3"]
|
||||
</ion-col>
|
||||
<ion-col size="3" offset="3">
|
||||
ion-col [size="3"] [offset="3"]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col align-self-start>
|
||||
ion-col [start]
|
||||
</ion-col>
|
||||
<ion-col align-self-center>
|
||||
ion-col [center]
|
||||
</ion-col>
|
||||
<ion-col align-self-end>
|
||||
ion-col [end]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row align-items-start>
|
||||
<ion-col>
|
||||
[start] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
[start] ion-col
|
||||
</ion-col>
|
||||
<ion-col align-self-end>
|
||||
[start] ion-col [end]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row align-items-center>
|
||||
<ion-col>
|
||||
[center] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
[center] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
[center] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row align-items-end>
|
||||
<ion-col>
|
||||
[end] ion-col
|
||||
</ion-col>
|
||||
<ion-col align-self-start>
|
||||
[end] ion-col [start]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
[end] ion-col
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="12" size-sm>
|
||||
ion-col [size="12"] [size-sm]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
ion-col [size="12"] [size-sm]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
ion-col [size="12"] [size-sm]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
ion-col [size="12"] [size-sm]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="12" size-md>
|
||||
ion-col [size="12"] [size-md]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-md>
|
||||
ion-col [size="12"] [size-md]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-md>
|
||||
ion-col [size="12"] [size-md]
|
||||
</ion-col>
|
||||
<ion-col size="12" size-md>
|
||||
ion-col [size="12"] [size-md]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="6" size-lg offset="3">
|
||||
ion-col [size="6"] [size-lg] [offset="3"]
|
||||
</ion-col>
|
||||
<ion-col size="3" size-lg>
|
||||
ion-col [size="3"] [size-lg]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
```
|
||||
18
core/src/components/icon/usage/angular.md
Normal file
18
core/src/components/icon/usage/angular.md
Normal file
@ -0,0 +1,18 @@
|
||||
```html
|
||||
<!-- automatically uses the correct "star" icon depending on the mode -->
|
||||
<ion-icon name="star"></ion-icon>
|
||||
|
||||
<!-- explicitly set the icon for each mode -->
|
||||
<ion-icon ios="ios-home" md="md-home"></ion-icon>
|
||||
|
||||
<!-- always use the same icon, no matter what the mode is -->
|
||||
<ion-icon name="ios-clock"></ion-icon>
|
||||
<ion-icon name="logo-twitter"></ion-icon>
|
||||
|
||||
<!-- use a custom svg icon -->
|
||||
<ion-icon src="/path/to/external/file.svg"></ion-icon>
|
||||
|
||||
<!-- set the icon size -->
|
||||
<ion-icon size="small" name="heart"></ion-icon>
|
||||
<ion-icon size="large" name="heart"></ion-icon>
|
||||
```
|
||||
@ -2,7 +2,7 @@
|
||||
<!-- automatically uses the correct "star" icon depending on the mode -->
|
||||
<ion-icon name="star"></ion-icon>
|
||||
|
||||
<!-- explicity set the icon for each mode -->
|
||||
<!-- explicitly set the icon for each mode -->
|
||||
<ion-icon ios="ios-home" md="md-home"></ion-icon>
|
||||
|
||||
<!-- always use the same icon, no matter what the mode is -->
|
||||
|
||||
40
core/src/components/item-divider/usage/angular.md
Normal file
40
core/src/components/item-divider/usage/angular.md
Normal file
@ -0,0 +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>
|
||||
<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>
|
||||
```
|
||||
103
core/src/components/item-group/usage/angular.md
Normal file
103
core/src/components/item-group/usage/angular.md
Normal file
@ -0,0 +1,103 @@
|
||||
```html
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>A</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Angola</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Argentina</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Armenia</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>B</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Bangladesh</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Belarus</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Belgium</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
|
||||
<!-- They can also be used to group sliding items -->
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
Fruits
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>Grapes</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option>
|
||||
Favorite
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>Apples</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option>
|
||||
Favorite
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
<ion-label>
|
||||
Vegetables
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>Carrots</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option>
|
||||
Favorite
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>Celery</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option>
|
||||
Favorite
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
</ion-item-group>
|
||||
```
|
||||
88
core/src/components/reorder/usage/angular.md
Normal file
88
core/src/components/reorder/usage/angular.md
Normal file
@ -0,0 +1,88 @@
|
||||
```html
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-reorder-group>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
Item 1
|
||||
</ion-label>
|
||||
<ion-reorder slot="end"></ion-reorder>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
Item 2
|
||||
</ion-label>
|
||||
<ion-reorder slot="end"></ion-reorder>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
Item 3 (default ion-reorder slot="start")
|
||||
</ion-label>
|
||||
<ion-reorder slot="start"></ion-reorder>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="secondary">
|
||||
<ion-label>
|
||||
Item 4 (default ion-reorder slot="start")
|
||||
</ion-label>
|
||||
<ion-reorder slot="start"></ion-reorder>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
Item 5 (custom ion-reorder)
|
||||
</ion-label>
|
||||
<ion-reorder slot="end">
|
||||
<ion-icon name="pizza"></ion-icon>
|
||||
</ion-reorder>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
Item 6 (custom ion-reorder)
|
||||
</ion-label>
|
||||
<ion-reorder slot="end">
|
||||
<ion-icon name="pizza"></ion-icon>
|
||||
</ion-reorder>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
Item 7 (custom ion-reorder slot="start")
|
||||
</ion-label>
|
||||
<ion-reorder slot="start">
|
||||
<ion-icon name="pizza"></ion-icon>
|
||||
</ion-reorder>
|
||||
</ion-item>
|
||||
|
||||
<ion-reorder>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
Item 8 (the whole item can be dragged)
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-reorder>
|
||||
|
||||
<ion-reorder>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
Item 9 (the whole item can be dragged)
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-reorder>
|
||||
|
||||
<ion-reorder>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
Item 10 (the whole item can be dragged)
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-reorder>
|
||||
|
||||
</ion-reorder-group>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
```
|
||||
25
core/src/components/spinner/usage/angular.md
Normal file
25
core/src/components/spinner/usage/angular.md
Normal file
@ -0,0 +1,25 @@
|
||||
```html
|
||||
<!-- Default Spinner -->
|
||||
<ion-spinner></ion-spinner>
|
||||
|
||||
<!-- Lines -->
|
||||
<ion-spinner name="lines"></ion-spinner>
|
||||
|
||||
<!-- Lines Small -->
|
||||
<ion-spinner name="lines-small"></ion-spinner>
|
||||
|
||||
<!-- Dots -->
|
||||
<ion-spinner name="dots"></ion-spinner>
|
||||
|
||||
<!-- Bubbles -->
|
||||
<ion-spinner name="bubbles"></ion-spinner>
|
||||
|
||||
<!-- Circles -->
|
||||
<ion-spinner name="circles"></ion-spinner>
|
||||
|
||||
<!-- Crescent -->
|
||||
<ion-spinner name="crescent"></ion-spinner>
|
||||
|
||||
<!-- Paused Default Spinner -->
|
||||
<ion-spinner paused></ion-spinner>
|
||||
```
|
||||
Reference in New Issue
Block a user