1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<!-- $PF_GENERATE_ONCE$ -->
{% import (
  "{{{ .Package }}}/app"
  "{{{ .Package }}}/app/controller/cutil"
  "{{{ .Package }}}/views/components"
  "{{{ .Package }}}/views/layout"
) %}

{% code type Testbed struct { layout.Basic } %}

{% func (p *Testbed) Body(as *app.State, ps *cutil.PageState) %}
{%= icons(as, ps) %}
{%= tabs(as, ps) %}
{%= accordion(as, ps) %}
{%= modal(as, ps) %}
{% endfunc %}

{%- func icons(as *app.State, ps *cutil.PageState) -%}
  <div class="card">
    <h3>SVG Icons</h3>
    {%= components.IconGallery(as, ps) %}
  </div>
{%- endfunc -%}

{%- func tabs(as *app.State, ps *cutil.PageState) -%}
  <div class="card">
    <h3>Tabs</h3>
    <div class="tabs">
      {%- for _, o := range []string{"Alpha", "Beta", "Gamma", "Delta", "Epsilon"} -%}
      <input name="type" type="radio" id="tab-{%s o %}" class="input"/>
      <label for="tab-{%s o %}" class="label">{%s o %}</label>
      <div class="panel"><p>This is a tab named {%s o %}</p></div>
      {%- endfor -%}
    </div>
  </div>
{%- endfunc -%}

{%- func accordion(as *app.State, ps *cutil.PageState) -%}
  <div class="card">
    <h3>Accordion</h3>
    <ul class="accordion">
      <li>
        <input id="accordion-a" type="checkbox" hidden />
        <label for="accordion-a">{%= components.ExpandCollapse(3, ps) %} Option A</label>
        <div class="bd"><div><div>
          Option A!
        </div></div></div>
      </li>
      <li>
        <input id="accordion-c" type="checkbox" hidden />
        <label for="accordion-c">{%= components.ExpandCollapse(3, ps) %} Option B (no animation)</label>
        <div class="bd-no-animation">
          Option B!
        </div>
      </li>
    </ul>
  </div>
{%- endfunc -%}

{%- func modal(as *app.State, ps *cutil.PageState) -%}
  <div class="card">
    <h3>Modal</h3>
    <div class="mt"><a href="#modal-x"><button>Open modal</button></a></div>
  </div>
  <div id="modal-x" class="modal" style="display: none;">
    <a class="backdrop" href="#"></a>
    <div class="modal-content">
      <div class="modal-header">
        <a href="#" class="modal-close">×</a>
        <h2>Modal</h2>
      </div>
      <div class="modal-body">
        Here's a modal body!
      </div>
    </div>
  </div>
{%- endfunc -%}