b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
68 lines
2.3 KiB
HTML
68 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<title>Tabs</title>
|
|
<meta name="description" content="Allows multiple instances to be contained within a single window. Tabs are used as a navigational widget for switching between sets of views. ">
|
|
|
|
<link rel="stylesheet" href="../tabs.css">
|
|
<link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
|
|
<!--
|
|
This <style> and <link> is only used for the example code, is no needed for the real case use
|
|
-->
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 10px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
body {
|
|
background: none;
|
|
}
|
|
|
|
h2.bb-docs {
|
|
font-size: 1.8rem;
|
|
font-family: sans-serif;
|
|
font-weight: 300;
|
|
color: #666;
|
|
margin: -1px 0 0;
|
|
background-color: #f5f5f5;
|
|
padding: 0.4rem 0.4rem 0.4rem 3rem;
|
|
border: solid 1px #e8e8e8;
|
|
}
|
|
|
|
.bb-tabpanel {
|
|
padding: 2rem;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body role="application">
|
|
|
|
<section role="region">
|
|
<!-- if your tabs are at the top, remove class="bottom" -->
|
|
<ul role="tablist" class="bb-tablist">
|
|
<li id="panel1" role="presentation">
|
|
<a id="tab1" href="#panel1" data-icon="recent-calls" aria-label="recent calls" role="tab" aria-controls="tabpanel1">comms</a>
|
|
<div id="tabpanel1" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab1">Tab Panel 1</div>
|
|
</li>
|
|
<li id="panel2" role="presentation">
|
|
<a id="tab2" href="#panel2" data-icon="user" aria-label="contacts" role="tab" aria-controls="tabpanel2">contacts</a>
|
|
<div id="tabpanel2" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab2">Tab Panel 2</div>
|
|
</li>
|
|
<li id="panel3" role="presentation" aria-disabled="true">
|
|
<a id="tab3" href="#panel3" data-icon="dialpad" aria-label="dialer" role="tab" aria-controls="tabpanel3">dialer</a>
|
|
<div id="tabpanel3" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab3">Tab Panel 3</div>
|
|
</li>
|
|
<li id="panel4" role="presentation">
|
|
<a id="tab4" href="#panel4" role="tab" aria-controls="tabpanel4">Tab name</a>
|
|
<div id="tabpanel4" class="bb-tabpanel" role="tabpanel" aria-labelledby="tab4">Tab Panel 4</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
</body>
|
|
</html>
|