diff --git a/packages/core/src/components/navbar/navbar.tsx b/packages/core/src/components/navbar/navbar.tsx deleted file mode 100644 index 6846dd6e15..0000000000 --- a/packages/core/src/components/navbar/navbar.tsx +++ /dev/null @@ -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 [ -
, - , - , - , - , - , -
- -
- ]; - } -} diff --git a/packages/core/src/components/navbar/readme.md b/packages/core/src/components/navbar/readme.md deleted file mode 100644 index 3bb2f61fd5..0000000000 --- a/packages/core/src/components/navbar/readme.md +++ /dev/null @@ -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 -`` 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 - - - - - - - - - Page Title - - - - - - - - - - -``` - - - - - -## Properties - -#### backButtonIcon - -string - - -#### backButtonText - -string - - -#### hidden - -boolean - - -#### hideBackButton - -boolean - - -## Attributes - -#### backButtonIcon - -string - - -#### backButtonText - -string - - -#### hidden - -boolean - - -#### hideBackButton - -boolean - - - ----------------------------------------------- - -*Built by [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/toolbar/readme.md b/packages/core/src/components/toolbar/readme.md index d94dc00fd7..5266c4d32d 100644 --- a/packages/core/src/components/toolbar/readme.md +++ b/packages/core/src/components/toolbar/readme.md @@ -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 `` or ``, the toolbars stay fixed in their respective location. When placed within ``, toolbars will scroll with the content. ### Buttons in a Toolbar + Buttons placed in a toolbar should be placed inside of the `` element. An exception to this is a [menuToggle](../../menu/MenuToggle) button. It should not be placed inside of the `` element. Both the diff --git a/packages/core/src/components/toolbar/toolbar.scss b/packages/core/src/components/toolbar/toolbar.scss index a2f5d73498..894873312b 100644 --- a/packages/core/src/components/toolbar/toolbar.scss +++ b/packages/core/src/components/toolbar/toolbar.scss @@ -81,16 +81,6 @@ ion-buttons, } -// Navbar -// -------------------------------------------------- - -ion-navbar.toolbar { - display: flex; - - transform: translateZ(0); -} - - // Toolbar Buttons // -------------------------------------------------- diff --git a/packages/core/stencil.config.js b/packages/core/stencil.config.js index 073876fcba..911c08054f 100644 --- a/packages/core/stencil.config.js +++ b/packages/core/stencil.config.js @@ -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'] },