google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding revised content tabs demo

master
Sérgio Gomes 2015-07-02 15:24:05 +01:00
parent 23ab494c01
commit aaa77706fb
4 changed files with 37 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_pages/components.md
View File

@ -151,6 +151,10 @@ categories:
- name: tabs
caption: Tabs
class: mdl-tabs
snippets:
- snippet_group:
- caption: Content tabs
file: tabs.html
- name: footer
caption: Footer
class: mdl-mega-footer / mdl-mini-footer

20
src/tabs/demo.css
View File

@ -1,20 +0,0 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.demo-page--tabs .demo-preview-block {
margin: 0;
padding: 0 0 10px 0;
}

37
src/tabs/demo.html
View File

@ -1,37 +0,0 @@
<div class="demo-preview-block demo-page--tabs">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
<a href="#starks-panel" class="mdl-tabs__tab is-active">Tab I</a>
<a href="#lannisters-panel" class="mdl-tabs__tab">Tab II</a>
<a href="#targaryens-panel" class="mdl-tabs__tab">Tab III</a>
</div>
<div class="mdl-tabs__panel is-active" id="starks-panel">
<ul>
<li>Eddard</li>
<li>Catelyn</li>
<li>Robb</li>
<li>Sansa</li>
<li>Brandon</li>
<li>Arya</li>
<li>Rickon</li>
</ul>
</div>
<div class="mdl-tabs__panel" id="lannisters-panel">
<ul>
<li>Tywin</li>
<li>Cersei</li>
<li>Jamie</li>
<li>Tyrion</li>
</ul>
</div>
<div class="mdl-tabs__panel" id="targaryens-panel">
<ul>
<li>Viserys</li>
<li>Daenerys</li>
</ul>
</div>
</div>
</div>

33
src/tabs/snippets/tabs.html Normal file
View File

@ -0,0 +1,33 @@
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
<a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a>
<a href="#lannisters-panel" class="mdl-tabs__tab">Lannisters</a>
<a href="#targaryens-panel" class="mdl-tabs__tab">Targaryens</a>
</div>
<div class="mdl-tabs__panel is-active" id="starks-panel">
<ul>
<li>Eddard</li>
<li>Catelyn</li>
<li>Robb</li>
<li>Sansa</li>
<li>Brandon</li>
<li>Arya</li>
<li>Rickon</li>
</ul>
</div>
<div class="mdl-tabs__panel" id="lannisters-panel">
<ul>
<li>Tywin</li>
<li>Cersei</li>
<li>Jamie</li>
<li>Tyrion</li>
</ul>
</div>
<div class="mdl-tabs__panel" id="targaryens-panel">
<ul>
<li>Viserys</li>
<li>Daenerys</li>
</ul>
</div>
</div>