47 lines
970 B
Vue
47 lines
970 B
Vue
<template>
|
|
<div class="col-4 mb-3 d-flex radio-card">
|
|
<input
|
|
type="radio"
|
|
class="position-absolute opacity-0"
|
|
:class="className"
|
|
:id="radioID"
|
|
:name="groupName"
|
|
:value="radioLabel"
|
|
v-model="picked"
|
|
:tabindex="tabIndex"
|
|
/>
|
|
<label
|
|
v-bind:for="radioID"
|
|
class="rounded-3 d-flex flex-column align-items-center w-100"
|
|
>
|
|
<img
|
|
class="px-3 pt-3 pb-2 mt-auto"
|
|
v-bind:src="require(`@/assets/img/icons/${radioImage}`)"
|
|
v-bind:alt="altText"
|
|
/>
|
|
<span class="mt-auto mb-2 text-center lh-1">{{ radioLabel }}</span>
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- tabIndex="x" is available on this component if needed -->
|
|
|
|
<script>
|
|
export default {
|
|
name: "radioCard",
|
|
props: [
|
|
"groupName",
|
|
"radioLabel",
|
|
"radioImage",
|
|
"altText",
|
|
"radioID",
|
|
"tabIndex",
|
|
"className",
|
|
],
|
|
data() {
|
|
return {
|
|
picked: "picked",
|
|
};
|
|
},
|
|
};
|
|
</script>
|