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

refactor(toolbar): rename the slots to match other component behavior

Browse Source 
`left` -> `start`
`right` -> `end`
`start` -> `secondary`
`end` -> `primary`
This commit is contained in:
Brandy Carney
2018-03-27 16:41:30 -04:00
parent 6fbd708ae0
commit ce5b47ef99
29 changed files with 129 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
BREAKING.md
View File

@ -959,11 +959,11 @@ Previously to positions buttons inside of a toolbar the following attributes wer
These have been renamed to the following:
| Old Property | New Property | Property Behavior |
|--------------|----------------|------------------------------------------------------------------------------------------------------------------|
| `start` | `slot="start"` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` and `wp` mode. |
| `end` | `slot="end"` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` and `wp` mode. |
| `left` | `slot="left"` | Positions element to the `left` of all other elements. |
| `right` | `slot="right"` | Positions element to the `right` of all other elements. |
|--------------|--------------------|----------------------------------------------------------------------------------------------------------|
| `start` | `slot="secondary"` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. |
| `end` | `slot="primary"` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. |
| `left` | `slot="start"` | Positions to the `left` of the button in LTR, and to the `right` in RTL. |
| `right` | `slot="end"` | Positions to the `right` of the button in LTR, and to the `left` in RTL. |
**Old Usage Example:**
@ -973,7 +973,7 @@ These have been renamed to the following:
<button ion-button>Left</button>
</ion-buttons>
<ion-buttons start>
<button ion-button>Start</button>
<button ion-button>Secondary</button>
</ion-buttons>
<ion-title>
@ -981,7 +981,7 @@ These have been renamed to the following:
</ion-title>
<ion-buttons end>
<button ion-button>End</button>
<button ion-button>Primary</button>
</ion-buttons>
<ion-buttons right>
<button ion-button>Right</button>
@ -993,21 +993,21 @@ These have been renamed to the following:
```html
<ion-toolbar>
<ion-buttons slot="left">
<ion-buttons slot="start">
<ion-button>Left</ion-button>
</ion-buttons>
<ion-buttons slot="start">
<ion-button>Start</ion-button>
<ion-buttons slot="secondary">
<ion-button>Secondary</ion-button>
</ion-buttons>
<ion-title>
Title
</ion-title>
<ion-buttons slot="end">
<ion-button>End</ion-button>
<ion-buttons slot="primary">
<ion-button>Primary</ion-button>
</ion-buttons>
<ion-buttons slot="right">
<ion-buttons slot="end">
<ion-button>Right</ion-button>
</ion-buttons>
</ion-toolbar>

2
angular/test/nav/src/app/popover/popover-page.component.ts
View File

@ -10,7 +10,7 @@ import { PopoverPageToPresent } from './popover-page-to-present';
<ion-header>
<ion-toolbar>
<ion-title>Popover</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button (click)="clickMe()">
No event passed
</ion-button>

66
core/src/components/button/test/toolbar/index.html
View File

@ -25,7 +25,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<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="end">
<ion-buttons slot="primary">
<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="start">
<ion-buttons slot="secondary">
<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="end">
<ion-buttons slot="primary">
<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="start">
<ion-buttons slot="secondary">
<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="end">
<ion-buttons slot="primary">
<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="start">
<ion-buttons slot="secondary">
<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="end">
<ion-buttons slot="primary">
<ion-button color="secondary" class="activated">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
@ -93,54 +93,54 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button fill="solid">
<ion-icon name="contact" slot="start"></ion-icon>
<ion-icon name="contact" slot="secondary"></ion-icon>
Solid
</ion-button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary">
Help
<ion-icon name="help-circle" slot="end"></ion-icon>
<ion-icon name="help-circle" slot="primary"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button fill="solid" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button fill="solid" class="activated">
<ion-icon name="contact" slot="start"></ion-icon>
<ion-icon name="contact" slot="secondary"></ion-icon>
Solid
</ion-button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary" class="activated">
Help
<ion-icon name="help-circle" slot="end"></ion-icon>
<ion-icon name="help-circle" slot="primary"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button fill="outline">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button fill="outline">
<ion-icon name="star" slot="start"></ion-icon>
<ion-icon name="star" slot="secondary"></ion-icon>
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary" fill="outline">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -149,16 +149,16 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<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 name="star" slot="start"></ion-icon>
<ion-icon name="star" slot="secondary"></ion-icon>
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary" fill="outline" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -167,28 +167,28 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon name="contact" slot="start"></ion-icon>
<ion-icon name="contact" slot="secondary"></ion-icon>
Clear
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button href="#">
Edit
<ion-icon name="create" slot="end"></ion-icon>
<ion-icon name="create" slot="primary"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Icon/Color Attr</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
Go Back
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button href="#">
Edit
</ion-button>
@ -197,10 +197,10 @@
</ion-toolbar>
<ion-toolbar>
<ion-button menuToggle slot="start">
<ion-button menuToggle slot="secondary">
<ion-icon name="menu"></ion-icon>
</ion-button>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
@ -209,19 +209,19 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-button menuToggle slot="end">
<ion-button menuToggle slot="primary">
<ion-icon name="menu"></ion-icon>
</ion-button>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>

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

@ -12,10 +12,10 @@
<ion-header>
<ion-toolbar>
<ion-title>Button - Basic</ion-title>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>start btn</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button slot="icon-only">
<ion-icon name="more"></ion-icon>
</ion-button>

2
core/src/components/datetime/test/basic/index.html
View File

@ -12,7 +12,7 @@
<ion-header>
<ion-toolbar>
<ion-title>Datetime - Basic</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
(disabled)
</ion-button>

2
core/src/components/datetime/test/preview/index.html
View File

@ -12,7 +12,7 @@
<ion-header>
<ion-toolbar>
<ion-title>Datetime</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
(disabled)
</ion-button>

2
core/src/components/fab/test/basic/index.html
View File

@ -86,7 +86,7 @@
<ion-footer>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button onclick="closeLists()">Close</ion-button>
</ion-buttons>
<ion-title>Footer</ion-title>

2
core/src/components/fab/test/preview/index.html
View File

@ -86,7 +86,7 @@
<ion-footer>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button onclick="closeLists()">Close</ion-button>
</ion-buttons>
<ion-title>Footer</ion-title>

2
core/src/components/input/test/attributes/index.html
View File

@ -12,7 +12,7 @@
<ion-header>
<ion-toolbar>
<ion-title>Input - Attributes</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>

4
core/src/components/item-sliding/test/basic/index.html
View File

@ -12,10 +12,10 @@
<ion-header>
<ion-toolbar>
<ion-title>Item Sliding - Basic</ion-title>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button onclick="changeDynamicText()">Dynamic</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="reload()">Reload</ion-button>
</ion-buttons>
</ion-toolbar>

4
core/src/components/item-sliding/test/preview/index.html
View File

@ -12,10 +12,10 @@
<ion-header>
<ion-toolbar>
<ion-title>Item Sliding</ion-title>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button onclick="changeDynamicText()">Dynamic</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="reload()">Reload</ion-button>
</ion-buttons>
</ion-toolbar>

2
core/src/components/item/test/groups/index.html
View File

@ -14,7 +14,7 @@
<ion-header>
<ion-toolbar>
<ion-title>Item Groups</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="reload()">
Reload
</ion-button>

2
core/src/components/item/test/inputs/index.html
View File

@ -14,7 +14,7 @@
<ion-header>
<ion-toolbar>
<ion-title>Item inputs</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button id="toggleDisabled" class="e2eDisableButton" onClick="toggleDisabled()">
<span id="toggleDisabledSpan"></span>
</ion-button>

2
core/src/components/item/test/reorder/index.html
View File

@ -14,7 +14,7 @@
<ion-header>
<ion-toolbar color="primary">
<ion-title>Item Reorder</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="toggle()">Edit</ion-button>
</ion-buttons>
</ion-toolbar>

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

@ -12,10 +12,10 @@
<ion-header>
<ion-toolbar>
<ion-title>Item Sliding - Basic</ion-title>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button onclick="changeDynamicText()">Dynamic</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="reload()">Reload</ion-button>
</ion-buttons>
</ion-toolbar>

4
core/src/components/popover/test/basic/index.html
View File

@ -13,7 +13,7 @@
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button onclick="presentPopover({component: 'profile-page', ev: event })">
<ion-icon slot="icon-only" name="person"></ion-icon>
</ion-button>
@ -33,7 +33,7 @@
<ion-footer>
<ion-toolbar color="primary">
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="presentPopover({component: 'profile-page', ev: event })">
<ion-icon slot="icon-only" name="person"></ion-icon>
</ion-button>

4
core/src/components/popover/test/preview/index.html
View File

@ -13,7 +13,7 @@
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button onclick="presentPopover({component: 'profile-page', ev: event })">
<ion-icon slot="icon-only" name="person"></ion-icon>
</ion-button>
@ -33,7 +33,7 @@
<ion-footer>
<ion-toolbar color="primary">
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="presentPopover({component: 'profile-page', ev: event })">
<ion-icon slot="icon-only" name="person"></ion-icon>
</ion-button>

2
core/src/components/reorder/test/basic/index.html
View File

@ -14,7 +14,7 @@
<ion-header>
<ion-toolbar>
<ion-title>Reorder - Basic</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="toggleEdit()">Toggle</ion-button>
</ion-buttons>
</ion-toolbar>

2
core/src/components/reorder/test/preview/index.html
View File

@ -14,7 +14,7 @@
<ion-header>
<ion-toolbar>
<ion-title>Reorder</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="toggleEdit()">Toggle</ion-button>
</ion-buttons>
</ion-toolbar>

4
core/src/components/slides/test/app-intro/index.html
View File

@ -32,10 +32,10 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button onclick="slidePrev()">Prev</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="slideNext()">Next</ion-button>
</ion-buttons>
</ion-toolbar>

6
core/src/components/toolbar/test/basic/index.html
View File

@ -14,7 +14,7 @@
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -22,7 +22,7 @@
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
@ -96,7 +96,7 @@
<ion-footer>
<ion-toolbar>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>

6
core/src/components/toolbar/test/preview/index.html
View File

@ -14,7 +14,7 @@
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -22,7 +22,7 @@
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
@ -96,7 +96,7 @@
<ion-footer>
<ion-toolbar>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>

42
core/src/components/toolbar/test/scenarios/index.html
View File

@ -18,7 +18,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -26,7 +26,7 @@
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
@ -35,7 +35,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -43,7 +43,7 @@
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
@ -52,7 +52,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -60,7 +60,7 @@
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary" class="activated">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
@ -69,7 +69,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -79,7 +79,7 @@
</ion-button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary">
Help
<ion-icon slot="end" name="help-circle"></ion-icon>
@ -88,7 +88,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button href="#" fill="solid" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -98,7 +98,7 @@
</ion-button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary" class="activated">
Help
<ion-icon slot="end" name="help-circle"></ion-icon>
@ -107,7 +107,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button fill="outline">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -116,7 +116,7 @@
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary" fill="outline">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -125,7 +125,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button fill="outline" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -134,7 +134,7 @@
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary" fill="outline" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -143,13 +143,13 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="start" name="contact"></ion-icon>
Clear
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button href="#">
Edit
<ion-icon slot="end" name="create"></ion-icon>
@ -159,12 +159,12 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
Go Back
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button href="#">
Edit
</ion-button>
@ -180,7 +180,7 @@
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
@ -189,7 +189,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="buttonClick()">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
@ -205,7 +205,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="buttonClick()">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>

18
core/src/components/toolbar/toolbar.ios.scss
View File

@ -122,13 +122,19 @@
// --------------------------------------------------
.bar-buttons-ios {
order: map-get($toolbar-order-ios, buttons-start);
order: map-get($toolbar-order-ios, buttons-secondary);
transform: translateZ(0);
}
.bar-buttons-ios[slot="left"] {
order: map-get($toolbar-order-ios, buttons-left);
.bar-buttons-ios[slot="start"] {
order: map-get($toolbar-order-ios, buttons-start);
}
.bar-buttons-ios[slot="primary"] {
@include text-align(end);
order: map-get($toolbar-order-ios, buttons-primary);
}
.bar-buttons-ios[slot="end"] {
@ -137,12 +143,6 @@
order: map-get($toolbar-order-ios, buttons-end);
}
.bar-buttons-ios[slot="right"] {
@include text-align(right);
order: map-get($toolbar-order-ios, buttons-right);
}
// iOS Toolbar Button Default

8
core/src/components/toolbar/toolbar.ios.vars.scss
View File

@ -7,11 +7,11 @@
$toolbar-order-ios: (
back-button: 0,
menu-toggle-start: 1,
buttons-left: 2,
buttons-start: 3,
buttons-start: 2,
buttons-secondary: 3,
content: 4,
buttons-end: 5,
buttons-right: 6,
buttons-primary: 5,
buttons-end: 6,
menu-toggle-end: 7,
);

18
core/src/components/toolbar/toolbar.md.scss
View File

@ -119,13 +119,19 @@
.bar-buttons-md {
@include margin(0, 2px);
order: map-get($toolbar-order-md, buttons-start);
order: map-get($toolbar-order-md, buttons-secondary);
transform: translateZ(0);
}
.bar-buttons-md[slot="left"] {
order: map-get($toolbar-order-md, buttons-left);
.bar-buttons-md[slot="start"] {
order: map-get($toolbar-order-md, buttons-start);
}
.bar-buttons-md[slot="primary"] {
@include text-align(end);
order: map-get($toolbar-order-md, buttons-primary);
}
.bar-buttons-md[slot="end"] {
@ -134,12 +140,6 @@
order: map-get($toolbar-order-md, buttons-end);
}
.bar-buttons-md[slot="right"] {
@include text-align(right);
order: map-get($toolbar-order-md, buttons-right);
}
// Material Design Toolbar Button Default
// --------------------------------------------------

8
core/src/components/toolbar/toolbar.md.vars.scss
View File

@ -7,11 +7,11 @@
$toolbar-order-md: (
back-button: 0,
menu-toggle-start: 1,
buttons-left: 2,
buttons-start: 2,
content: 3,
buttons-start: 4,
buttons-end: 5,
buttons-right: 6,
buttons-secondary: 4,
buttons-primary: 5,
buttons-end: 6,
menu-toggle-end: 7,
);

6
core/src/components/toolbar/toolbar.tsx
View File

@ -58,13 +58,13 @@ export class Toolbar {
return [
<div class={backgroundCss}></div>,
<slot name='left'></slot>,
<slot name='start'></slot>,
<slot name='secondary'></slot>,
<div class={contentCss}>
<slot></slot>
</div>,
<slot name='end'></slot>,
<slot name='right'></slot>
<slot name='primary'></slot>,
<slot name='end'></slot>
];
}
}

2
core/src/components/virtual-scroll/test/basic.html
View File

@ -15,7 +15,7 @@
<ion-header>
<ion-toolbar>
<ion-title>Ionic CDN demo</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="addItems()">Add Items</ion-button>
</ion-buttons>
</ion-toolbar>