I wish to do the exact same job yet with 2 lignes and also when I clic on the switch the 2nd line takes all the table room, I do not recognize why it does not function
this code is functioning, yet with 2s columns,
<< design template>>.
<< div course=" container">
<> < div course=" table">
<> < div: course=" {'column1-expanded': increased}" course=" column column1">>.
<< div course=" product">> colonne 1<.
<.
<< switch course=" toggle-button" @click=" toggleColumns">>+< < div course=" column column2">>.
<< div course=" product">> colonne 2<.
<.
<.
<.
<.
<< manuscript>>.
export default {
information() {
return {
increased: incorrect.
};
},.
approaches: {
toggleColumns() {
this.expanded =! this.expanded;
}
}
};
<.
<< design>>
. container {
display screen: flex;
justify-content: facility;
align-items: facility;
elevation: 100vh;/ * Hauteur de l'écran */.
size: 100vw;
boundary: strong 2px red;
}
. table {
size: 80vw;
elevation: 80vh;
display screen: flex;
justify-content: facility;.
align-items: facility;.
flex-direction: row;.
boundary: strong 2px red;.
}
. product {
flex-grow: 1;.
display screen: flex;.
justify-content: facility;.
elevation: 35vh;.
background-color: lightgray;.
}
. column {
flex: 1;.
cushioning: 10px;.
boundary: 1px strong #ccc;.
}
. column1 {
background-color: lightblue;.
change: flex 0.3 s;.
}
. column1-expanded {
flex: 0;.
size: 0;.
cushioning: 0;.
overflow: concealed;.
change: flex 0.3 s, size 0.3 s, cushioning 0.3 s;.
}
. column2 {
background-color: lightgreen;.
}
. toggle-button {
background-color: #aea 9a1;.
shade: white;.
boundary: none;.
cushioning: 0px 0px;.
arrow: tip;.
}
<.
