0
205
ViewsHow to draw a dotted "L" shapped line, When accordion is open?
import BaseAccordian from "@/components/BaseAccordion";
export default {
components: {
BaseAccordian,
},
data() {
return {
accordions: [
{
title: "Vue",
text: "AllaboutVue",
textwo: "hi",
},
{
title: "Nuxt",
text: "AllaboutNuxt",
textwo: "hi",
},
{
title: "webpack",
text: "Allaboutwebpack",
textwo: "hi",
},
],
};
},
};.green {
color: green;
font-weight: bold;
}
.red {
color: red;
font-weight: bold;
}
.pink {
color: pink;
font-weight: bold;
}<div>
<div
v-for="accordion in accordions"
:key="accordion.title"
:class="{
green: accordion.text === 'AllaboutVue',
red: accordion.textwo === 'hi',
red: accordion.text === 'AllaboutNuxt',
pink: accordion.text === 'Allaboutwebpack',
}"
>
<BaseAccordian>
<template v-slot:title>{{ accordion.title }}</template>
<template v-slot:content>
<div>{{ accordion.text }}</div>
<div>{{ accordion.textwo }}</div>
</template>
</BaseAccordian>
</div>
</div>I have already set the colours for different text, when the accordion is open , Now I need draw dotted lines with content on it. So that it draw dotted line based on content colour.
I am thinking that it is possible with css.
I have already set the colours for different text, when the accordion is open , Now I need draw dotted lines with content on it. So that it draw dotted line based on content colour.
I am thinking that it is possible with css.
·
Juan Pablo Isaza
1 answers
Answer question0
To get layout like:
Just add to your:
<div
v-for="accordion in accordions"
:key="accordion.title"
:class="{
green: accordion.text === 'AllaboutVue',
red: accordion.textwo === 'hi',
red: accordion.text === 'AllaboutNuxt',
pink: accordion.text === 'Allaboutwebpack',
}"
>
class, for example, line:
<div
v-for="accordion in accordions"
:key="accordion.title"
class="line"
:class="{
green: accordion.text === 'AllaboutVue',
red: accordion.textwo === 'hi',
red: accordion.text === 'AllaboutNuxt',
pink: accordion.text === 'Allaboutwebpack',
}"
>
Then add some styles:
.line >>> .content > div {
--line-width: 2px;
--x-offset: 8px;
--x-width: 120px;
position: relative;
padding-bottom: var(--line-width);
}
.line >>> .content > div:before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: var(--x-offset);
width: var(--x-width);
height: 100%;
border-left: var(--line-width) dashed currentColor;
border-bottom: var(--line-width) dashed currentColor;
}
.line >>> .content > div:after {
content: "";
display: block;
position: absolute;
bottom: calc(-1 * var(--line-width) * 1.75);
left: calc(var(--x-offset) + var(--x-width));
width: 0;
height: 0;
border: calc(var(--line-width) * 2.5) solid transparent;
border-right: 0;
border-left: calc(var(--line-width) * 5) solid currentColor;
}
·
Juan Pablo Isaza
Report
Answer question