49 lines
2 KiB
Vue
49 lines
2 KiB
Vue
<template>
|
|
<!-- See the component-test.vue page for example implementation -->
|
|
<!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
|
|
<!-- Example: -->
|
|
<!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
|
|
<!-- An h3 with id must be included just before the opening radio button group. ***The id must match the aria-labelledby of the parent div.*** -->
|
|
<!-- Example -->
|
|
<!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
|
|
<div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
|
|
<input type="radio" :id="radioID" :name="groupName" :value="radioID">
|
|
<label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent'>
|
|
<span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
|
|
<span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
|
|
<loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
|
|
</label>
|
|
<p class="small">{{errorMessage}}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import loader from "@/ux-components/loader/loader";
|
|
export default {
|
|
name: "radioList",
|
|
props: [
|
|
"groupName", /* Required, unique for each radio button GROUP */
|
|
"radioID", /* Required, unique for each radio button. Used for button id, label and <label for> */
|
|
"radioLabelSubCopy", /* Optional, used for multi-line radio buttons */
|
|
"textPosition", /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
|
|
"errorMessage", /* Optional */
|
|
"loaderColor", /* Optional */
|
|
"loaderPosition", /* Optional */
|
|
"sizeInRem" /* Optional */
|
|
],
|
|
data() {
|
|
return {
|
|
isError: false,
|
|
display: false
|
|
};
|
|
},
|
|
methods: {
|
|
displayComponent() {
|
|
this.display = true;
|
|
},
|
|
},
|
|
components: {
|
|
loader,
|
|
},
|
|
};
|
|
</script>
|