89 lines
2.2 KiB
Vue
89 lines
2.2 KiB
Vue
<template>
|
|
|
|
<div class="container-fluid nested-radio">
|
|
<div class="row mb-1 demo-animate"><!-- demo-animate for demo only -->
|
|
<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 show-hide"><!-- show-hide for demo only -->
|
|
<div class="col">
|
|
<p class="mb-0 fw-bold">Ok, select the features</p>
|
|
<radio ref="radio"
|
|
groupName="group1"
|
|
buttonLabel="rain sensor, solar, 3rd visor band"
|
|
buttonID="button1"
|
|
isRequired
|
|
value="test button"
|
|
screenReaderOnlyText="rain sensor, solar, 3rd visor band"
|
|
/>
|
|
<radio ref="radio"
|
|
groupName="group1"
|
|
buttonLabel="rain sensor, heated glass, solar, 3rd visor band"
|
|
buttonID="button2"
|
|
isRequired
|
|
value="test button"
|
|
screenReaderOnlyText="rain sensor, heated glass, solar, 3rd visor band"
|
|
/>
|
|
</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 listCard from "@/ux-components/list-card/list-card";
|
|
import radio from "@/ux-components/radio/radio";
|
|
|
|
export default {
|
|
name: "nestedRadio",
|
|
components: {
|
|
radio,
|
|
listCard,
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.nested-radio {
|
|
padding: 20px; // For demo only
|
|
.ui-radio {
|
|
margin: .25rem 0;
|
|
}
|
|
p {
|
|
font-size: .875rem;
|
|
}
|
|
// For demo only
|
|
.show-hide {
|
|
max-height: 0;
|
|
transition: max-height 0.35s ease-out;
|
|
overflow: hidden;
|
|
}
|
|
.demo-animate {
|
|
&:hover {
|
|
+ .show-hide {
|
|
max-height: 100px;
|
|
transition: max-height 0.35s ease-in;
|
|
}
|
|
}
|
|
}
|
|
// END for demo only
|
|
}
|
|
</style>
|