mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +08:00
fa87e35a05
- Removes the padding from the main toolbar and individually style the components inside of it - Adds a `has-icon-only` class to button, this is used to switch between `unbounded` and `bounded` ripples on buttons in a toolbar. If the button is clear and only has an icon, we use the unbounded "circular" ripple effect, otherwise still use the bounded one. This matches the MD spec, without making the other buttons look off. - Using the class above, style the button differently to match the MD spec - Updates the back button and menu button to use the proper size / icon size - Removes the opacity on an activated back button, it should use the ripple for activated - Moves the margin to the slots in a toolbar by grabbing the "first" and "last" slot and applying a class to them - Makes the segment in a toolbar use the min height from the toolbar - Updates the back button so that it matches the MD spec - Updates the header box shadow to use the old v3 datauri fixes #16950 fixes #14444
90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
|
|
|
|
import { Color, Config, Mode } from '../../interface';
|
|
import { createColorClasses, openURL } from '../../utils/theme';
|
|
|
|
@Component({
|
|
tag: 'ion-back-button',
|
|
styleUrls: {
|
|
ios: 'back-button.ios.scss',
|
|
md: 'back-button.md.scss'
|
|
},
|
|
scoped: true
|
|
})
|
|
export class BackButton implements ComponentInterface {
|
|
|
|
@Element() el!: HTMLElement;
|
|
|
|
@Prop({ context: 'config' }) config!: Config;
|
|
@Prop({ context: 'window' }) win!: Window;
|
|
|
|
/**
|
|
* The color to use from your application's color palette.
|
|
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
|
* For more information on colors, see [theming](/docs/theming/basics).
|
|
*/
|
|
@Prop() color?: Color;
|
|
|
|
/**
|
|
* The mode determines which platform styles to use.
|
|
*/
|
|
@Prop() mode!: Mode;
|
|
|
|
/**
|
|
* The url to navigate back to by default when there is no history.
|
|
*/
|
|
@Prop() defaultHref?: string;
|
|
|
|
/**
|
|
* The icon name to use for the back button.
|
|
*/
|
|
@Prop() icon?: string | null;
|
|
|
|
/**
|
|
* The text to display in the back button.
|
|
*/
|
|
@Prop() text?: string | null;
|
|
|
|
@Listen('click')
|
|
async onClick(ev: Event) {
|
|
const nav = this.el.closest('ion-nav');
|
|
ev.preventDefault();
|
|
|
|
if (nav && await nav.canGoBack()) {
|
|
return nav.pop({ skipIfBusy: true });
|
|
}
|
|
return openURL(this.win, this.defaultHref, ev, 'back');
|
|
}
|
|
|
|
hostData() {
|
|
const showBackButton = this.defaultHref !== undefined;
|
|
|
|
return {
|
|
class: {
|
|
...createColorClasses(this.color),
|
|
[`${this.mode}`]: true,
|
|
|
|
'button': true, // ion-buttons target .button
|
|
'ion-activatable': 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);
|
|
|
|
return (
|
|
<button type="button" class="button-native">
|
|
<span class="button-inner">
|
|
{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>}
|
|
</button>
|
|
);
|
|
}
|
|
}
|