You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.7 KiB
114 lines
3.7 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Tiny Components | Select</title>
|
|
<link rel="icon" href="data:,">
|
|
<link href="/css/styles.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header class="header">
|
|
<div class="bar">
|
|
<div class="bar__start">
|
|
<h1 class="m-top-4 m-bottom-4 h4">
|
|
@tiny-components/select
|
|
</h1>
|
|
</div>
|
|
<div class="bar__main justify-end">
|
|
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://git.node001.net/tiny-components/select" rel="noopener" target="_blank">
|
|
Gitea
|
|
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-gitea"></use>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container m-top-6">
|
|
<div class="grid">
|
|
<div class="col-12 col-md-6">
|
|
<form>
|
|
<div class="field-group">
|
|
<label class="field-label">
|
|
Locations
|
|
<tiny-field-select name="location"></tiny-field-select>
|
|
</label>
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label">
|
|
Locations (Multiple)
|
|
<tiny-field-select multiple name="location"></tiny-field-select>
|
|
</label>
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label">
|
|
Locations (Multiple + Filter)
|
|
<tiny-field-select-api multiple searchable name="location"></tiny-field-select-api>
|
|
</label>
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label">
|
|
Locations (Multiple + Default)
|
|
<tiny-field-select-default multiple name="location"></tiny-field-select-default>
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script defer src="/js/example.js"></script>
|
|
<script defer>
|
|
window.addEventListener('DOMContentLoaded', (event) => {
|
|
riot.mount('tiny-field-select', {
|
|
options: [{
|
|
'label' : 'A',
|
|
'value' : 'a'
|
|
},{
|
|
'label' : 'B',
|
|
'value' : 'b'
|
|
},{
|
|
'label' : 'C',
|
|
'value' : 'c'
|
|
},{
|
|
'label' : 'D',
|
|
'value' : 'd'
|
|
},{
|
|
'label' : 'E',
|
|
'value' : 'e'
|
|
},{
|
|
'label' : 'F',
|
|
'value' : 'f'
|
|
},{
|
|
'label' : 'G',
|
|
'value' : 'g'
|
|
},{
|
|
'label' : 'H',
|
|
'value' : 'h'
|
|
},{
|
|
'label' : 'I',
|
|
'value' : 'i'
|
|
},{
|
|
'label' : 'J',
|
|
'value' : 'j'
|
|
}]
|
|
})
|
|
|
|
riot.mount('tiny-field-select-api', {
|
|
store: LocationStore
|
|
})
|
|
|
|
riot.mount('tiny-field-select-default', {
|
|
store: LocationDefaultStore,
|
|
querySelected: [ 'f', 'd' ]
|
|
})
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|