agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-12-13 14:13:06 +00:00
Code Issues Releases Activity

Test @click event in Vue 3 component demo

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2021-12-22 14:42:20 +02:00
parent 3b6b12288d
commit d498b0e1e9
3 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/vue-demo/src/App.vue
View File

@ -10,12 +10,12 @@
<Checkbox
:checked="true"
text="Checkbox example"
hint="(click to toggle)"
hint="(click icon to toggle)"
/>
<Checkbox
:checked="false"
text="Another checkbox example"
hint="(click to toggle)"
hint="(only clicking icon works to test @click events)"
/>
</div>
</section>

6
packages/vue-demo/src/demo-components/Checkbox.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="checkbox-container">
<a href="# " :class="className" @click="check">
<Icon :icon="icon" />{{ text }}
</a>
<span :class="className">
<Icon :icon="icon" @click="check" />{{ text }}
</span>
<small>{{ hint }}</small>
</div>
</template>

11
packages/vue-demo/src/index.css
View File

@ -68,23 +68,28 @@ p {
}
.checkbox {
cursor: pointer;
/* cursor: pointer; */
/* color: #1769aa; */
color: #626262;
text-decoration: none;
}
.checkbox:hover {
/* .checkbox:hover {
color: #ba3329;
text-decoration: underline;
}
} */
.checkbox svg {
cursor: pointer;
margin-right: 4px;
color: #afafaf;
font-size: 24px;
line-height: 1em;
vertical-align: -0.25em;
}
.checkbox svg:hover {
color: #ba3329;
}
.checkbox--checked svg {
color: #327335;
}