mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
feat(back-button): add variables and support for focused and hover states (#18451)
- updates MD spacing for back button text - also adds e2e tests and adds them to screenshot references #18279 references #17624 fixes #18465
This commit is contained in:
Brandy Carney
@ -5,26 +5,13 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--background-focused: #{ion-color(primary, base, .1)};
|
||||
--border-radius: 10px;
|
||||
--color: #{$back-button-ios-color};
|
||||
--margin-top: 0;
|
||||
--margin-end: 0;
|
||||
--margin-bottom: 0;
|
||||
--margin-start: 0;
|
||||
--padding-top: 0;
|
||||
--padding-end: 0;
|
||||
--padding-bottom: 0;
|
||||
--padding-start: 0;
|
||||
--min-height: 32px;
|
||||
--min-width: auto;
|
||||
--icon-padding-top: 0;
|
||||
--icon-padding-end: 0;
|
||||
--icon-padding-bottom: 0;
|
||||
--icon-padding-start: 0;
|
||||
--icon-margin-top: 0;
|
||||
--icon-margin-end: -5px;
|
||||
--icon-margin-bottom: 0;
|
||||
--icon-margin-start: -4px;
|
||||
--icon-font-size: 1.85em;
|
||||
--min-height: 32px;
|
||||
|
||||
font-size: 17px;
|
||||
}
|
||||
@ -41,4 +28,19 @@
|
||||
|
||||
:host(.activated) .button-native {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) {
|
||||
--opacity: #{$button-ios-clear-opacity-hover};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Back Button Color: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color.ion-focused) .button-native {
|
||||
background: #{current-color(base, .1)};
|
||||
}
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// TODO this is needed for the ios vars to import
|
||||
@import "../button/button.vars";
|
||||
@import "../button/button.ios.vars";
|
||||
|
||||
// iOS Back Button
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@ -5,27 +5,18 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--border-radius: 4px;
|
||||
--background-focused: rgba(66, 66, 66, 0.24);
|
||||
--background-hover: rgba(66, 66, 66, 0.08);
|
||||
--color: #{$back-button-md-color};
|
||||
--margin-top: 0;
|
||||
--margin-end: 0;
|
||||
--margin-bottom: 0;
|
||||
--margin-start: 0;
|
||||
--padding-top: 0;
|
||||
--padding-end: 0;
|
||||
--padding-bottom: 0;
|
||||
--padding-start: 0;
|
||||
--min-height: 32px;
|
||||
--min-width: 44px;
|
||||
--icon-padding-top: 0;
|
||||
--icon-padding-end: 0;
|
||||
--icon-padding-start: 0;
|
||||
--icon-padding-bottom: 0;
|
||||
--icon-margin-top: 0;
|
||||
--icon-margin-end: 0;
|
||||
--icon-margin-bottom: 0;
|
||||
--icon-margin-start: 0;
|
||||
--icon-font-size: 24px;
|
||||
--icon-font-weight: normal;
|
||||
--min-height: 32px;
|
||||
--min-width: 44px;
|
||||
--padding-start: 12px;
|
||||
--padding-end: 12px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
@ -33,15 +24,41 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.button-native {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
:host(.back-button-has-icon-only) {
|
||||
--border-radius: 50%;
|
||||
|
||||
min-width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.button-native {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
@include padding(0, 4px);
|
||||
}
|
||||
|
||||
ion-icon {
|
||||
line-height: .67;
|
||||
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
|
||||
// Back Button Color: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(.ion-color:hover) .button-native {
|
||||
background: #{current-color(base, .08)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Back Button Color: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color.ion-focused) .button-native {
|
||||
background: #{current-color(base, .24)};
|
||||
}
|
||||
|
||||
@ -6,8 +6,12 @@
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the button
|
||||
* @prop --background-focused: Background of the button when focused
|
||||
* @prop --background-hover: Background of the button when hover
|
||||
*
|
||||
* @prop --color: Text color of the button
|
||||
* @prop --color-focused: Text color of the button when focused
|
||||
* @prop --color-hover: Text color of the button when hover
|
||||
*
|
||||
* @prop --min-width: Minimum width of the button
|
||||
* @prop --min-height: Minimum height of the button
|
||||
@ -44,12 +48,33 @@
|
||||
* @prop --icon-font-weight: Font weight of the button icon
|
||||
*/
|
||||
--background: transparent;
|
||||
--color-focused: var(--color);
|
||||
--color-hover: var(--color);
|
||||
--icon-margin-top: 0;
|
||||
--icon-margin-bottom: 0;
|
||||
--icon-padding-top: 0;
|
||||
--icon-padding-end: 0;
|
||||
--icon-padding-bottom: 0;
|
||||
--icon-padding-start: 0;
|
||||
--margin-top: 0;
|
||||
--margin-end: 0;
|
||||
--margin-bottom: 0;
|
||||
--margin-start: 0;
|
||||
--min-width: auto;
|
||||
--min-height: auto;
|
||||
--padding-top: 0;
|
||||
--padding-end: 0;
|
||||
--padding-bottom: 0;
|
||||
--padding-start: 0;
|
||||
--opacity: 1;
|
||||
--ripple-color: currentColor;
|
||||
--transition: background-color, opacity 100ms linear;
|
||||
--opacity: 1;
|
||||
|
||||
display: none;
|
||||
|
||||
min-width: var(--min-width);
|
||||
min-height: var(--min-height);
|
||||
|
||||
color: var(--color);
|
||||
|
||||
font-family: $font-family-base;
|
||||
@ -96,8 +121,10 @@
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
min-width: var(--min-width);
|
||||
min-height: var(--min-height);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
min-height: inherit;
|
||||
|
||||
transition: var(--transition);
|
||||
|
||||
@ -145,6 +172,44 @@ ion-icon {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Back Button: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) .button-native {
|
||||
background: var(--background-hover);
|
||||
color: var(--color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Back Button: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-focused) .button-native {
|
||||
background: var(--background-focused);
|
||||
color: var(--color-focused);
|
||||
}
|
||||
|
||||
|
||||
// Back Button Color: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(.ion-color:hover) .button-native {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Back Button Color: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color.ion-focused) .button-native {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
|
||||
|
||||
// Back Button in Toolbar: Global Theming
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@ -56,6 +56,29 @@ export class BackButton implements ComponentInterface {
|
||||
return openURL(this.win, this.defaultHref, ev, 'back');
|
||||
}
|
||||
|
||||
private get backButtonIcon() {
|
||||
return this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
|
||||
}
|
||||
|
||||
private get backButtonText() {
|
||||
const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
|
||||
return this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
|
||||
}
|
||||
|
||||
private get hasIconOnly() {
|
||||
return this.backButtonIcon && !this.backButtonText;
|
||||
}
|
||||
|
||||
private get rippleType() {
|
||||
// If the button only has an icon we use the unbounded
|
||||
// "circular" ripple effect
|
||||
if (this.hasIconOnly) {
|
||||
return 'unbounded';
|
||||
}
|
||||
|
||||
return 'bounded';
|
||||
}
|
||||
|
||||
hostData() {
|
||||
const showBackButton = this.defaultHref !== undefined;
|
||||
|
||||
@ -65,16 +88,16 @@ export class BackButton implements ComponentInterface {
|
||||
[`${this.mode}`]: true,
|
||||
|
||||
'button': true, // ion-buttons target .button
|
||||
'back-button-has-icon-only': this.hasIconOnly,
|
||||
'ion-activatable': true,
|
||||
'ion-focusable': true,
|
||||
'show-back-button': showBackButton
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
|
||||
const backButtonIcon = this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
|
||||
const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
|
||||
const { backButtonIcon, backButtonText } = this;
|
||||
|
||||
return (
|
||||
<button type="button" class="button-native">
|
||||
@ -82,7 +105,7 @@ export class BackButton implements ComponentInterface {
|
||||
{backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
|
||||
{backButtonText && <span class="button-text">{backButtonText}</span>}
|
||||
</span>
|
||||
{this.mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
|
||||
{this.mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@ -250,34 +250,38 @@ export default Example;
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ----------------------- | --------------------------------- |
|
||||
| `--background` | Background of the button |
|
||||
| `--border-radius` | Border radius of the button |
|
||||
| `--color` | Text color of the button |
|
||||
| `--icon-font-size` | Font size of the button icon |
|
||||
| `--icon-font-weight` | Font weight of the button icon |
|
||||
| `--icon-margin-bottom` | Margin bottom of the button icon |
|
||||
| `--icon-margin-end` | Margin end of the button icon |
|
||||
| `--icon-margin-start` | Margin start of the button icon |
|
||||
| `--icon-margin-top` | Margin top of the button icon |
|
||||
| `--icon-padding-bottom` | Padding bottom of the button icon |
|
||||
| `--icon-padding-end` | Padding end of the button icon |
|
||||
| `--icon-padding-start` | Padding start of the button icon |
|
||||
| `--icon-padding-top` | Padding top of the button icon |
|
||||
| `--margin-bottom` | Margin bottom of the button |
|
||||
| `--margin-end` | Margin end of the button |
|
||||
| `--margin-start` | Margin start of the button |
|
||||
| `--margin-top` | Margin top of the button |
|
||||
| `--min-height` | Minimum height of the button |
|
||||
| `--min-width` | Minimum width of the button |
|
||||
| `--opacity` | Opacity of the button |
|
||||
| `--padding-bottom` | Padding bottom of the button |
|
||||
| `--padding-end` | Padding end of the button |
|
||||
| `--padding-start` | Padding start of the button |
|
||||
| `--padding-top` | Padding top of the button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| `--transition` | Transition of the button |
|
||||
| Name | Description |
|
||||
| ----------------------- | ------------------------------------- |
|
||||
| `--background` | Background of the button |
|
||||
| `--background-focused` | Background of the button when focused |
|
||||
| `--background-hover` | Background of the button when hover |
|
||||
| `--border-radius` | Border radius of the button |
|
||||
| `--color` | Text color of the button |
|
||||
| `--color-focused` | Text color of the button when focused |
|
||||
| `--color-hover` | Text color of the button when hover |
|
||||
| `--icon-font-size` | Font size of the button icon |
|
||||
| `--icon-font-weight` | Font weight of the button icon |
|
||||
| `--icon-margin-bottom` | Margin bottom of the button icon |
|
||||
| `--icon-margin-end` | Margin end of the button icon |
|
||||
| `--icon-margin-start` | Margin start of the button icon |
|
||||
| `--icon-margin-top` | Margin top of the button icon |
|
||||
| `--icon-padding-bottom` | Padding bottom of the button icon |
|
||||
| `--icon-padding-end` | Padding end of the button icon |
|
||||
| `--icon-padding-start` | Padding start of the button icon |
|
||||
| `--icon-padding-top` | Padding top of the button icon |
|
||||
| `--margin-bottom` | Margin bottom of the button |
|
||||
| `--margin-end` | Margin end of the button |
|
||||
| `--margin-start` | Margin start of the button |
|
||||
| `--margin-top` | Margin top of the button |
|
||||
| `--min-height` | Minimum height of the button |
|
||||
| `--min-width` | Minimum width of the button |
|
||||
| `--opacity` | Opacity of the button |
|
||||
| `--padding-bottom` | Padding bottom of the button |
|
||||
| `--padding-end` | Padding end of the button |
|
||||
| `--padding-start` | Padding start of the button |
|
||||
| `--padding-top` | Padding top of the button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| `--transition` | Transition of the button |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
10
core/src/components/back-button/test/basic/e2e.ts
Normal file
10
core/src/components/back-button/test/basic/e2e.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('back-button: basic', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/back-button/test/basic?ionic:_testing=true'
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
@ -3,129 +3,144 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Back Button</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Back Button - Basic</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="loadFirstPage()">
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-nav></ion-nav>
|
||||
<ion-content>
|
||||
<h3>Default</h3>
|
||||
<p>
|
||||
<ion-back-button></ion-back-button>
|
||||
<ion-back-button text="Back"></ion-back-button>
|
||||
<ion-back-button icon="add"></ion-back-button>
|
||||
<ion-back-button text="Text Only" icon=""></ion-back-button>
|
||||
<ion-back-button icon="heart" text="Love" color="danger"></ion-back-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-back-button class="ion-focused"></ion-back-button>
|
||||
<ion-back-button class="ion-focused" text="Back"></ion-back-button>
|
||||
<ion-back-button class="ion-focused" icon="add"></ion-back-button>
|
||||
<ion-back-button class="ion-focused" text="Text Only" icon=""></ion-back-button>
|
||||
<ion-back-button class="ion-focused" icon="heart" text="Love" color="danger"></ion-back-button>
|
||||
</p>
|
||||
|
||||
<h3>Colors</h3>
|
||||
<p>
|
||||
<ion-back-button color="primary"></ion-back-button>
|
||||
<ion-back-button color="secondary"></ion-back-button>
|
||||
<ion-back-button color="tertiary"></ion-back-button>
|
||||
<ion-back-button color="success"></ion-back-button>
|
||||
<ion-back-button color="warning"></ion-back-button>
|
||||
<ion-back-button color="danger"></ion-back-button>
|
||||
<ion-back-button color="light"></ion-back-button>
|
||||
<ion-back-button color="medium"></ion-back-button>
|
||||
<ion-back-button color="dark"></ion-back-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-back-button color="primary" class="ion-focused"></ion-back-button>
|
||||
<ion-back-button color="secondary" class="ion-focused"></ion-back-button>
|
||||
<ion-back-button color="tertiary" class="ion-focused"></ion-back-button>
|
||||
<ion-back-button color="success" class="ion-focused"></ion-back-button>
|
||||
<ion-back-button color="warning" class="ion-focused"></ion-back-button>
|
||||
<ion-back-button color="danger" class="ion-focused"></ion-back-button>
|
||||
<ion-back-button color="light" class="ion-focused"></ion-back-button>
|
||||
<ion-back-button color="medium" class="ion-focused"></ion-back-button>
|
||||
<ion-back-button color="dark" class="ion-focused"></ion-back-button>
|
||||
</p>
|
||||
|
||||
<h3>Custom</h3>
|
||||
|
||||
<!-- Custom Font -->
|
||||
<p>
|
||||
<ion-back-button class="wide" text="wide"></ion-back-button>
|
||||
<ion-back-button class="large" text="large"></ion-back-button>
|
||||
<ion-back-button class="round" text="round"></ion-back-button>
|
||||
<ion-back-button class="small"></ion-back-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-back-button class="wide ion-focused" text="wide"></ion-back-button>
|
||||
<ion-back-button class="large ion-focused" text="large"></ion-back-button>
|
||||
<ion-back-button class="round ion-focused" text="round"></ion-back-button>
|
||||
<ion-back-button class="small ion-focused"></ion-back-button>
|
||||
</p>
|
||||
|
||||
<!-- Custom Colors -->
|
||||
<p>
|
||||
<ion-back-button class="custom"></ion-back-button>
|
||||
<ion-back-button color="secondary" class="custom"></ion-back-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-back-button class="custom ion-focused"></ion-back-button>
|
||||
<ion-back-button color="secondary" class="custom ion-focused"></ion-back-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
var buttons = document.querySelectorAll('ion-back-button');
|
||||
|
||||
for(var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].addEventListener('click', (event) => onClick(event));
|
||||
}
|
||||
|
||||
function onClick(ev) {
|
||||
console.log("clicked the button", ev.target.innerText);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h3 {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
ion-back-button {
|
||||
display: inline-block !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wide {
|
||||
--background: #d1f3ff;
|
||||
--background-hover: #add8e6;
|
||||
--background-focused: #84c5db;
|
||||
|
||||
height: 50px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.large {
|
||||
--icon-font-size: 32px;
|
||||
|
||||
font-size: 32px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.small {
|
||||
--icon-font-size: 15px;
|
||||
}
|
||||
|
||||
.custom {
|
||||
--background: #ffdde2;
|
||||
--background-hover: #fcc6ce;
|
||||
--background-focused: lightpink;
|
||||
--color: rgb(214, 60, 235);
|
||||
--border-radius: 10px;
|
||||
--padding-start: 10px;
|
||||
--padding-end: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
|
||||
async function loadFirstPage() {
|
||||
const nav = document.querySelector('ion-nav');
|
||||
await nav.componentOnReady();
|
||||
const firstPage = document.createElement('div');
|
||||
firstPage.classList.add('first-page');
|
||||
firstPage.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page One</h1>
|
||||
<ion-button class="next">Go to Page Two</ion-button>
|
||||
</ion-content>
|
||||
`;
|
||||
|
||||
await nav.setRoot(firstPage);
|
||||
|
||||
// okay cool, we're in the DOM now
|
||||
const button = firstPage.querySelector('.next');
|
||||
button.addEventListener('click', async () => {
|
||||
await goToPageTwo(nav);
|
||||
});
|
||||
}
|
||||
|
||||
async function goToPageTwo(nav) {
|
||||
const secondPage = document.createElement('div');
|
||||
secondPage.classList.add('second-page');
|
||||
secondPage.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page Two</h1>
|
||||
<p>Just an empty <code>ion-back-button</code></p>
|
||||
<ion-button class="next">Go to Page Three</ion-button>
|
||||
</ion-content>
|
||||
`;
|
||||
|
||||
// okay cool, we're in the DOM now
|
||||
await nav.push(secondPage);
|
||||
|
||||
const nextButton = secondPage.querySelector('ion-button.next');
|
||||
nextButton.addEventListener('click', async () => {
|
||||
await goToPageThree(nav);
|
||||
});
|
||||
}
|
||||
|
||||
async function goToPageThree(nav) {
|
||||
const thirdPage = document.createElement('div');
|
||||
thirdPage.classList.add('third-page');
|
||||
thirdPage.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button color="danger" text="Text!" icon="add"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page Three</h1>
|
||||
<p>Custom back button</p>
|
||||
<ion-button class="next">Go to Page Four</ion-button>
|
||||
</ion-content>
|
||||
`;
|
||||
|
||||
// okay cool, we're in the DOM now
|
||||
await nav.push(thirdPage);
|
||||
|
||||
const nextButton = thirdPage.querySelector('ion-button.next');
|
||||
nextButton.addEventListener('click', async () => {
|
||||
await goToPageFour(nav);
|
||||
});
|
||||
}
|
||||
|
||||
async function goToPageFour(nav) {
|
||||
const fourthPage = document.createElement('div');
|
||||
fourthPage.classList.add('fourth-page');
|
||||
fourthPage.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-menu-button auto-hide="false"></ion-menu-button>
|
||||
<ion-back-button color="danger"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Four</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page Four</h1>
|
||||
<p>Back button and menu button</p>
|
||||
</ion-content>
|
||||
`;
|
||||
|
||||
// okay cool, we're in the DOM now
|
||||
await nav.push(fourthPage);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
131
core/src/components/back-button/test/navigation/index.html
Normal file
131
core/src/components/back-button/test/navigation/index.html
Normal file
@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Back Button - Navigation</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="loadFirstPage()">
|
||||
<ion-app>
|
||||
<ion-nav></ion-nav>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
|
||||
async function loadFirstPage() {
|
||||
const nav = document.querySelector('ion-nav');
|
||||
await nav.componentOnReady();
|
||||
const firstPage = document.createElement('div');
|
||||
firstPage.classList.add('first-page');
|
||||
firstPage.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page One</h1>
|
||||
<ion-button class="next">Go to Page Two</ion-button>
|
||||
</ion-content>
|
||||
`;
|
||||
|
||||
await nav.setRoot(firstPage);
|
||||
|
||||
// okay cool, we're in the DOM now
|
||||
const button = firstPage.querySelector('.next');
|
||||
button.addEventListener('click', async () => {
|
||||
await goToPageTwo(nav);
|
||||
});
|
||||
}
|
||||
|
||||
async function goToPageTwo(nav) {
|
||||
const secondPage = document.createElement('div');
|
||||
secondPage.classList.add('second-page');
|
||||
secondPage.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page Two</h1>
|
||||
<p>Just an empty <code>ion-back-button</code></p>
|
||||
<ion-button class="next">Go to Page Three</ion-button>
|
||||
</ion-content>
|
||||
`;
|
||||
|
||||
// okay cool, we're in the DOM now
|
||||
await nav.push(secondPage);
|
||||
|
||||
const nextButton = secondPage.querySelector('ion-button.next');
|
||||
nextButton.addEventListener('click', async () => {
|
||||
await goToPageThree(nav);
|
||||
});
|
||||
}
|
||||
|
||||
async function goToPageThree(nav) {
|
||||
const thirdPage = document.createElement('div');
|
||||
thirdPage.classList.add('third-page');
|
||||
thirdPage.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button color="danger" text="Text!" icon="add"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page Three</h1>
|
||||
<p>Custom back button</p>
|
||||
<ion-button class="next">Go to Page Four</ion-button>
|
||||
</ion-content>
|
||||
`;
|
||||
|
||||
// okay cool, we're in the DOM now
|
||||
await nav.push(thirdPage);
|
||||
|
||||
const nextButton = thirdPage.querySelector('ion-button.next');
|
||||
nextButton.addEventListener('click', async () => {
|
||||
await goToPageFour(nav);
|
||||
});
|
||||
}
|
||||
|
||||
async function goToPageFour(nav) {
|
||||
const fourthPage = document.createElement('div');
|
||||
fourthPage.classList.add('fourth-page');
|
||||
fourthPage.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-menu-button auto-hide="false"></ion-menu-button>
|
||||
<ion-back-button color="danger"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Four</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page Four</h1>
|
||||
<p>Back button and menu button</p>
|
||||
</ion-content>
|
||||
`;
|
||||
|
||||
// okay cool, we're in the DOM now
|
||||
await nav.push(fourthPage);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
10
core/src/components/back-button/test/standalone/e2e.ts
Normal file
10
core/src/components/back-button/test/standalone/e2e.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('back-button: standalone', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/back-button/test/standalone?ionic:_testing=true'
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Back Button</title>
|
||||
<title>Back Button - Standalone</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/core.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
|
||||
10
core/src/components/back-button/test/toolbar/e2e.ts
Normal file
10
core/src/components/back-button/test/toolbar/e2e.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('back-button: basic', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/back-button/test/basic?ionic:_testing=true'
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
125
core/src/components/back-button/test/toolbar/index.html
Normal file
125
core/src/components/back-button/test/toolbar/index.html
Normal file
@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Back Button - Toolbar</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
<ion-back-button class="ion-focused"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Default</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button class="custom"></ion-back-button>
|
||||
<ion-back-button class="custom ion-focused"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Custom</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button color="secondary"></ion-back-button>
|
||||
<ion-back-button color="secondary" class="ion-focused"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Secondary</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="light">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
<ion-back-button class="ion-focused"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Light</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="danger">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button>
|
||||
<ion-icon name="star" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Danger</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-back-button icon="star" text=""></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="dark">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text="Back" icon=""></ion-back-button>
|
||||
<ion-back-button text="Back" icon="" class="ion-focused"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Dark</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text=""></ion-back-button>
|
||||
<ion-back-button text="" class="ion-focused"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Tertiary</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="primary">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text="Back"></ion-back-button>
|
||||
<ion-back-button text="Back" class="ion-focused"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Primary</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="success">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text="undo" icon="paper"></ion-back-button>
|
||||
<ion-back-button text="undo" icon="paper" class="ion-focused"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Success</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
var buttons = document.querySelectorAll('ion-back-button');
|
||||
|
||||
for(var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].addEventListener('click', (event) => onClick(event));
|
||||
}
|
||||
|
||||
function onClick(ev) {
|
||||
console.log("clicked the button", ev.target.innerText);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
ion-back-button {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.custom {
|
||||
--background: #ffdde2;
|
||||
--background-hover: #fcc6ce;
|
||||
--background-focused: lightpink;
|
||||
--color: rgb(214, 60, 235);
|
||||
--border-radius: 10px;
|
||||
--padding-start: 10px;
|
||||
--padding-end: 10px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user