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

Merge pull request #599 from google/toggles 

adding snippets based demos to toggles component page
master
Marc Cohen 2015-07-02 15:38:37 +01:00
parent a48a9bd30e 219d23ee47
commit 7e9d678087
14 changed files with 59 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/_pages/components.md
View File

@ -207,15 +207,39 @@ categories:
- name: checkbox
caption: Checkbox
class: mdl-checkbox
- name: icon-toggle
caption: Icon toggle
class: mdl-icon-toggle
snippets:
- snippet_group:
- caption: Check on
file: check-on.html
- caption: Check off
file: check-off.html
- name: radio
caption: Radio button
class: mdl-radio
snippets:
- snippet_group:
- caption: Radio on
file: radio-on.html
- caption: Radio off
file: radio-off.html
- name: icon-toggle
caption: Icon toggle
class: mdl-icon-toggle
snippets:
- snippet_group:
- caption: Icon on
file: icon-on.html
- caption: Icon off
file: icon-off.html
- name: switch
caption: Switch
class: mdl-switch
snippets:
- snippet_group:
- caption: Switch on
file: switch-on.html
- caption: Switch off
file: switch-off.html
- name: tables
title: Tables
description: Organize data.

23
src/checkbox/demo.html
View File

@ -1,23 +0,0 @@
<div class="demo-preview-block">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" />
<span class="mdl-checkbox__label">Check me out</span>
</label>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input" />
<span class="mdl-checkbox__label">I'm just a Material girl in a Material world</span>
</label>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-4">
<input type="checkbox" id="checkbox-4" class="mdl-checkbox__input" />
<span class="mdl-checkbox__label">Try using checkboxes</span>
</label>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-5">
<input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled />
<span class="mdl-checkbox__label">But not this one</span>
</label>
</div>

4
src/checkbox/snippets/check-off.html Normal file
View File

@ -0,0 +1,4 @@
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input" />
<span class="mdl-checkbox__label">Checkbox</span>
</label>

4
src/checkbox/snippets/check-on.html Normal file
View File

@ -0,0 +1,4 @@
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked />
<span class="mdl-checkbox__label">Checkbox</span>
</label>

20
src/icon-toggle/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-icon-toggle-block {
display: inline-block;
margin: 0 20px 20px 0;
}

38
src/icon-toggle/demo.html
View File

@ -1,38 +0,0 @@
<div class="demo-preview-block">
<div class="demo-icon-toggle-block">
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" />
<i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
<input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input" />
<i class="mdl-icon-toggle__label material-icons">format_italic</i>
</label>
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-3">
<input type="checkbox" id="icon-toggle-3" class="mdl-icon-toggle__input" />
<i class="mdl-icon-toggle__label material-icons">format_underline</i>
</label>
</div>
<h2>Disabled</h2>
<div class="demo-icon-toggle-block">
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-icon-toggle-1">
<input type="checkbox" id="disabled-icon-toggle-1" class="mdl-icon-toggle__input" disabled />
<i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-icon-toggle-2">
<input type="checkbox" id="disabled-icon-toggle-2" class="mdl-icon-toggle__input" disabled />
<i class="mdl-icon-toggle__label material-icons">format_italic</i>
</label>
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="disabled-icon-toggle-3">
<input type="checkbox" id="disabled-icon-toggle-3" class="mdl-icon-toggle__input" disabled />
<i class="mdl-icon-toggle__label material-icons">format_underline</i>
</label>
</div>
</div>

4
src/icon-toggle/snippets/icon-off.html Normal file
View File

@ -0,0 +1,4 @@
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
<input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input" />
<i class="mdl-icon-toggle__label material-icons">format_italic</i>
</label>

4
src/icon-toggle/snippets/icon-on.html Normal file
View File

@ -0,0 +1,4 @@
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked />
<i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>

26
src/radio/demo.html
View File

@ -1,26 +0,0 @@
<div class="demo-preview-block">
<p>A radio button can either be a primary action or a secondary action.</p>
<section class="demo-preview-block">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi1">
<input type="radio" id="wifi1" class="mdl-radio__button" name="wifi[]" value="1" checked />
<span class="mdl-radio__label">Always</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi2">
<input type="radio" id="wifi2" class="mdl-radio__button" name="wifi[]" value="2" />
<span class="mdl-radio__label">Only when plugged in</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi3">
<input type="radio" id="wifi3" class="mdl-radio__button" name="wifi[]" value="3" />
<span class="mdl-radio__label">Never</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi4">
<input type="radio" id="wifi4" class="mdl-radio__button" name="wifi[]" value="3" disabled />
<span class="mdl-radio__label">Unavailable option</span>
</label>
</section>
</div>

4
src/radio/snippets/radio-off.html Normal file
View File

@ -0,0 +1,4 @@
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
<input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2" />
<span class="mdl-radio__label">Option 2</span>
</label>

4
src/radio/snippets/radio-on.html Normal file
View File

@ -0,0 +1,4 @@
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked />
<span class="mdl-radio__label">Option 1</span>
</label>

23
src/switch/demo.html
View File

@ -1,23 +0,0 @@
<div class="demo-preview-block">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" />
<span class="mdl-switch__label">Switch me</span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
<input type="checkbox" id="switch-2" class="mdl-switch__input" />
<span class="mdl-switch__label">Flip me left and right</span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-4">
<input type="checkbox" id="switch-4" class="mdl-switch__input" />
<span class="mdl-switch__label">Me too</span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-5">
<input type="checkbox" id="switch-5" class="mdl-switch__input" disabled />
<span class="mdl-switch__label">Can't touch this</span>
</label>
</div>

4
src/switch/snippets/switch-off.html Normal file
View File

@ -0,0 +1,4 @@
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
<input type="checkbox" id="switch-2" class="mdl-switch__input" />
<span class="mdl-switch__label">Switch me</span>
</label>

4
src/switch/snippets/switch-on.html Normal file
View File

@ -0,0 +1,4 @@
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked />
<span class="mdl-switch__label">Switch me</span>
</label>