mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(toolbar): remove the mode-start and mode-end slots
- adds examples of the new way to achieve this in the e2e tests - updates breaking change to document the new slots properly and with examples - removes the first-child margin on buttons in toolbar - removes the margin on ion-buttons closes #14172
This commit is contained in:
Brandy Carney
79
BREAKING.md
79
BREAKING.md
@@ -928,22 +928,71 @@ $app-md-statusbar-padding: 20px;
|
||||
|
||||
### Attributes Renamed
|
||||
|
||||
The attributes to position an `ion-buttons` element inside of a toolbar have been renamed, as well as the behavior attached to the name. We noticed there was some confusion behind the behavior of the `start` and `end` attributes, and with the new support for RTL we wanted to make the behavior of these match RTL. In order to do this we had to rename the old `start`/`end` to something that makes more sense with their behavior.
|
||||
The attributes to position an `ion-buttons` element inside of a toolbar have been either removed or renamed, as well as the behavior of the attributes. We noticed there was some confusion behind the behavior of the `start` and `end` attributes, and with the new support for RTL we wanted to make these match RTL. In order to do this we have removed the old functionality behind the `start`/`end` attributes and renamed the `left`/`right` attributes.
|
||||
|
||||
The names and behavior of each of the properties was previously:
|
||||
**Old Properties:**
|
||||
|
||||
| Old Property | Property Behavior |
|
||||
|--------------|--------------------------------------------------------------------------------------------------------------|
|
||||
| `start` | Positions element to the left of the content in `ios` mode, and directly to the right in `md` and `wp` mode. |
|
||||
| `end` | Positions element to the right of the content in `ios` mode, and to the far right in `md` and `wp` mode. |
|
||||
| `left` | Positions element to the left of all other elements. |
|
||||
| `right` | Positions element to the right of all other elements. |
|
||||
| Old Property | Old Behavior |
|
||||
|--------------|------------------------------------------------------------------------------------------------------------------|
|
||||
| `start` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` and `wp` mode. |
|
||||
| `end` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` and `wp` mode. |
|
||||
| `left` | Positions element to the `left` of all other elements. |
|
||||
| `right` | Positions element to the `right` of all other elements. |
|
||||
|
||||
The properties have been renamed to the following:
|
||||
**New Properties:**
|
||||
|
||||
| Old Property | New Property | Property Behavior |
|
||||
|--------------|---------------------|------------------------------------------------------------------------------------------------------------------|
|
||||
| `start` | `slot="mode-start"` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` and `wp` mode. |
|
||||
| `end` | `slot="mode-end"` | Positions element to the `right` of the content in `ios` mode, and to the far right in `md` and `wp` mode. |
|
||||
| `left` | `slot="start"` | Positions element to the `left` of all other elements in `LTR`, and to the `right` in `RTL`. |
|
||||
| `right` | `slot="end"` | Positions element to the `right` of all other elements in `LTR`, and to the `left` in `RTL`. |
|
||||
| New Property | New Behavior |
|
||||
|------------------|--------------------------------------------------------------------------------------------------------------|
|
||||
| `slot="start"` | Positions element to the `left` of all other elements in `LTR`, and to the `right` in `RTL`. |
|
||||
| `slot="end"` | Positions element to the `right` of all other elements in `LTR`, and to the `left` in `RTL`. |
|
||||
|
||||
|
||||
**Old Usage Example:**
|
||||
|
||||
```html
|
||||
<ion-toolbar>
|
||||
<ion-buttons left>
|
||||
<button ion-button>Cancel</button>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-title>
|
||||
Filter Sessions
|
||||
</ion-title>
|
||||
|
||||
<ion-buttons right>
|
||||
<button ion-button>Done</button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
```
|
||||
|
||||
**New Usage Example:**
|
||||
|
||||
```html
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-button>Cancel</ion-button>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-title>
|
||||
Filter Sessions
|
||||
</ion-title>
|
||||
|
||||
<ion-buttons slot="end">
|
||||
<ion-button>Done</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
```
|
||||
|
||||
If you need to position buttons based on the mode, we recommend something like the following:
|
||||
|
||||
```html
|
||||
<ion-toolbar>
|
||||
<ion-buttons [slot]="mode === 'md' ? 'end' : 'start'">
|
||||
<ion-button>Cancel</ion-button>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-title>
|
||||
Filter Sessions
|
||||
</ion-title>
|
||||
</ion-toolbar>
|
||||
```
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<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>
|
||||
<body onload="initialize()">
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
@@ -25,7 +25,7 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -33,7 +33,7 @@
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-buttons slot="end">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -42,7 +42,7 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="primary">
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button class="closeButton" fill="clear">
|
||||
Close
|
||||
</ion-button>
|
||||
@@ -50,7 +50,7 @@
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-buttons slot="end">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -59,7 +59,7 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -67,7 +67,7 @@
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-buttons slot="end">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -76,7 +76,7 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -84,7 +84,7 @@
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-buttons slot="end">
|
||||
<ion-button color="secondary" class="activated">
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -93,7 +93,7 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button fill="solid">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -103,7 +103,7 @@
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid</ion-title>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-buttons slot="end">
|
||||
<ion-button fill="solid" color="secondary">
|
||||
Help
|
||||
<ion-icon name="help-circle" slot="end"></ion-icon>
|
||||
@@ -112,7 +112,7 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button fill="solid" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -122,7 +122,7 @@
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid Activated</ion-title>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-buttons slot="end">
|
||||
<ion-button fill="solid" color="secondary" class="activated">
|
||||
Help
|
||||
<ion-icon name="help-circle" slot="end"></ion-icon>
|
||||
@@ -131,7 +131,7 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button fill="outline">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -140,7 +140,7 @@
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-buttons slot="end">
|
||||
<ion-button color="secondary" fill="outline">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -149,7 +149,7 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button fill="outline" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -158,7 +158,7 @@
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-buttons slot="end">
|
||||
<ion-button color="secondary" fill="outline" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -167,13 +167,13 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button>
|
||||
<ion-icon name="contact" slot="start"></ion-icon>
|
||||
Clear
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-buttons slot="end">
|
||||
<ion-button href="#">
|
||||
Edit
|
||||
<ion-icon name="create" slot="end"></ion-icon>
|
||||
@@ -183,12 +183,12 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button>
|
||||
Go Back
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-buttons slot="end">
|
||||
<ion-button href="#">
|
||||
Edit
|
||||
</ion-button>
|
||||
@@ -200,7 +200,7 @@
|
||||
<ion-button menuToggle slot="start">
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="star"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -209,7 +209,7 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-buttons slot="end">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="star"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -221,7 +221,7 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-buttons slot="end">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
@@ -252,5 +252,20 @@
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
function initialize() {
|
||||
var mode = Ionic.mode;
|
||||
|
||||
if (mode === 'md') {
|
||||
var buttons = document.querySelectorAll('.dynamic-slot');
|
||||
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].setAttribute('slot', 'end');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -6,30 +6,144 @@
|
||||
<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>
|
||||
<body onload="initialize()">
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Toolbar</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Toolbar - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<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-buttons slot="end">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Subheader</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content" padding>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lobortis felis, eu sodales enim. Nam risus nibh, placerat at rutrum ac, vehicula vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis elementum ligula, ac aliquet nulla. Mauris non placerat mauris. Aenean dignissim lacinia porttitor. Praesent fringilla at est et ullamcorper. In ac ante ac massa porta venenatis ut id nibh. Fusce felis neque, aliquet in velit vitae, venenatis euismod libero. Donec vulputate, urna sed sagittis tempor, mi arcu tristique lacus, eget fringilla urna sem eget felis. Fusce dignissim lacus a scelerisque vehicula. Nulla nec enim nunc.
|
||||
<ion-content id="content" fullscreen="true">
|
||||
<ion-card color="secondary">
|
||||
<ion-card-header>
|
||||
Card Header
|
||||
</ion-card-header>
|
||||
<ion-card-content>
|
||||
<ion-card-title>
|
||||
Title
|
||||
</ion-card-title>
|
||||
Some normal text in content.
|
||||
<h3>h3 in content</h3>
|
||||
<p>
|
||||
Paragraph in content.
|
||||
</p>
|
||||
<p>
|
||||
Another paragraph in content.
|
||||
</p>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
Quisque nec dui eu nibh pulvinar bibendum quis ut nunc. Duis ex odio, sollicitudin ac mollis nec, fringilla non lacus. Maecenas sed tincidunt urna. Nunc feugiat maximus venenatis. Donec porttitor, felis eget porttitor tempor, quam nulla dapibus nisl, sit amet posuere sapien sapien malesuada tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque luctus, sapien nec tincidunt efficitur, nibh turpis faucibus felis, in sodales massa augue nec erat. Morbi sollicitudin nisi ex, et gravida nisi euismod eu. Suspendisse hendrerit dapibus orci, non viverra neque vestibulum id. Quisque vitae interdum ligula, quis consectetur nibh.
|
||||
<ion-card color="primary" class="rainbow-content">
|
||||
<ion-card-header>
|
||||
Card Header
|
||||
</ion-card-header>
|
||||
<ion-card-content>
|
||||
<ion-card-title>
|
||||
Title
|
||||
</ion-card-title>
|
||||
Some normal text in content.
|
||||
<h3>h3 in content</h3>
|
||||
<p>
|
||||
Paragraph in content.
|
||||
</p>
|
||||
<p>
|
||||
Another paragraph in content.
|
||||
</p>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
Phasellus in mi at erat ultrices semper. Fusce sollicitudin at dolor ac lobortis. Morbi sit amet sem quis nulla pellentesque imperdiet. Nullam eu sem a enim maximus eleifend non vulputate leo. Proin quis congue lacus. Pellentesque placerat, quam at tempus pulvinar, nisl ligula tempor risus, quis pretium arcu odio et nulla. Nullam mollis consequat pharetra. Phasellus dictum velit sed purus mattis maximus. In molestie eget massa ut dignissim. In a interdum elit. In finibus nibh a mauris lobortis aliquet. Proin rutrum varius consequat. In mollis dapibus nisl, eu finibus urna viverra ac. Quisque scelerisque nisl eu suscipit consectetur.
|
||||
</ion-content>
|
||||
<ion-card color="primary">
|
||||
<ion-card-header>
|
||||
Card Header
|
||||
</ion-card-header>
|
||||
<ion-card-content>
|
||||
<ion-card-title>
|
||||
Title
|
||||
</ion-card-title>
|
||||
Some normal text in content.
|
||||
<h3>h3 in content</h3>
|
||||
<p>
|
||||
Paragraph in content.
|
||||
</p>
|
||||
<p>
|
||||
Another paragraph in content.
|
||||
</p>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer Toolbar</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
<ion-list id="dynamicList">
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-searchbar>
|
||||
</ion-searchbar>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title>
|
||||
Footer
|
||||
</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
.rainbow-content {
|
||||
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function initialize() {
|
||||
var mode = Ionic.mode;
|
||||
|
||||
if (mode === 'md') {
|
||||
var buttons = document.querySelectorAll('.dynamic-slot');
|
||||
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].setAttribute('slot', 'end');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let items = [];
|
||||
for (var i = 0; i < 30; i++) {
|
||||
items.push( i+1 );
|
||||
}
|
||||
const list = document.getElementById('dynamicList');
|
||||
|
||||
let html = '';
|
||||
for(let item of items) {
|
||||
html += `<ion-item>${item}</ion-item>`;
|
||||
}
|
||||
list.innerHTML = html;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -6,239 +6,249 @@
|
||||
<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>
|
||||
<body onload="initialize()">
|
||||
<ion-app>
|
||||
<ion-content id="content">
|
||||
<ion-toolbar no-padding>
|
||||
<ion-title>This should have no padding</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-toolbar no-padding>
|
||||
<ion-title>This should have no padding</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<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-buttons slot="end">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<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-buttons slot="end">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Defaults</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button class="activated">
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button color="secondary" class="activated">
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Defaults.activated</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button fill="solid">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid">
|
||||
<ion-icon slot="start" name="contact"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button fill="solid" color="secondary">
|
||||
Help
|
||||
<ion-icon slot="end" name="help-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button href="#" fill="solid" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid" class="activated">
|
||||
<ion-icon slot="start" name="contact"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid Activated</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button fill="solid" color="secondary" class="activated">
|
||||
Help
|
||||
<ion-icon slot="end" name="help-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button fill="outline">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline">
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button color="secondary" fill="outline">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button fill="outline" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline" class="activated">
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button color="secondary" fill="outline" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline.activated</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button>
|
||||
<ion-icon slot="start" name="contact"></ion-icon>
|
||||
Clear
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button href="#">
|
||||
Edit
|
||||
<ion-icon slot="end" name="create"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Icon/Color Attr</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button>
|
||||
Go Back
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button href="#">
|
||||
Edit
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Text Only</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-menu-toggle>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-menu-toggle>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="start" class="dynamic-slot">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="star"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Left side menu toggle</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button onclick="buttonClick()">
|
||||
<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>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-menu-toggle>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<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-buttons slot="mode-end">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Defaults</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-button class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button class="activated">
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-button color="secondary" class="activated">
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Defaults.activated</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-button fill="solid">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid">
|
||||
<ion-icon slot="start" name="contact"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid</ion-title>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-button fill="solid" color="secondary">
|
||||
Help
|
||||
<ion-icon slot="end" name="help-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-button href="#" fill="solid" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid" class="activated">
|
||||
<ion-icon slot="start" name="contact"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid Activated</ion-title>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-button fill="solid" color="secondary" class="activated">
|
||||
Help
|
||||
<ion-icon slot="end" name="help-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-button fill="outline">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline">
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-button color="secondary" fill="outline">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-button fill="outline" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline" class="activated">
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-button color="secondary" fill="outline" class="activated">
|
||||
<ion-icon slot="icon-only" name="contact"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline.activated</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-button>
|
||||
<ion-icon slot="start" name="contact"></ion-icon>
|
||||
Clear
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-button href="#">
|
||||
Edit
|
||||
<ion-icon slot="end" name="create"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Icon/Color Attr</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-button>
|
||||
Go Back
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-button href="#">
|
||||
Edit
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Text Only</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-menu-toggle>
|
||||
<ion-button>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-menu-toggle>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="mode-start">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="star"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Left side menu toggle</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-button onclick="buttonClick()">
|
||||
<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>
|
||||
<ion-button>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-menu-toggle>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="mode-end">
|
||||
<ion-button onclick="buttonClick()">
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-segment color="secondary">
|
||||
<ion-segment-button value="something">
|
||||
Something
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="else">
|
||||
Else
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment>
|
||||
<ion-segment-button value="light">
|
||||
Light
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="toolbar">
|
||||
Toolbar
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="default">
|
||||
Default Segment
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
</ion-content>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button onclick="buttonClick()">
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-segment color="secondary">
|
||||
<ion-segment-button value="something">
|
||||
Something
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="else">
|
||||
Else
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment>
|
||||
<ion-segment-button value="light">
|
||||
Light
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="toolbar">
|
||||
Toolbar
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="default">
|
||||
Default Segment
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
function initialize() {
|
||||
var mode = Ionic.mode;
|
||||
|
||||
if (mode === 'md') {
|
||||
var buttons = document.querySelectorAll('.dynamic-slot');
|
||||
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].setAttribute('slot', 'end');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function buttonClick(ev) {
|
||||
console.log('clicked button', ev);
|
||||
}
|
||||
|
||||
@@ -122,23 +122,15 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-buttons-ios {
|
||||
order: map-get($toolbar-order-ios, buttons-mode-start);
|
||||
@include text-align(start);
|
||||
|
||||
order: map-get($toolbar-order-ios, buttons-start);
|
||||
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.bar-buttons-ios[slot="start"] {
|
||||
order: map-get($toolbar-order-ios, buttons-start);
|
||||
}
|
||||
|
||||
.bar-buttons-ios[slot="mode-end"] {
|
||||
@include text-align(end);
|
||||
|
||||
order: map-get($toolbar-order-ios, buttons-mode-end);
|
||||
}
|
||||
|
||||
.bar-buttons-ios[slot="end"] {
|
||||
@include text-align(right);
|
||||
@include text-align(end);
|
||||
|
||||
order: map-get($toolbar-order-ios, buttons-end);
|
||||
}
|
||||
|
||||
@@ -8,11 +8,9 @@ $toolbar-order-ios: (
|
||||
back-button: 0,
|
||||
menu-toggle-start: 1,
|
||||
buttons-start: 2,
|
||||
buttons-mode-start: 3,
|
||||
content: 4,
|
||||
buttons-mode-end: 5,
|
||||
buttons-end: 6,
|
||||
menu-toggle-end: 7,
|
||||
content: 3,
|
||||
buttons-end: 4,
|
||||
menu-toggle-end: 5,
|
||||
);
|
||||
|
||||
/// @prop - Font family of the toolbar
|
||||
|
||||
@@ -117,27 +117,15 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-buttons-md {
|
||||
order: map-get($toolbar-order-md, buttons-mode-start);
|
||||
@include text-align(start);
|
||||
|
||||
order: map-get($toolbar-order-md, buttons-start);
|
||||
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.bar-buttons-md[slot="start"] {
|
||||
order: map-get($toolbar-order-md, buttons-start);
|
||||
}
|
||||
|
||||
.bar-button-md:first-child {
|
||||
@include margin-horizontal(0, null);
|
||||
}
|
||||
|
||||
.bar-buttons-md[slot="mode-end"] {
|
||||
@include text-align(end);
|
||||
|
||||
order: map-get($toolbar-order-md, buttons-mode-end);
|
||||
}
|
||||
|
||||
.bar-buttons-md[slot="end"] {
|
||||
@include text-align(right);
|
||||
@include text-align(end);
|
||||
|
||||
order: map-get($toolbar-order-md, buttons-end);
|
||||
}
|
||||
|
||||
@@ -9,10 +9,8 @@ $toolbar-order-md: (
|
||||
menu-toggle-start: 1,
|
||||
buttons-start: 2,
|
||||
content: 3,
|
||||
buttons-mode-start: 4,
|
||||
buttons-mode-end: 5,
|
||||
buttons-end: 6,
|
||||
menu-toggle-end: 7,
|
||||
buttons-end: 4,
|
||||
menu-toggle-end: 5,
|
||||
);
|
||||
|
||||
/// @prop - Font family of the toolbar
|
||||
|
||||
@@ -45,8 +45,6 @@ ion-toolbar ion-title {
|
||||
}
|
||||
|
||||
ion-buttons {
|
||||
@include margin(0, 2px);
|
||||
|
||||
display: block;
|
||||
|
||||
transform: translateZ(0);
|
||||
|
||||
@@ -67,12 +67,10 @@ export class Toolbar {
|
||||
return [
|
||||
<div class={backgroundCss}></div>,
|
||||
<slot name='start'></slot>,
|
||||
<slot name='mode-start'></slot>,
|
||||
<slot name='mode-end'></slot>,
|
||||
<slot name='end'></slot>,
|
||||
<div class={contentCss}>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>,
|
||||
<slot name='end'></slot>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user