Romain/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add CheckBoxField

Browse Source
This commit is contained in:
Romulus21
2020-05-09 10:23:26 +02:00
parent 765d99e48b
commit 6ee6de5dfd
5 changed files with 92 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
resources/js/views/CssTesteur.vue
View File

@@ -33,7 +33,28 @@
<label class="mb-1">Test label</label>
<input type="text" placeholder="Test placeholder" class="mb-1">
<input type="number" class="mb-1">
<input type="checkbox" class="mb-1">
<div>
<input type="checkbox" class="mb-1">
<label>Check me !</label>
</div>
<div>
<label class="custom-label flex">
<div class="bg-white shadow w-6 h-6 p-1 flex justify-center items-center mr-2">
<input type="checkbox" class="hidden" checked>
<div class="hidden check rounded-sm w-4 h-4 bg-gray-700 pointer-events-none"></div>
</div>
<span class="select-none"> This is a sample checkbox. All the text will toggle the state</span>
</label>
</div>
<div>
<label class="custom-label flex">
<div class="bg-white shadow w-6 h-6 p-1 flex justify-center items-center mr-2">
<input type="checkbox" class="hidden" checked>
<svg class="hidden w-4 h-4 text-green-600 pointer-events-none" viewBox="0 0 172 172"><g fill="none" stroke-width="none" stroke-miterlimit="10" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode:normal"><path d="M0 172V0h172v172z"/><path d="M145.433 37.933L64.5 118.8658 33.7337 88.0996l-10.134 10.1341L64.5 139.1341l91.067-91.067z" fill="currentColor" stroke-width="1"/></g></svg>
</div>
<span class="select-none"> This is a sample checkbox. All the text will toggle the state</span>
</label>
</div>
<select class="mb-1">
<option>test 1</option>
<option>test 2</option>
@@ -50,3 +71,13 @@ export default {
name: 'CssTesteur'
}
</script>
<style>
.custom-label input:checked + .check {
display: block !important;
}
.custom-label input:checked + svg {
display: block !important;
}
</style>