templates/mobile_webpages/test/components.html

   1 [% USE P %]
   2
   3 <h1>Material Components Tests</h1>
   4
   5
   6 <h2>Buttons</h2>
   7
   8 [% P.M.button_tag("", "button") %]
   9 [% P.M.button_tag("", P.M.icon('add'), floating=1) %]
  10 [% P.M.submit_tag("", "submit") %]
  11 [% P.M.submit_tag("", "disabled submit", disabled=1) %]
  12 [% P.M.button_tag("", "button with left icon", icon="cloud", icon_left=1) %]
  13 [% P.M.button_tag("", "button with right icon", icon="save", icon_right=1) %]
  14 [% P.M.button_tag("", "flat button", flat=1) %]
  15 [% P.M.button_tag("", "large button", large=1) %]
  16 [% P.M.button_tag("", "small button", small=1) %]
  17 [% P.M.button_tag("", "disabled small button", disabled=1, small=1) %]
  18
  19 <h2>Icons</h2>
  20
  21 [% P.M.icon("alarm") %]
  22 [% P.M.icon("alarm", large=1) %]
  23 [% P.M.icon("alarm", medium=1) %]
  24 [% P.M.icon("alarm", small=1) %]
  25 [% P.M.icon("alarm", tiny=1) %]
  26
  27 <h2>Inputs</h2>
  28
  29
  30 [% P.M.input_tag("", "", label="test input without anything") %]
  31 [% P.M.input_tag("", "default value", label="test input with default value") %]
  32 [% P.M.input_tag("", "", placeholder="with placeholder", label="test input with placeholder") %]
  33 [% P.M.input_tag("", "default value", placeholder="with placeholder", label="test input with placeholder and default value") %]
  34
  35 <h3>With grid:</h3>
  36 <div class="row">
  37 [% P.M.input_tag("", "", label="2 cols", class="col s6") %]
  38 [% P.M.input_tag("", "", label="2 cols", class="col s6") %]
  39 [% P.M.input_tag("i1", "", placeholder="2 cols placeholder", icon="phone", class="col s6") %]
  40 [% P.M.input_tag("i2", "", label="2 cols label", icon="account_circle", class="col s6") %]
  41 </div>
  42
  43 <h2>Date Picker</h2>
  44
  45 <div class="row">
  46 [% P.M.date_tag("d1", "", label="date of birth", class="col s6", icon="date_range") %]
  47 [% P.M.date_tag("d1", "", class="col s6", placeholder="date of birth?", icon="access_time") %]
  48 </div>