* @class Roo.bootstrap.NavGroup
* @extends Roo.bootstrap.Component
* Bootstrap NavGroup class
- * @cfg {String} align left | right
- * @cfg {Boolean} inverse false | true
+ * @cfg {String} align (left|right)
+ * @cfg {Boolean} inverse
* @cfg {String} type (nav|pills|tab) default nav
* @cfg {String} navId - reference Id for navbar.
* @event changed
* Fires when the active item changes
* @param {Roo.bootstrap.NavGroup} this
- * @param {Roo.bootstrap.Navbar.Item} item The item selected
- * @param {Roo.bootstrap.Navbar.Item} item The previously selected item
+ * @param {Roo.bootstrap.Navbar.Item} selected The item selected
+ * @param {Roo.bootstrap.Navbar.Item} prev The previously selected item
*/
'changed': true
});
cfg = {
tag : 'ul',
cls: 'nav'
- }
-
- if (['tabs','pills'].indexOf(this.type)!==-1) {
- cfg.cls += ' nav-' + this.type
- } else {
- if (this.type!=='nav') {
- Roo.log('nav type must be nav/tabs/pills')
- }
- cfg.cls += ' navbar-nav'
- }
+ };
+ if (Roo.bootstrap.version == 4) {
+ if (['tabs','pills'].indexOf(this.type) != -1) {
+ cfg.cls += ' nav-' + this.type;
+ } else {
+ // trying to remove so header bar can right align top?
+ if (this.parent() && this.parent().xtype != 'NavHeaderbar') {
+ // do not use on header bar...
+ cfg.cls += ' navbar-nav';
+ }
+ }
+
+ } else {
+ if (['tabs','pills'].indexOf(this.type) != -1) {
+ cfg.cls += ' nav-' + this.type
+ } else {
+ if (this.type !== 'nav') {
+ Roo.log('nav type must be nav/tabs/pills')
+ }
+ cfg.cls += ' navbar-nav'
+ }
+ }
- if (this.parent().sidebar) {
+ if (this.parent() && this.parent().sidebar) {
cfg = {
tag: 'ul',
cls: 'dashboard-menu sidebar-menu'
- }
+ };
return cfg;
}
if (this.form === true) {
cfg = {
tag: 'form',
- cls: 'navbar-form'
- }
-
+ cls: 'navbar-form form-inline'
+ };
+ //nav navbar-right ml-md-auto
if (this.align === 'right') {
- cfg.cls += ' navbar-right';
+ cfg.cls += ' navbar-right ml-md-auto';
} else {
cfg.cls += ' navbar-left';
}
}
if (this.align === 'right') {
- cfg.cls += ' navbar-right';
- }
+ cfg.cls += ' navbar-right ml-md-auto';
+ } else {
+ cfg.cls += ' mr-auto';
+ }
if (this.inverse) {
cfg.cls += ' navbar-inverse';
*/
addItem : function(cfg)
{
- var cn = new Roo.bootstrap.NavItem(cfg);
+ if (this.form && Roo.bootstrap.version == 4) {
+ cfg.tag = 'div';
+ }
+ var cn = new Roo.bootstrap.NavItem(cfg);
this.register(cn);
cn.parentId = this.id;
cn.onRender(this.el, null);
item.navId = this.navId;
},
-
+
+ /**
+ * clear all the Navigation item
+ */
+
+ clearAll : function()
+ {
+ this.navItems = [];
+ this.el.dom.innerHTML = '';
+ },
getNavItem: function(tabId)
{