mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
chore(ion-navbar): remove ion-navbar
This commit is contained in:
Adam Bradley
@ -1,71 +0,0 @@
|
||||
import { Component, Element, Prop } from '@stencil/core';
|
||||
import { createThemedClasses } from '../../utils/theme';
|
||||
import { Config } from '../../index';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-navbar',
|
||||
host: {
|
||||
theme: 'toolbar'
|
||||
}
|
||||
})
|
||||
export class Navbar {
|
||||
@Element() private el: HTMLElement;
|
||||
mode: string;
|
||||
color: string;
|
||||
|
||||
@Prop({ context: 'config' }) config: Config;
|
||||
@Prop() hideBackButton = false;
|
||||
@Prop() backButtonText: string;
|
||||
@Prop() backButtonIcon: string;
|
||||
@Prop() hidden = false;
|
||||
|
||||
backButtonClick(ev: UIEvent) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
}
|
||||
|
||||
componentDidLoad() {
|
||||
const buttons = this.el.querySelectorAll('ion-button');
|
||||
for (let i = 0; i < buttons.length; i++) {
|
||||
buttons[i].setAttribute('button-type', 'bar-button');
|
||||
}
|
||||
}
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
'statusbar-padding': this.config.getBoolean('statusbarPadding')
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const backButtonIcon = this.backButtonIcon || this.config.get('backButtonText', 'Back');
|
||||
const backButtonText = this.backButtonText || this.config.get('backButtonIcon', 'Back');
|
||||
|
||||
const backgroundCss = createThemedClasses(this.mode, this.color, 'toolbar-background');
|
||||
const contentCss = createThemedClasses(this.mode, this.color, 'toolbar-content');
|
||||
const backButtonCss = createThemedClasses(this.mode, this.color, 'back-button');
|
||||
const backButtonIconCss = createThemedClasses(this.mode, this.color, 'back-button-icon');
|
||||
const backButtonTextCss = createThemedClasses(this.mode, this.color, 'back-button-text');
|
||||
|
||||
return [
|
||||
<div class={backgroundCss}></div>,
|
||||
<button onClick={this.backButtonClick.bind(this)} class={backButtonCss} hidden={this.hideBackButton}>
|
||||
{ backButtonIcon
|
||||
? <ion-icon class={backButtonIconCss} name={backButtonIcon}></ion-icon>
|
||||
: null
|
||||
}
|
||||
<span class={backButtonTextCss}>{backButtonText}</span>
|
||||
</button>,
|
||||
<slot name='start'></slot>,
|
||||
<slot name='mode-start'></slot>,
|
||||
<slot name='mode-end'></slot>,
|
||||
<slot name='end'></slot>,
|
||||
<div class={contentCss}>
|
||||
<slot></slot>
|
||||
</div>
|
||||
];
|
||||
}
|
||||
}
|
||||
@ -1,83 +0,0 @@
|
||||
# ion-navbar
|
||||
|
||||
Navbar acts as the navigational toolbar, which also comes with a back
|
||||
button. A navbar can contain a `ion-title`, any number of buttons,
|
||||
a segment, or a searchbar. Navbars must be placed within an
|
||||
`<ion-header>` in order for them to be placed above the content.
|
||||
It's important to note that navbar's are part of the dynamic navigation
|
||||
stack. If you need a static toolbar, use ion-toolbar.
|
||||
|
||||
```html
|
||||
<ion-header>
|
||||
|
||||
<ion-navbar>
|
||||
<ion-button menuToggle>
|
||||
<ion-icon slot="icon-only" name="menu"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
<ion-title>
|
||||
Page Title
|
||||
</ion-title>
|
||||
|
||||
<ion-buttons end>
|
||||
<ion-button (click)="openModal()">
|
||||
<ion-icon slot="icon-only" name="options"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-navbar>
|
||||
|
||||
</ion-header>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### backButtonIcon
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### backButtonText
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### hidden
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### hideBackButton
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### backButtonIcon
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### backButtonText
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### hidden
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### hideBackButton
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built by [StencilJS](https://stenciljs.com/)*
|
||||
@ -1,13 +1,13 @@
|
||||
# ion-navbar
|
||||
# ion-toolbar
|
||||
|
||||
A Toolbar is a generic bar that is positioned above or below content.
|
||||
Unlike a [Navbar](../../navbar/Navbar), a toolbar can be used as a subheader.
|
||||
When toolbars are placed within an `<ion-header>` or `<ion-footer>`,
|
||||
the toolbars stay fixed in their respective location. When placed within
|
||||
`<ion-content>`, toolbars will scroll with the content.
|
||||
|
||||
|
||||
### Buttons in a Toolbar
|
||||
|
||||
Buttons placed in a toolbar should be placed inside of the `<ion-buttons>`
|
||||
element. An exception to this is a [menuToggle](../../menu/MenuToggle) button.
|
||||
It should not be placed inside of the `<ion-buttons>` element. Both the
|
||||
|
||||
@ -81,16 +81,6 @@ ion-buttons,
|
||||
}
|
||||
|
||||
|
||||
// Navbar
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-navbar.toolbar {
|
||||
display: flex;
|
||||
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
|
||||
// Toolbar Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ exports.config = {
|
||||
generateWWW: false,
|
||||
bundles: [
|
||||
{ components: ['ion-animation-controller'] },
|
||||
{ components: ['ion-app', 'ion-content', 'ion-scroll', 'ion-footer', 'ion-header', 'ion-navbar', 'ion-title', 'ion-toolbar'] },
|
||||
{ components: ['ion-app', 'ion-content', 'ion-scroll', 'ion-footer', 'ion-header', 'ion-title', 'ion-toolbar'] },
|
||||
{ components: ['ion-action-sheet', 'ion-action-sheet-controller'] },
|
||||
{ components: ['ion-alert', 'ion-alert-controller'] },
|
||||
{ components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] },
|
||||
|
||||
Reference in New Issue
Block a user