77 lines
1.8 KiB
Vue
77 lines
1.8 KiB
Vue
<template>
|
|
|
|
<div class="container-fluid nested-radio">
|
|
<div class="row mb-1">
|
|
<div class="col">
|
|
<listCard
|
|
groupName="listcard1"
|
|
isWide="true"
|
|
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
|
|
buttonLabel="Green Tint, Blue Shade"
|
|
buttonID="radio1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-1">
|
|
<div class="col">
|
|
<p class="mb-0 fw-bold">Ok, select the features</p>
|
|
<buttonQuestion
|
|
buttonType="radio"
|
|
groupName="Demo Group"
|
|
buttonID="button1"
|
|
isRequired
|
|
value="test button"
|
|
screenReaderOnlyText="rain sensor, solar, 3rd visor band"
|
|
:answers="demoArray"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-2">
|
|
<div class="col">
|
|
<listCard
|
|
groupName="listcard1"
|
|
isWide="true"
|
|
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
|
|
buttonLabel="Green Tint"
|
|
buttonID="radio2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import buttonQuestion from "@/common-components/button-question/button-question";
|
|
import listCard from "@/ux-components/list-card/list-card";
|
|
import radio from "@/ux-components/radio/radio";
|
|
|
|
export default {
|
|
name: "nestedRadio",
|
|
components: {
|
|
buttonQuestion,
|
|
radio,
|
|
listCard,
|
|
},
|
|
data() {
|
|
return {
|
|
demoArray: [
|
|
"rain sensor, solar, 3rd visor band",
|
|
"rain sensor, heated glass, solar, 3rd visor band",
|
|
]
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.nested-radio {
|
|
.ui-radio {
|
|
flex-direction: column;
|
|
margin: .25rem 0;
|
|
}
|
|
p {
|
|
font-size: .875rem;
|
|
}
|
|
}
|
|
</style>
|