github.com/kyleu/dbaudit@v0.0.2-0.20240321155047-ff2f2c940496/views/vsandbox/Testbed.html (about) 1 {% import ( 2 "github.com/kyleu/dbaudit/app" 3 "github.com/kyleu/dbaudit/app/controller/cutil" 4 "github.com/kyleu/dbaudit/views/components" 5 "github.com/kyleu/dbaudit/views/layout" 6 ) %} 7 8 {% code type Testbed struct { layout.Basic } %} 9 10 {% func (p *Testbed) Body(as *app.State, ps *cutil.PageState) %} 11 {%= tabs(as, ps) %} 12 {%= accordion(as, ps) %} 13 {%= modal(as, ps) %} 14 {%= icons(as, ps) %} 15 {% endfunc %} 16 17 {%- func icons(as *app.State, ps *cutil.PageState) -%} 18 <div class="card"> 19 <h3>SVG Icons</h3> 20 {%= components.IconGallery(as, ps) %} 21 </div> 22 {%- endfunc -%} 23 24 {%- func tabs(as *app.State, ps *cutil.PageState) -%} 25 <div class="card"> 26 <h3>Tabs</h3> 27 <div class="tabs"> 28 {%- for _, o := range []string{"Alpha", "Beta", "Gamma", "Delta", "Epsilon"} -%} 29 <input name="type" type="radio" id="tab-{%s o %}" class="input"/> 30 <label for="tab-{%s o %}" class="label">{%s o %}</label> 31 <div class="panel"><p>This is a tab named {%s o %}</p></div> 32 {%- endfor -%} 33 </div> 34 </div> 35 {%- endfunc -%} 36 37 {%- func accordion(as *app.State, ps *cutil.PageState) -%} 38 <div class="card"> 39 <h3>Accordion</h3> 40 <ul class="accordion"> 41 <li> 42 <input id="accordion-a" type="checkbox" hidden="hidden" /> 43 <label for="accordion-a">{%= components.ExpandCollapse(3, ps) %} Option A</label> 44 <div class="bd"><div><div> 45 Option A! 46 </div></div></div> 47 </li> 48 <li> 49 <input id="accordion-c" type="checkbox" hidden="hidden" /> 50 <label for="accordion-c">{%= components.ExpandCollapse(3, ps) %} Option B (no animation)</label> 51 <div class="bd-no-animation"> 52 Option B! 53 </div> 54 </li> 55 </ul> 56 </div> 57 {%- endfunc -%} 58 59 {%- func modal(as *app.State, ps *cutil.PageState) -%} 60 <div class="card"> 61 <h3>Modal</h3> 62 <div class="mt"><a href="#modal-x"><button>Open modal</button></a></div> 63 </div> 64 <div id="modal-x" class="modal" style="display: none;"> 65 <a class="backdrop" href="#"></a> 66 <div class="modal-content"> 67 <div class="modal-header"> 68 <a href="#" class="modal-close">×</a> 69 <h2>Modal</h2> 70 </div> 71 <div class="modal-body"> 72 Here's a modal body! 73 </div> 74 </div> 75 </div> 76 {%- endfunc -%}