Skip to content

Commit 00138db

Browse files
xidedixxidedix
committed
refactor(collapses): move cColapse up to separate div
1 parent 359e82f commit 00138db

File tree

1 file changed

+84
-34
lines changed

1 file changed

+84
-34
lines changed

‎src/app/views/base/collapses/collapses.component.html

Lines changed: 84 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,19 @@
1111
<p class="text-medium-emphasis small">You can use a link or a button component.</p>
1212
<app-docs-example href="components/collapse">
1313
<a (click)="toggleCollapse(0)" cButton class="me-1" color="primary">Link</a>
14-
<button (click)="toggleCollapse(0)" cButton class="me-1" color="primary">Button</button>
15-
<c-card [ngClass]="'shadow mt-3'" [visible]="collapses[0]" cCollapse>
16-
<c-card-body>
17-
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
18-
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
19-
anderson cred nesciunt sapiente ea proident.
20-
</c-card-body>
21-
</c-card>
14+
<button (click)="toggleCollapse(0)" cButton class="me-1" color="primary">
15+
Button
16+
</button>
17+
<div [visible]="collapses[0]" cCollapse>
18+
<c-card class="shadow mt-3">
19+
<c-card-body>
20+
Anim pariatur cliche reprehenderit, enim eiusmod high life
21+
accusamus terry richardson ad squid. Nihil anim keffiyeh
22+
helvetica, craft beer labore wes anderson cred nesciunt sapiente
23+
ea proident.
24+
</c-card-body>
25+
</c-card>
26+
</div>
2227
</app-docs-example>
2328
</c-card-body>
2429
</c-card>
@@ -29,15 +34,34 @@
2934
<strong>Angular Collapse</strong> <small>horizontal</small>
3035
</c-card-header>
3136
<c-card-body>
32-
<p class="text-medium-emphasis small">Add the <code>horizontal</code> property to transition the width instead of height and set a width on the immediate child element.</p>
37+
<p class="text-medium-emphasis small">
38+
Add the <code>horizontal</code> property to transition the width
39+
instead of height and set a width on the immediate child element.
40+
</p>
3341
<app-docs-example href="components/collapse">
34-
<button (click)="toggleCollapse(1)" cButton class="me-1 mb-3" color="primary" [attr.aria-expanded]="collapses[1]">Button</button>
35-
<div style="min-height: 130px;">
36-
<c-card [visible]="collapses[1]" cCollapse horizontal class="shadow" style="max-width: 260px;">
37-
<c-card-body style="width: 260px;">
38-
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
39-
</c-card-body>
40-
</c-card>
42+
<button
43+
(click)="toggleCollapse(1)"
44+
cButton
45+
class="me-1 mb-3"
46+
color="primary"
47+
[attr.aria-expanded]="collapses[1]"
48+
>
49+
Button
50+
</button>
51+
<div style="min-height: 130px">
52+
<div
53+
[visible]="collapses[1]"
54+
cCollapse
55+
horizontal
56+
style="max-width: 260px"
57+
>
58+
<c-card class="shadow">
59+
<c-card-body style="width: 260px">
60+
This is some placeholder content for a horizontal collapse.
61+
It's hidden by default and shown when triggered.
62+
</c-card-body>
63+
</c-card>
64+
</div>
4165
</div>
4266
</app-docs-example>
4367
</c-card-body>
@@ -53,28 +77,54 @@
5377
A <code>&lt;c-button&gt;</code> can show and hide multiple elements.
5478
</p>
5579
<app-docs-example href="components/collapse#multiple-targets">
56-
<button (click)="toggleCollapse(2)" cButton class="me-1" color="primary">Toggle first element</button>
57-
<button (click)="toggleCollapse(3)" cButton class="me-1" color="primary">Toggle second element</button>
58-
<button (click)="toggleCollapse(2); toggleCollapse(3);" cButton class="me-1" color="primary">Toggle both
80+
<button
81+
(click)="toggleCollapse(2)"
82+
cButton
83+
class="me-1"
84+
color="primary"
85+
>
86+
Toggle first element
87+
</button>
88+
<button
89+
(click)="toggleCollapse(3)"
90+
cButton
91+
class="me-1"
92+
color="primary"
93+
>
94+
Toggle second element
95+
</button>
96+
<button
97+
(click)="toggleCollapse(2); toggleCollapse(3)"
98+
cButton
99+
class="me-1"
100+
color="primary"
101+
>
102+
Toggle both
59103
</button>
60-
<c-row style="min-height: 130px;">
104+
<c-row style="min-height: 130px">
61105
<c-col xs="6">
62-
<c-card [visible]="collapses[2]" cCollapse class="mt-3">
63-
<c-card-body>
64-
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
65-
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
66-
anderson cred nesciunt sapiente ea proident.
67-
</c-card-body>
68-
</c-card>
106+
<div [visible]="collapses[2]" cCollapse>
107+
<c-card class="mt-3">
108+
<c-card-body>
109+
Anim pariatur cliche reprehenderit, enim eiusmod high life
110+
accusamus terry richardson ad squid. Nihil anim keffiyeh
111+
helvetica, craft beer labore wes anderson cred nesciunt
112+
sapiente ea proident.
113+
</c-card-body>
114+
</c-card>
115+
</div>
69116
</c-col>
70117
<c-col xs="6">
71-
<c-card [visible]="collapses[3]" cCollapse class="mt-3">
72-
<c-card-body>
73-
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
74-
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
75-
anderson cred nesciunt sapiente ea proident.
76-
</c-card-body>
77-
</c-card>
118+
<div [visible]="collapses[3]" cCollapse>
119+
<c-card class="mt-3">
120+
<c-card-body>
121+
Anim pariatur cliche reprehenderit, enim eiusmod high life
122+
accusamus terry richardson ad squid. Nihil anim keffiyeh
123+
helvetica, craft beer labore wes anderson cred nesciunt
124+
sapiente ea proident.
125+
</c-card-body>
126+
</c-card>
127+
</div>
78128
</c-col>
79129
</c-row>
80130
</app-docs-example>

0 commit comments

Comments
 (0)