I'm trying to use material.io tabs in a project, anyway the html structure is not well documented:
https://material.io/components/tabs/web#design-api-documentation
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
<span class="mdc-tab__text-label">Favorites</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
where am i supposed to put the tab body content? It seems they shows only how to build a tab bar but not the whole functionality?
first, you should make the tab bars in a div then content in another div additionally use javascript to specify when content should change. I hope this answer helped. I think my answer must not be very clear but when you go through the code you will find what I mean
<div class="svelte4" style="flex:1;" id="tim">
<div class="mdc-tab-bar" role="tablist" style="background-color:rgb(34, 34, 34);">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">1</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">2</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">3</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<div class="content content--active">
<p>1</p>
</div>
<div class="content">
<p>2</p>
</div>
<div class="content">
<p>3</p>
</div>
</div>
var tabBar = new mdc.tabBar.MDCTabBar(document.querySelector('.mdc-tab-bar'));
var contentEls = document.querySelectorAll('.content');
tabBar.listen('MDCTabBar:activated', function (event) {
// Hide currently-active content
document.querySelector('.content--active').classList.remove('content--active');
// Show content for newly-activated tab
contentEls[event.detail.index].classList.add('content--active');
});
Related
I have a nav tab class with two tabs with material and I want to show the second tab.
I have tried with jQuery but that is not working for me.
Here my HTML :
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content nav nav-tabs" id="exTabs">
<button class="nav-item nav-link mdc-tab mdc-tab--active" id="nav_tns_tab" data-toggle="tab" href="#nav_tns" role="tab" aria-selected="true" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">TNS</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="nav-item nav-link mdc-tab" id="nav_act_tab" data-toggle="tab" href="#nav_act" role="tab" aria-selected="false" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">Activite</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<div class="tab-content mt-4" style="display: block;position: relative;width: 100%;margin-bottom: 56px;">
<div class="tab-pane active mt-3" id="nav_tns">
<div class="mdc-card demo-card">
</div>
<div class="mdc-card demo-card mt-3">
</div>
</div>
<div class="tab-pane fade mt-3" style="" id="nav_act">
<div class="mdc-card demo-card">
</div>
</div>
</div>
Here my code Jquery :
activaTab('nav_act');
function activaTab(tab) {
$('.nav-tabs [href="#' + tab + '"]').tab('show');
};
So how can I solve this problem with jquery or by adding specific class like show active in bootstrap.
Make sure to add the proper libraries. As you can see in this example, the default tab is the second.
activaTab('nav_act');
function activaTab(tab) {
$('.nav-tabs [href="#' + tab + '"]').tab('show');
};
.show {
background-color: red!important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.js"></script>
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content nav nav-tabs" id="exTabs">
<button class="nav-item nav-link mdc-tab mdc-tab--active" id="nav_tns_tab" data-toggle="tab" href="#nav_tns" role="tab" aria-selected="true" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">TNS</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="nav-item nav-link mdc-tab" id="nav_act_tab" data-toggle="tab" href="#nav_act" role="tab" aria-selected="false" tabindex="0" style="border:0px">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">Activite</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
<div class="tab-content mt-4" style="display: block;position: relative;width: 100%;margin-bottom: 56px;">
<div class="tab-pane active mt-3" id="nav_tns">
<div class="mdc-card demo-card">
</div>
<div class="mdc-card demo-card mt-3">
</div>
</div>
<div class="tab-pane fade mt-3" style="" id="nav_act">
<div class="mdc-card demo-card">
</div>
</div>
</div>
I'm using this
https://material.io/develop/web/components/tabs/tab-bar/
To make a tab bar
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">title</span>
<span class="mdc-tab__text-label">Name</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">style</span>
<span class="mdc-tab__text-label">Tags</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
<span class="mdc-tab__text-label">Status</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">warning</span>
<span class="mdc-tab__text-label">Restriction</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">keyboard_arrow_right</span>
<span class="mdc-tab__text-label">Other</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
and this JS
const tabBar = mdc.tabBar.MDCTabBar.attachTo(document.querySelector('.mdc-tab-bar'));
tabBar.listen('MDCTab:interacted', function (event) {
alert(1);
});
document.querySelectorAll('.mdc-tab-bar button')[3].click();
//tabBar.activateTab(3);
Invoking the click works (via code or manually with mouse), and emits the event and alerts "1". However I would rather use the activateTab function, but it only makes the tab active, but does not emit the event.
Does anyone know what's wrong here?
The MDCTab:interacted event is emitted before tab activation which is why it is not triggered when using the activateTab method. MDCTab:interacted is actually used by the MDC tab bar to know which tab to activate. Depending on what your end goal is, you may be able to get what you need by using the MDCTabBar:activated event instead since it will be triggered by the activateTab method and provides the index of the activated tab in the event detail data.
const tabBar = mdc.tabBar.MDCTabBar.attachTo(document.querySelector('.mdc-tab-bar'));
const tabs = document.querySelectorAll('.mdc-tab');
tabBar.listen('MDCTabBar:activated', (event) => {
const tab = tabs[event.detail.index];
console.log(tab.children[0].children[1].textContent, 'tab activated');
});
tabBar.activateTab(3); // activate "Restriction" tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Tabs Example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<body>
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">title</span>
<span class="mdc-tab__text-label">Name</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="false" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">style</span>
<span class="mdc-tab__text-label">Tags</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="false" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
<span class="mdc-tab__text-label">Status</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="false" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">warning</span>
<span class="mdc-tab__text-label">Restriction</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="false" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">keyboard_arrow_right</span>
<span class="mdc-tab__text-label">Other</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
This is my header area section of my template. i want to stick the menu bar and logo at the top. I tried a lot for all most 4 days.But i couldn't.I use sticky.js plugin.But it wouldn't happen.What's wrong with my code?I couldn't understand.I use parallax in the header section.Is that for the problem.
.parallax-window {
background: transparent;
}
.parallax_bg {
z-index: 2;
position: relative;
color: #FFFFFF;
}
<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
<div class="parallax_bg">
<div class="top_area">
<div class="header_area">
<div class="container">
<div class="row" id="navbar-example">
<div class="col-md-2">
<div class="logo">
<img src="img/header_img/logo.png" alt="">
</div>
</div>
<div class="col-md-10">
<div class="main_menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Igredients</li>
<li>Menu</li>
<li>Reviews</li>
<li>Reservations</li>
</ul>
</div>
<div class="social_links">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_text_area">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header_text">
<h2>the right ingredients <br /> for the right food</h2>
BOOK A TABLE
SEE THE MENU
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try navbar-fixed-top in class of header.
Is this what you're trying to achieve?
.parallax-window {
position: fixed;
top: 0px;
left: 0px;
}
<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
<div class="parallax_bg">
<div class="top_area">
<div class="header_area">
<div class="container">
<div class="row" id="navbar-example">
<div class="col-md-2">
<div class="logo">
<img src="img/header_img/logo.png" alt="">
</div>
</div>
<div class="col-md-10">
<div class="main_menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Igredients</li>
<li>Menu</li>
<li>Reviews</li>
<li>Reservations</li>
</ul>
</div>
<div class="social_links">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_text_area">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header_text">
<h2>the right ingredients <br /> for the right food</h2>
BOOK A TABLE
SEE THE MENU
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have a button and I want to put normal is the default value of this button. I have change ng-swich-default to normal but it not catch data from normal in the drop down. It shows only letter. How can I do it with AngularJS? I have never used it as before. Below code:
<span class="priority-select btn-group" dropdown>
<button
type="button"
class="btn btn-default dropdown-toggle"
dropdown-toggle>
<img
ng-if="form.priority === undefined"
src="images/task_approval/priority/priority-create.png"
alt="priority"/>
<img
ng-if="form.priority !== undefined"
ng-src="images/task_approval/priority/{{form.priority}}.png"
alt="priority"/>
<span ng-switch="form.priority">
<span
ng-switch-when="high"
class="btn-text"
translate>High
</span>
<span
ng-switch-when="normal"
class="btn-text"
translate>Normal
</span>
<span
ng-switch-when="low"
class="btn-text"
translate>Low
</span>
<span
ng-switch-default
class="btn-text"
translate>Priority
</span>
</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a ng-click="set_priority('high')">
<img src="images/task_approval/priority/high.png" alt="high"/>
<span translate>High</span>
</a>
</li>
<li>
<a ng-click="set_priority('normal')">
<img src="images/task_approval/priority/normal.png" alt="normal"/>
<span translate>Normal</span>
</a>
</li>
<li>
<a ng-click="set_priority('low')">
<img src="images/task_approval/priority/low.png" alt="low"/>
<span translate>Low</span>
</a>
</li>
</ul>
</span>
You must declare set_priority() function and change form.priority value with your parameter.
or
you can change inside ng-click in "a" tag.
Something like this:
ng-click="formPriority='high'"
and then
ng-switch="formPriority"
<span class="priority-select btn-group" dropdown>
<button ng-init='formPriority="normal"'
type="button"
class="btn btn-default dropdown-toggle"
dropdown-toggle>
<img
ng-if="formPriority == undefined"
src="images/task_approval/priority/priority-create.png"
alt="priority"/>
<img
ng-if="formPriority != undefined"
ng-src="images/task_approval/priority/{{formPriority}}.png"
alt="priority"/>
<span ng-switch="formPriority">
<span
ng-switch-when="high"
class="btn-text"
translate>High
</span>
<span
ng-switch-when="normal"
class="btn-text"
translate>Normal
</span>
<span
ng-switch-when="low"
class="btn-text"
translate>Low
</span>
<span
ng-switch-default
class="btn-text"
translate>Priority
</span>
</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a ng-click='formPriority="high"'>
<img src="images/task_approval/priority/high.png" alt="high"/>
<span translate>High</span>
</a>
</li>
<li>
<a ng-click='formPriority="normal"'>
<img src="images/task_approval/priority/normal.png" alt="normal"/>
<span translate>Normal</span>
</a>
</li>
<li>
<a ng-click='formPriority="low"'>
<img src="images/task_approval/priority/low.png" alt="low"/>
<span translate>Low</span>
</a>
</li>
</ul>
</span>
<div class="profile-usermenu">
<ul class="nav">
<li class="active">
<a href="#" id="navitem1" data-content="content-wrap1 ">
<i class="glyphicon glyphicon-user"></i>
View Profile </a>
</li>
<li class="active">
<a href="#" id="navitem2" data-content="content-wrap2">
<i class="glyphicon glyphicon-"></i>
Account Settings </a>
</li>
<li class="active">
<a href="#" id="navitem3" data-content="content-wrap3">
<i class="glyphicon glyphicon-ok"></i>
Tasks </a>
</li>
<li class="active">
<a href="#" id="navitem4" data-content="content-wrap4">
<i class="glyphicon glyphicon-flag"></i>
Help </a>
</li>
</ul>
</div>
<!-- END MENU -->
</div>
</div>
<div class="col-md-9">
<div class="profile-content">
<div id="content-wrap1" class="content">Edit Profile Content goes here Either it may form or what ever </div>
<div id="content-wrap2" class="content">Account settings</div>
<div id="content-wrap3" class="content">Invoices</div>
<div id="content-wrap4" class="content">Credit card info</div>
</div>
</div>
</div>
</div>
<br>
<br>