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>Radio buttons</h2>
		<view:Code>
			<pre vg-content='"<input:RadioButton id=\"page-radio-button-1-a\" :Bind=\"input.ValueBindAny{&c.radioButton1}\" Key=\"A\"></input:RadioButton>\n" +
							"<label for=\"page-radio-button-1-a\">Option A</label>"' style="margin: 0;"></pre>
		</view:Code>
		<input:RadioButton id="page-radio-button-1-a" :Bind="input.ValueBindAny{&c.radioButton1}" Key="A"></input:RadioButton>
		<label for="page-radio-button-1-a">Option A</label>
		<br>
		<input:RadioButton id="page-radio-button-1-b" :Bind="input.ValueBindAny{&c.radioButton1}" Key="B"></input:RadioButton>
		<label for="page-radio-button-1-b">Option B</label>
		<br>
		<input:RadioButton id="page-radio-button-1-c" :Bind="input.ValueBindAny{&c.radioButton1}" Key="C"></input:RadioButton>
		<label for="page-radio-button-1-c">Option C</label>
		<div vg-content="fmt.Sprintf(`Selected option is %q.`, c.radioButton1)"></div>

		<h2>Checkboxes</h2>
		<view:Code>
			<pre vg-content='"<input:CheckBox id=\"page-checkBox-1\" :Bind=\"&c.checkBox1\"></input:CheckBox>\n" +
							"<label for=\"page-checkBox-1\">Click this to toggle the checkBox</label>"' style="margin: 0;"></pre>
		</view:Code>
		<input:CheckBox id="page-checkBox-1" :Bind="&c.checkBox1"></input:CheckBox>
		<label for="page-checkBox-1">Click this to toggle the checkbox</label>
		<div vg-content="fmt.Sprintf(`Boolean is set to %v.`, c.checkBox1)"></div>
		<input:CheckBox id="page-checkBox-2" :Bind="&c.checkBox2"></input:CheckBox>
		<label for="page-checkBox-2">Click this to toggle the pre-checked checkbox</label>

		<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.ValueBindAny{&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.ValueBindAny{&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.ValueBindAny{&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.ValueBindAny{&c.inputField3Float}"></input:Field>
		<span vg-content='fmt.Sprintf("Current value is %v.", c.inputField3Float)'></span>
		<br>
		<label for="page-input-6">Some input field bound to bool value</label>
		<input:Field ID="page-input-6" :Bind="input.ValueBindAny{&c.inputField6Bool}"></input:Field>
		<span vg-content='fmt.Sprintf("Current state is %v.", c.inputField6Bool)'></span>
		<p>For passwords you have to set the <view:CodeInline>Type="password"</view:CodeInline> field of the component:</p>
		<label for="page-input-4">Some input field bound to password string</label>
		<input:Field ID="page-input-4" :Bind="input.ValueBindAny{&c.inputField4String}" Type="password"></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.ValueBindAny{&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>
		<p>time.Time is also supported:</p>
		<label for="page-input-7">Some input field bound to a time.Time value</label>
		<input:Field ID="page-input-7" :Bind="input.ValueBindAny{&c.inputField7Time}"></input:Field>
		<span vg-content='fmt.Sprintf("Selected date and time is %v.", c.inputField7Time)'></span>

		<h2>Drop-down</h2>
		<label for="page-dropdown-1">Select a slice entry</label>
		<input:Dropdown id="page-dropdown-1" :Bind="input.ValueBindAny{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>

		<h2>Text-area</h2>
		<input:TextArea :Bind="&c.textArea1" id="page-text-area-1" rows="10" style="width:100%; resize:none; box-sizing:border-box;"></input:TextArea>
		<pre vg-content='fmt.Sprintf("Your entered text: %s", c.textArea1)'></pre>

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