David Vogel
114a7d893c
- Add input field and general data binding - Rename SymbolSlot to IconSlot - Remove d3c-color-accent - Update icons page - Add input example page - Update button to support highlighting - Update navigation entry to support highlighting - Add d3c-button-only-icon to button and let sidebar use that - Use d3c-button-transparent in sidebar - Add focus indicator to buttons - Rename CSS color variables and change definition of some - Let pagination use input:Button - Add some padding to the inline code component
70 lines
2.4 KiB
Plaintext
70 lines
2.4 KiB
Plaintext
<div>
|
|
<layout:Container>
|
|
<h1>Home</h1>
|
|
<p>Lorem ipsum dolor sit am et</p>
|
|
<view:Code>
|
|
asdfefefeaf afe aef aef aef aef aef<br>
|
|
asdwfaefa efae fae faef ae<br>
|
|
u4iewgooijqoie ioigq oiegq eog qoeg
|
|
</view:Code>
|
|
<h2>Buttons</h2>
|
|
<input:Button>
|
|
<vg-slot name="IconSlot"><icons:LGlobe></icons:LGlobe></vg-slot>
|
|
<vg-slot name="DefaultSlot">Some Button</vg-slot>
|
|
</input:Button>
|
|
<input:Button>
|
|
<vg-slot name="IconSlot"><icons:LGlobe></icons:LGlobe></vg-slot>
|
|
<vg-slot name="DefaultSlot">Some Button</vg-slot>
|
|
</input:Button>
|
|
<input:Button>
|
|
<vg-slot name="IconSlot"><icons:LGlobe></icons:LGlobe></vg-slot>
|
|
<vg-slot name="DefaultSlot">Some Button</vg-slot>
|
|
</input:Button>
|
|
<p>Some <view:CodeInline>inlined code</view:CodeInline> in this line!</p>
|
|
<h2>Tags</h2>
|
|
This is some tag: <view:Tag>Some Tag</view:Tag> and <view:Tag>Another Tag</view:Tag>
|
|
<h2>List Container</h2>
|
|
<layout:ListContainer>
|
|
<layout:LayerContainer vg-for="i := 0; i < 5; i++" class="list-item d3c-color-layer-1">
|
|
<icons:LInfoCircle></icons:LInfoCircle>
|
|
<div vg-content="i"></div>
|
|
<div>Some Content!</div>
|
|
</layout:LayerContainer>
|
|
</layout:ListContainer>
|
|
<h2>Navigation buttons</h2>
|
|
<div style="display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0.5em 0;">
|
|
<input:Button class="d3c-button-vertical" style="margin: 0;">
|
|
<vg-slot name="IconSlot"><icons:LGlobe style="font-size: 2em;"></icons:LGlobe></vg-slot>
|
|
<vg-slot name="DefaultSlot">Navigation 1</vg-slot>
|
|
</input:Button>
|
|
<input:Button class="d3c-button-vertical" style="margin: 0;">
|
|
<vg-slot name="IconSlot"><icons:LGlobe style="font-size: 2em;"></icons:LGlobe></vg-slot>
|
|
<vg-slot name="DefaultSlot">Navigation 2</vg-slot>
|
|
</input:Button>
|
|
<input:Button class="d3c-button-vertical" style="margin: 0;">
|
|
<vg-slot name="IconSlot"><icons:LGlobe style="font-size: 2em;"></icons:LGlobe></vg-slot>
|
|
<vg-slot name="DefaultSlot">Navigation 3</vg-slot>
|
|
</input:Button>
|
|
</div>
|
|
</layout:Container>
|
|
</div>
|
|
|
|
<style>
|
|
.list-item {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1em;
|
|
}
|
|
</style>
|
|
|
|
<script type="application/x-go">
|
|
import (
|
|
"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
|
|
"git.d3nexus.de/Dadido3/D3vugu-components/components/view"
|
|
"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
|
|
"git.d3nexus.de/Dadido3/D3vugu-components/icons"
|
|
)
|
|
|
|
type PageHome struct {}
|
|
</script>
|