D3vugu-components/page-input.vugu

<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>