I want to present Tabs using Bootstrap 4 with bootstrap-native-v4 within an Angular 2 application. (I am including bootstrap-native-v4 via the angular.json file 'scripts' value "./node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js" - note I can see bootstrap-native-v4 included within the source [scripts.js file] when viewed thru the Chrome Developer Tools)
I am using localhost:4200/myfolder to run my application locally however for the code below, when I hover-over/click the tabs the URL defaults to localhost:4200/#home (instead of localhost:4200/myfolder#home), localhost:4200/#profile (instead of localhost:4200/myfolder#profile), etc.
So what happens is that the page does a post back to a none existent URL
I've tried setting the BaseURL in the head, however although this fixes the URL issue the page doesn't refresh the content when I click on the tabs. I've also tried to set the href of each anchor to myfolder#home, myfolder#profile, etc however again although this fixes the URL issue (no postback), the tab content doesn't refresh
I really want to avoid using JQuery (hence the use of bootstrap-native-v4) - most/all of the examples seem to use JQuery - I am trying to go via Data API (JS within the bootstrap-native-v4 scope is OK tho)
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist" data-tabs="tabs">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">a...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">b...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">c...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">d...</div>
</div>
I am wanting the code to not postback to the server and to simply switch between tabs showing the corresponding tab's content
Can anyone help ?
BSN developer here. I want to say this: I'm no Angular expert, but I can tell my library goes away from traditional jQuery methods, events and plugin structure, you need to think Native JavaScript FIRST.
Supposing you're working with fully dynamic content, where content is added/changed/removed later into/from the DOM, you can try to work with it following the documentation:
init each of your newly added tabs with var myTab[N] = new Tab(element,options); (myTab[N]/myTab1 is the initialization object to work with)
interact with your object via method, EG myTab[N].show();
dispose the object via myTab[N] = null; then remove its respective tab+tabContent from the DOM
the Tab component (as well as all others in the library) does NOT handle #myTab URL navigation
Check the documentation and wiki for more info, you might find some guides to help you hopefully.
Related
How to change that black box shadow color to another color when we switch nav tabs by using Tab key?
The code:
<ul class="nav nav-tabs m-5">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
EDIT as of December 1st 2022 (Chrome v107.0.5304.121)
It has nothing to do with Bootstrap. It was asked before.
This happens because of the Chrome v83 update and people don't like it.
Seems like in the past it was possible to disable black border when using ↹ (i.e., Tab key) the following ways:
disable Web Platform Controls updated UI (source)
disable this flag: chrome://flags/#form-controls-refresh (source) or
go to chrome://settings/accessibility and disable Show a quick highlight on the focused object (source).
I was searching for a while, but was unable to disable black border in Chrome v107.0.5304.121.
Google says the black border is back and seems like there’s no way to get rid of it.
I am migrating to bootstrap4 from bootstrap 3.
To work well, I must markup the menus with HTML like this:
<ul class="dropdown-menu">
<li><a class="nav-item nav-link" href="foo">Foo</a></li>
<li><a class="nav-item nav-link" href="bar">Bar</a></li>
.
.
.
</ul>
where each element gets the same classes.
This is a part of a jinja2 template in Django.
It seems tedious to "decorate" each tag with class="nav-item nav-link"
I didn't need to do this with the bootstrap3 code (which I inherited and I know little about this)
Is there a different way of doing this?
If you are using VSCode you can use shortcut ctrl+alt+DownArrow to duplicate coursor to bottom lines and edit multiple in the same time.
Note: I am using the INSPINIA administrative theme and this question is an extension of the following question: How do I install bootstrap 4 template to Ember web project?
How do I get css animations working in Ember?
I am attempting to get the collapse-able sidebar navigation menu working (see the INSPINIA link here). Currently, I do not see the arrow and the menu is displayed only in expanded form in the <ul class="nav nav-second-level">...</ul> block of code.
In looking at the sample projects and View Source page, there appear to be a lot of add-ons that INSPINIA uses. Do I need to install all of them? Or, do I just need jQuery?
Here is the code for my handlebar file in question.
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
{{#if session.isAuthenticated}}
<li class="active"><i class="fa fa-th-large"></i> <span class="nav-label">Client</span> <span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Update Information</li>
<li>{{#link-to "clients.change-password"}}Change Password{{/link-to}}</li>
<li><a href="#" onclick={{action "logout"}}>Logout</a></li>
</ul>
</li>
{{else}}
<li>{{#link-to "clients.login"}}Login{{/link-to}}</li>
<li>{{#link-to "clients.register"}}Register{{/link-to}}</li>
{{/if}}
<li>{{#link-to "misc.about"}}About{{/link-to}}</li>
<li>{{#link-to "misc.contactus"}}Contact Us{{/link-to}}</li>
</ul>
</div>
</nav>
I'd suggest using Liquid Fire.
Liquid Fire is a toolkit for managing animated transitions in an Ember application.
You can use the transition.js file to manage the duration, direction, timing etc. of CSS transitions in your app.
You may use Ember Animated if you need more control over your animations.
I am trying to figure out how I can implement a tabbed site similar to the image below. Does anyone know/recognize this template or can guide me on how I can design something similar with bootstrap and css?
Bootstrap has a javascript tab plugin included to change tabs on clicking. You can checkout https://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior
If you want the pages to load a new page on clicking you could do something like (I've used font awesome for the icons here)
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="/sourcing"><i class="fa fa-pie-chart"></i>Sourcing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/people"><i class="fa fa-user-o"></i>People</a>
</li>
</ul>
In bootstrap 4 this would get the basic example working and you could play around with the CSS to change the look of each a when it has the "active" class
I'm doing some code clean up / validation in a web site, and have run into an issue. The site have a main menu (menubar) where the current page should be indicated.
The menu structure as is:
<nav role="navigation">
<ul role="menubar">
<li role="menuitem" aria-selected="true">
Current page
</li>
<li role="menuitem">
Another page
</li>
</ul>
</nav>
According to the WAI-ARIA spec, the state aria-selected is not allowed on the role menuitem: http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected. Neither can I find any state for menuitem that seem to mark the menuitem as selected: http://www.w3.org/TR/wai-aria/roles#menuitem.
What would be the correct implementation of a selected menuitem/page in a menubar?
Update:
I found one answer suggesting to leave the anchor out on the current page in the menu, but not sure if that will give me what I want.
<li role="menuitem">Current page</li>
As laid out very nicely in the blog entry The Accessible Current Page Link Conundrum there seems to be an upcoming solution by introducing the attribute aria-current="true".
For now, you stay with
your finding of either leaving the anchor out on the current page menu item
or include an aria-described attribute, which is specified to attach descriptive information to one or more elements by referencing an ID. Example:
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<span id="a11y-desc-current">current page</span>
</nav>