Source

 
<link rel="stylesheet" href="../source/styles/smart.base.css" type="text/css" />  
<link rel="stylesheet" href="../source/styles/smart.material.css" type="text/css" />  
<link rel="stylesheet" href="../source/styles/smart.material-dark.css" type="text/css" />  
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />  

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>  
<script type="text/javascript" src="../source/smart.element.js"></script>  			
<script type="text/javascript" src="../source/smart.elements.js"></script>  			
 <section id="toggle-button">  
       <div class="module">  
         <br />  
         <p>Toggle buttons may be used to group related options. Arrange layout and spacing to convey that certain toggle buttons are part of a group.</p>  
         <p>  
           Focus and pressed states may reinforce that toggles are part of a group. For example, when one button segment is focused,  
           focus may be displayed simultaneously on the rest of the segment.  
         </p>  
         <p>Toggle button requirements:</p>  
         <ul class="arrow-list">  
           <li>Have at least three toggle buttons in a group</li>  
           <li>Label buttons with text, an icon, or both</li>  
         </ul>  
         <p>The following combinations are recommended:</p>  
         <ul class="arrow-list">  
           <li>Multiple and unselected</li>  
           <li>Exclusive and unselected</li>  
           <li>Exclusive only </li>  
         </ul>  
       </div>  
       <div class="module">  
         <div>  
           <div class="toggle-button-container toggle-button-exclusive-selection">  
             <div>  
               <smart-toggle-button class="material exclusive-selection" group="A"><i class="material-icons">format_align_left</i></smart-toggle-button>  
               <smart-toggle-button class="material exclusive-selection" group="A" checked><i class="material-icons">format_align_center</i></smart-toggle-button>  
               <smart-toggle-button class="material exclusive-selection" group="A"><i class="material-icons">format_align_right</i></smart-toggle-button>  
               <smart-toggle-button class="material exclusive-selection" group="A"><i class="material-icons">format_align_justify</i></smart-toggle-button>  
             </div>  
           </div>  
           <p>Exclusive selection</p>  
           <p>  
             Text justification toggle buttons present options for left, right, center, full, and justified text with only one item available for selection at a time.  
             Selecting one option deselects any other.  
           </p>  
         </div>  
         <div>  
           <div class="toggle-button-container toggle-button-no-selection">  
             <div>  
               <smart-toggle-button class="material"><i class="material-icons">format_align_left</i></smart-toggle-button>  
               <smart-toggle-button class="material"><i class="material-icons">format_align_center</i></smart-toggle-button>  
               <smart-toggle-button class="material"><i class="material-icons">format_align_right</i></smart-toggle-button>  
               <smart-toggle-button class="material"><i class="material-icons">format_align_justify</i></smart-toggle-button>  
             </div>  
           </div>  
           <p>No options are selected</p>  
         </div>  
       </div>  
       <div class="module">  
         <div>  
           <div class="toggle-button-container toggle-button-multiple-selection">  
             <div>  
               <smart-toggle-button class="material" checked><i class="material-icons">format_bold</i></smart-toggle-button>  
               <smart-toggle-button class="material" checked><i class="material-icons">format_italic</i></smart-toggle-button>  
               <smart-toggle-button class="material" checked><i class="material-icons">format_underlined</i></smart-toggle-button>  
               <smart-toggle-button class="material"><i class="material-icons">format_color_fill</i> <i class="material-icons">arrow_drop_down</i></smart-toggle-button>  
             </div>  
           </div>  
           <p>Multiple selection</p>  
           <p>Logically-grouped options, like Bold, Italic, and Underline, allow multiple options to be selected.</p>  
         </div>  
         <div>  
           <div class="toggle-button-container toggle-button-single-selection">  
             <div>  
               <smart-toggle-button class="material"><i class="material-icons">format_bold</i></smart-toggle-button>  
               <smart-toggle-button class="material" checked><i class="material-icons">format_italic</i></smart-toggle-button>  
               <smart-toggle-button class="material"><i class="material-icons">format_underlined</i></smart-toggle-button>  
               <smart-toggle-button class="material"><i class="material-icons">format_color_fill</i><i class="material-icons">arrow_drop_down</i></smart-toggle-button>  
             </div>  
           </div>  
           <p>One option is selected</p>  
         </div>  
       </div>  
     </section>  
     <section id="toggle-button-icons">  
       <div class="module">  
         <h2>Icon toggles</h2>  
         <br />  
         <p>Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.</p>  
         <p>They are best located in app bars, toolbars, action buttons or toggles. </p>  
         <p>Icon toggles may display bounded or unbounded ink surface reaction ripples beyond their touch-target bounds.</p>  
       </div>  
       <div class="module">  
         <div class="toggle-button-icons-container">  
           <h3>Toggles</h3>  
           <table>  
             <tbody>  
               <tr>  
                 <td colspan="1" rowspan="1">  
                   <p>normal </p>  
                 </td>  
                 <td colspan="1" rowspan="1">  
                   <p>hover</p>  
                 </td>  
                 <td colspan="1" rowspan="1">  
                   <p>focused</p>  
                 </td>  
                 <td colspan="1" rowspan="1">  
                   <p>pressed</p>  
                 </td>  
                 <td colspan="1" rowspan="1">  
                   <p>inactive</p>  
                 </td>  
               </tr>  
               <tr>  
                 <td colspan="1" rowspan="1">  
                   <smart-toggle-button class="material normal"><i class="material-icons">wifi</i></smart-toggle-button>  
                 </td>  
                 <td colspan="1" rowspan="1">  
                   <smart-toggle-button class="material hover"><i class="material-icons">wifi</i></smart-toggle-button>  
                 </td>  
                 <td colspan="1" rowspan="1">  
                   <smart-toggle-button class="material focused"><i class="material-icons">wifi</i></smart-toggle-button>  
                 </td>  
                 <td colspan="1" rowspan="1">  
                   <smart-toggle-button class="material pressed"><i class="material-icons">wifi</i></smart-toggle-button>  
                 </td>  
                 <td colspan="1" rowspan="1">  
                   <smart-toggle-button class="material" disabled><i class="material-icons">wifi</i></smart-toggle-button>  
                 </td>  
               </tr>  
               <tr>  
                 <td colspan="1" rowspan="1">  
                   <smart-toggle-button class="material normal"><i class="material-icons">wifi</i></smart-toggle-button>  
                 </td>  
                 <td colspan="1" rowspan="1">  
                   <smart-toggle-button class="material hover"><i class="material-icons">wifi</i></smart-toggle-button>  
                 </td>  
                 <td colspan="1" rowspan="1">  
                   <smart-toggle-button class="material focused"><i class="material-icons">wifi</i></smart-toggle-button>  
                 </td>  
                 <td colspan="1" rowspan="1">  
                   <smart-toggle-button class="material pressed"><i class="material-icons">wifi</i></smart-toggle-button>  
                 </td>  
                 <td colspan="1" rowspan="1">  
                   <smart-toggle-button class="material" disabled><i class="material-icons">wifi</i></smart-toggle-button>  
                 </td>  
               </tr>  
             </tbody>  
           </table>  
         </div>  
         <p>Icon toggles in normal, hover, focused, pressed, and inactive states</p>  
       </div>  
       <div class="module">  
       </div>  
       <div class="module">  
         <div class="toggle-button-icons-themes">  
           <div>  
             <p>Light icon</p>  
             <smart-toggle-button class="material" checked><i class="material-icons">favorite</i></smart-toggle-button>  
             <p>30% white</p>  
           </div>  
           <div>  
             <p>Dark icon</p>  
             <smart-toggle-button class="material" checked><i class="material-icons">favorite</i></smart-toggle-button>  
             <p>12% black</p>  
           </div>  
           <div>  
             <p>Color icon</p>  
             <smart-toggle-button class="material" checked><i class="material-icons">favorite</i></smart-toggle-button>  
             <p>26% color</p>  
           </div>  
           <div>  
             <p>Dark Theme</p>  
             <smart-toggle-button class="material" checked><i class="material-icons">favorite</i></smart-toggle-button>  
             <p>20% white</p>  
           </div>  
           <div>  
             <p>Dark Theme</p>  
             <smart-toggle-button class="material" checked><i class="material-icons">favorite</i></smart-toggle-button>  
             <p>26% color</p>  
           </div>  
         </div>  
         <p>The icon toggle focus indicator color and opacity are related to the color of the icon.</p>  
       </div>  
     </section>