javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(buttons): add documentation and usage

Browse Source
This commit is contained in:
Brandy Carney
2018-04-10 18:26:33 -04:00
parent 89b46ac52f
commit 2c9d485d2d
4 changed files with 94 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components/buttons/readme.md
View File

@ -1,5 +1,15 @@
# ion-buttons
The Buttons component is a container element. Buttons placed in a toolbar should be placed inside of the `<ion-buttons>` element.
The `<ion-buttons>` element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.
| Slot | Description |
|--------------|----------------------------------------------------------------------------------------------------------|
| `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. |
| `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. |
| `start` | Positions to the `left` of the content in LTR, and to the `right` in RTL. |
| `end` | Positions to the `right` of the content in LTR, and to the `left` in RTL. |
<!-- Auto Generated Below -->

4
core/src/components/buttons/test/icon/index.html
View File

@ -2,7 +2,7 @@
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Button - Basic</title>
<title>Buttons - Basic</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>
@ -11,7 +11,7 @@
<ion-header>
<ion-toolbar>
<ion-title>Button - Basic</ion-title>
<ion-title>Buttons - Basic</ion-title>
<ion-buttons slot="secondary">
<ion-button>start btn</ion-button>
</ion-buttons>

41
core/src/components/buttons/usage/angular.md Normal file
View File

@ -0,0 +1,41 @@
```html
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Back Button</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button (click)="clickedStar()">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end">
<ion-menu-toggle autoHide="false">
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
</ion-toolbar>
```

41
core/src/components/buttons/usage/javascript.md Normal file
View File

@ -0,0 +1,41 @@
```html
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Back Button</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button onclick="clickedStar()">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end">
<ion-menu-toggle auto-hide="false">
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
</ion-toolbar>
```