You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
5.5 KiB
Plaintext
105 lines
5.5 KiB
Plaintext
<div>
|
|
<layout:Container>
|
|
<h1>Input</h1>
|
|
<p>Clickable components support the <view:CodeInline>EventClick</view:CodeInline> event that handlers can be registered to with <view:CodeInline>@Click="c.handleButton(event)"</view:CodeInline></p>
|
|
<view:Code>
|
|
<pre vg-content='"func (c *PageInput) handleButton(event input.ClickEvent) {\n" +
|
|
" c.button1Counter++\n" +
|
|
"}"' style="margin: 0;"></pre>
|
|
</view:Code>
|
|
<p>Data binding...</p>
|
|
|
|
<h2>Button</h2>
|
|
<p>Simple example with click handler:</p>
|
|
<view:Code>
|
|
<pre vg-content='"<input:Button @Click=\"c.button1Counter++\"><div vg-content=\"fmt.Sprintf(`Button pressed %d times`, c.button1Counter)\"></div></input:Button>"' style="margin: 0;"></pre>
|
|
</view:Code>
|
|
<input:Button @Click="c.button1Counter++"><div vg-content='fmt.Sprintf("Button pressed %d times", c.button1Counter)'></div></input:Button>
|
|
<p>Symbols can be attached to buttons:</p>
|
|
<view:Code>
|
|
<pre vg-content='"<input:Button>\n" +
|
|
" <vg-slot name=\"IconSlot\"><icons:LDocument></icons:LDocument></vg-slot>\n" +
|
|
" <vg-slot name=\"DefaultSlot\"><div>Some text</div></vg-slot>\n" +
|
|
"</input:Button>"' style="margin: 0;"></pre>
|
|
</view:Code>
|
|
<input:Button>
|
|
<vg-slot name="IconSlot"><icons:LDocument></icons:LDocument></vg-slot>
|
|
<vg-slot name="DefaultSlot"><div>Some text</div></vg-slot>
|
|
</input:Button>
|
|
<p>Use the <view:CodeInline>d3c-button-vertical</view:CodeInline> CSS class to align the button content vertically:</p>
|
|
<view:Code>
|
|
<pre vg-content='"<input:Button class=\"d3c-button-vertical\">\n" +
|
|
" <vg-slot name=\"IconSlot\"><icons:LGlobe style=\"font-size: 2em;\"></icons:LGlobe></vg-slot>\n" +
|
|
" <vg-slot name=\"DefaultSlot\"><div>Something</div></vg-slot>\n" +
|
|
"</input:Button>"' style="margin: 0;"></pre>
|
|
</view:Code>
|
|
<input:Button class="d3c-button-vertical">
|
|
<vg-slot name="IconSlot"><icons:LGlobe style="font-size: 2em;"></icons:LGlobe></vg-slot>
|
|
<vg-slot name="DefaultSlot">Something</vg-slot>
|
|
</input:Button>
|
|
<p>Buttons can be bound to boolean variables, in this case they will function as a toggle:</p>
|
|
<view:Code>
|
|
<pre vg-content='"<input:Button :Bind=\"&c.button4Bool\">Toggle me!</input:Button>"' style="margin: 0;"></pre>
|
|
</view:Code>
|
|
<input:Button :Bind="&c.button4Bool">Toggle me!</input:Button>
|
|
<span vg-content="fmt.Sprintf(`Boolean is set to %v.`, c.button4Bool)"></span>
|
|
|
|
<h2>Input fields</h2>
|
|
<p>Input fields can be bound to data. They will automatically change their type based on the bound data type.</p>
|
|
<p>To make labels work correctly, you have to use the <view:CodeInline>ID="some-id"</view:CodeInline> tag (uppercase ID), which will set the ID of the embedded input element!</p>
|
|
<view:Code>
|
|
<pre vg-content='"<label for=\"page-input-1\">Some input field</label>\n" +
|
|
"<input:Field ID=\"page-input-1\" :Bind=\"input.FieldBindAny{&c.inputField1String}\"></input:Field>"' style="margin: 0;"></pre>
|
|
</view:Code>
|
|
<label for="page-input-1">Some input field bound to string value</label>
|
|
<input:Field ID="page-input-1" :Bind="input.FieldBindAny{&c.inputField1String}"></input:Field>
|
|
<span vg-content='fmt.Sprintf("Current value is %q.", c.inputField1String)'></span>
|
|
<br>
|
|
<label for="page-input-2">Some input field bound to integer value</label>
|
|
<input:Field ID="page-input-2" :Bind="input.FieldBindAny{&c.inputField2Int}"></input:Field>
|
|
<span vg-content='fmt.Sprintf("Current value is %v.", c.inputField2Int)'></span>
|
|
<br>
|
|
<label for="page-input-3">Some input field bound to float value</label>
|
|
<input:Field ID="page-input-3" :Bind="input.FieldBindAny{&c.inputField3Float}"></input:Field>
|
|
<span vg-content='fmt.Sprintf("Current value is %v.", c.inputField3Float)'></span>
|
|
<p>For passwords you have to use the <view:CodeInline>input.FieldBindPassword</view:CodeInline> binder:</p>
|
|
<label for="page-input-4">Some input field bound to password string</label>
|
|
<input:Field ID="page-input-4" :Bind="input.FieldBindPassword{&c.inputField4String}"></input:Field>
|
|
<span vg-content='fmt.Sprintf("Secret password is %q.", c.inputField4String)'></span>
|
|
<p>You can add additional buttons to the input field:</p>
|
|
<label for="page-input-5">Some input field with some extra button</label>
|
|
<input:Field ID="page-input-5" :Bind="input.FieldBindAny{&c.inputField5String}">
|
|
<input:Button :Bind="&c.inputField5Bool">
|
|
<icons:LLockOpened vg-if="!c.inputField5Bool" class="d3c-button-borderless"></icons:LLockOpened>
|
|
<icons:LLockClosed vg-if="c.inputField5Bool" class="d3c-button-borderless"></icons:LLockClosed>
|
|
</input:Button>
|
|
<input:Button>
|
|
<icons:LGlobe></icons:LGlobe>
|
|
</input:Button>
|
|
</input:Field>
|
|
|
|
<h2>Drop-down</h2>
|
|
<label for="page-dropdown-1">Select a slice entry</label>
|
|
<input:Dropdown id="page-dropdown-1" :Bind="input.FieldBindAny{Value: &c.dropdown1Index}" :BindList="input.ListBindGenericSlice[string]{Slice: &c.dropdown1Slice}"></input:Dropdown>
|
|
<span vg-content='fmt.Sprintf("The selected index is %d.", c.dropdown1Index)'></span>
|
|
|
|
<h2>Tags</h2>
|
|
<p>Select or change the list of tags</p>
|
|
<input:Tags :Bind="input.ListBindGenericSlice[string]{Slice: &c.tags1Slice}" id="page-tags-1"></input:Tags>
|
|
|
|
</layout:Container>
|
|
</div>
|
|
|
|
<style>
|
|
</style>
|
|
|
|
<script type="application/x-go">
|
|
import (
|
|
"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
|
|
"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
|
|
//"git.d3nexus.de/Dadido3/D3vugu-components/components/navigation"
|
|
"git.d3nexus.de/Dadido3/D3vugu-components/components/view"
|
|
"git.d3nexus.de/Dadido3/D3vugu-components/icons"
|
|
)
|
|
</script>
|