Skip to content

Commit 0ce1062

Browse files
majorimimajorimi
authored
Merge pull request #62 from majorimi/dev/collapse
Updated demo App
2 parents 6aa20ed + c42ba7c commit 0ce1062

16 files changed

+748
-207
lines changed

‎azure-pipelines-commit.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ pool:
1818
vmImage: 'ubuntu-latest'
1919

2020
variables:
21-
solution: '**/*.sln'
21+
solution: 'src/Majorsoft.Blazor.Components.sln'
2222
buildPlatform: 'Any CPU'
2323
buildConfiguration: 'Release'
2424

@@ -37,14 +37,14 @@ jobs:
3737
displayName: 'dotnet restore packages'
3838
inputs:
3939
command: 'restore'
40-
projects: 'src/Majorsoft.Blazor.Components.sln'
40+
projects: '$(solution)'
4141
feedsToUse: 'select'
4242

4343
- task: DotNetCoreCLI@2
4444
displayName: 'dotnet build'
4545
inputs:
4646
command: 'build'
47-
projects: 'src/Majorsoft.Blazor.Components.sln'
47+
projects: '$(solution)'
4848

4949
- task: DotNetCoreCLI@2
5050
displayName: 'run tests'

‎demo/Majorsoft.Blazor.Components.DemoApp/Components/Collapse.razor‎

Lines changed: 369 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,369 @@
1+
<h1>Collapse Components</h1>
2+
<p>
3+
Blazor component that renders customizable Collapsible/Expandable panel and Accordion with many but only one active panel also custom content and header. For usege see soruce code and docs on
4+
<a href="https://github.com/majorimi/blazor-components/blob/master/.github/docs/Collapse.md" target="_blank">Github</a>.
5+
<br /><strong>Majorsoft.Blazor.Components.Collapse</strong> package is available on <a href="https://www.nuget.org/packages/Majorsoft.Blazor.Components.Collapse" target="_blank">Nuget</a>
6+
</p>
7+
8+
<div class="container-fluid p-3 mb-3 border rounded">
9+
<PermaLinkElement PermaLinkName="collapsePanel" IconActions="PermaLinkIconActions.Copy|PermaLinkIconActions.Navigate" IconMarginTop="8" IconSize="18">
10+
<Content><h3>CollapsePanel</h3></Content>
11+
</PermaLinkElement>
12+
<p>Renders <strong><code>CollapsePanel</code> component </strong> which is an <strong> Expandable and Collapsible panel</strong> with custumizable header and content.</p>
13+
14+
<div class="row pb-2">
15+
<div class="col-12 col-lg-8 col-xl-5">
16+
Collapsed color (Name, RGB, Hex, HSL): <input class="form-control w-100" @bind="_collapsedColor" />
17+
</div>
18+
</div>
19+
<div class="row pb-2">
20+
<div class="col-12 col-lg-8 col-xl-5">
21+
Expanded color (Name, RGB, Hex, HSL): <input class="form-control w-100" @bind="_expandedColor" />
22+
</div>
23+
</div>
24+
<div class="row pb-2">
25+
<div class="col-12 col-lg-8 col-xl-5">
26+
Hover color (Name, RGB, Hex, HSL): <input class="form-control w-100" @bind="_hoverColor" />
27+
</div>
28+
</div>
29+
<div class="row pb-2">
30+
<div class="col-12 col-lg-8 col-xl-5">
31+
CollapsePanel contet Height (0 is auto): @(_height)px
32+
<input type="range" class="w-100" min="0" max="400" @bind="_height" @oninput="(e => _height = int.Parse(e.Value?.ToString()))" />
33+
</div>
34+
</div>
35+
36+
<div class="row pb-2">
37+
<div class="col-12 col-lg-8 col-xl-5">
38+
CollapsePanel Disabled: <input class="mr-3" type="checkbox" @bind="_isCollapseDisabled" />
39+
Collapsed: <input class="mr-3" type="checkbox" @bind="_isCollapsed" />
40+
<br />
41+
Animate Collapse changes: <input class="mr-3" type="checkbox" @bind="_isAnimated" />
42+
<br />
43+
Show content overflow: <input class="mr-3" type="checkbox" @bind="_showOverflow" />
44+
</div>
45+
</div>
46+
47+
<div class="row mb-3">
48+
<div class="col-12">
49+
<CollapsePanel CollapsedColor="@_collapsedColor"
50+
ExpandedColor="@_expandedColor"
51+
HoverColor="@_hoverColor"
52+
Disabled="@_isCollapseDisabled"
53+
Collapsed="@_isCollapsed"
54+
ContentHeight="@_height"
55+
Animate="@_isAnimated"
56+
ShowContentOverflow="@_showOverflow"
57+
OnCollapseChanged="OnCollapsed">
58+
<CollapsedHeaderContent>
59+
<div class="w-100">
60+
<h5>Expand me</h5>
61+
<span class="fa fa-lg fa-chevron-circle-down" aria-hidden="true"></span>
62+
</div>
63+
</CollapsedHeaderContent>
64+
<ExpandedHeaderContent>
65+
<div class="w-100">
66+
<h5>Collapse me</h5>
67+
<span class="fa fa-lg fa-chevron-circle-up" aria-hidden="true"></span>
68+
</div>
69+
</ExpandedHeaderContent>
70+
<Content>
71+
<div style="border: 1px solid gray; height: 100%;">
72+
<h4>This is the content</h4>
73+
<a href="https://www.flickr.com/photos/135037635@N03/33200850951/in/album-72157655977338469/" target="_blank">
74+
<img src="https://live.staticflickr.com/3884/33200850951_079a7fd7e4_b.jpg" width="200" height="150" />
75+
</a>
76+
</div>
77+
</Content>
78+
</CollapsePanel>
79+
</div>
80+
</div>
81+
82+
<div class="row pb-2">
83+
<div class="col-12">
84+
<label><strong>Collapse Event log</strong>:</label>
85+
<textarea @ref="_log" @bind="_collapseLog" style="height:200px;" class="form-control w-100" readonly></textarea>
86+
</div>
87+
</div>
88+
89+
<hr />
90+
<div class="row mb-3">
91+
<div class="col-12">
92+
<h3>Multiple CollapsePanel items</h3>
93+
<p>
94+
Example usage of multiple independent <code>CollapsePanel</code>s with default settings.
95+
Note: content <code>height: auto</code> prevents some CSS animation to work.
96+
</p>
97+
98+
<CollapsePanel ContentHeight="0" style="margin-bottom: 10px;">
99+
<CollapsedHeaderContent>
100+
<div class="w-100">
101+
<h5>Collapse 1 - Expand me</h5>
102+
<span class="fa fa-lg fa-chevron-circle-down" aria-hidden="true"></span>
103+
</div>
104+
</CollapsedHeaderContent>
105+
<ExpandedHeaderContent>
106+
<div class="w-100">
107+
<h5>Collapse 1 - Collapse me</h5>
108+
<span class="fa fa-lg fa-chevron-circle-up" aria-hidden="true"></span>
109+
</div>
110+
</ExpandedHeaderContent>
111+
<Content>
112+
<div style="border: 1px solid gray; height: 100%;">
113+
<h4>This is the first content</h4>
114+
<a href="https://www.flickr.com/photos/135037635@N03/49503272657/" target="_blank">
115+
<img src="https://live.staticflickr.com/65535/49503272657_f8dd72c868_b.jpg" width="200" height="150" />
116+
</a>
117+
</div>
118+
</Content>
119+
</CollapsePanel>
120+
<CollapsePanel ContentHeight="0" Collapsed="true" style="margin-bottom: 10px;">
121+
<CollapsedHeaderContent>
122+
<div class="w-100">
123+
<h5>Collapse 2 - Expand me</h5>
124+
<span class="fa fa-lg fa-chevron-down" aria-hidden="true"></span>
125+
</div>
126+
</CollapsedHeaderContent>
127+
<ExpandedHeaderContent>
128+
<div class="w-100">
129+
<h5>Collapse 2 - Collapse me</h5>
130+
<span class="fa fa-lg fa-chevron-up" aria-hidden="true"></span>
131+
</div>
132+
</ExpandedHeaderContent>
133+
<Content>
134+
<div style="border: 1px solid gray; height: 100%;">
135+
<h4>This is the second content</h4>
136+
<a href="https://www.flickr.com/photos/135037635@N03/22769636223/in/album-72157655977338469/" target="_blank">
137+
<img src="https://live.staticflickr.com/5650/22769636223_7cd63b9fc4_b.jpg" width="200" height="150" />
138+
</a>
139+
</div>
140+
</Content>
141+
</CollapsePanel>
142+
<CollapsePanel ContentHeight="0" Collapsed="true" style="margin-bottom: 10px;">
143+
<CollapsedHeaderContent>
144+
<div class="w-100">
145+
<h5>Collapse 3 - Expand me</h5>
146+
<span class="fa fa-lg fa-angle-double-down" aria-hidden="true"></span>
147+
</div>
148+
</CollapsedHeaderContent>
149+
<ExpandedHeaderContent>
150+
<div class="w-100">
151+
<h5>Collapse 3 - Collapse me</h5>
152+
<span class="fa fa-lg fa-angle-double-up" aria-hidden="true"></span>
153+
</div>
154+
</ExpandedHeaderContent>
155+
<Content>
156+
<div style="height: 100%;">
157+
<h4>This is the third content</h4>
158+
<a href="https://www.flickr.com/photos/135037635@N03/20446928144/in/album-72157655977338469/" target="_blank">
159+
<img src="https://live.staticflickr.com/622/20446928144_4394d817ba_b.jpg" width="200" height="150" />
160+
</a>
161+
</div>
162+
</Content>
163+
</CollapsePanel>
164+
165+
<CollapsePanel ContentHeight="190" style="margin-bottom: 5px;">
166+
<CommonHeader>
167+
<div class="w-100">
168+
<h5>Common heder will never change...</h5>
169+
</div>
170+
</CommonHeader>
171+
<Content>
172+
<div style="height: 100%;">
173+
<h4>This is the content</h4>
174+
<a href="https://www.flickr.com/photos/135037635@N03/29505484165/in/album-72157655977338469/" target="_blank">
175+
<img src="https://live.staticflickr.com/8544/29505484165_33d919ee42_b.jpg" width="250" height="150" />
176+
</a>
177+
</div>
178+
</Content>
179+
</CollapsePanel>
180+
</div>
181+
</div>
182+
183+
</div>
184+
185+
<div class="container-fluid p-3 mb-3 border rounded">
186+
<PermaLinkElement PermaLinkName="accordion" IconActions="PermaLinkIconActions.Copy|PermaLinkIconActions.Navigate" IconMarginTop="8" IconSize="18">
187+
<Content><h3>Accordion</h3></Content>
188+
</PermaLinkElement>
189+
<p>
190+
Renders <strong> a set of <code>CollapsePanel</code> components </strong> which is an <strong> Expandable and Collapsible panel</strong> with custumizable header and content.
191+
But <code>Accordion</code> allows only one Expanded (active) panel.
192+
</p>
193+
194+
<div class="row pb-2">
195+
<div class="col-12 col-lg-8 col-xl-5">
196+
Collapsed color (Name, RGB, Hex, HSL): <input class="form-control w-100" @bind="_accordionCollapsedColor" />
197+
</div>
198+
</div>
199+
<div class="row pb-2">
200+
<div class="col-12 col-lg-8 col-xl-5">
201+
Expanded color (Name, RGB, Hex, HSL): <input class="form-control w-100" @bind="_accordionExpandedColor" />
202+
</div>
203+
</div>
204+
<div class="row pb-2">
205+
<div class="col-12 col-lg-8 col-xl-5">
206+
Hover color (Name, RGB, Hex, HSL): <input class="form-control w-100" @bind="_accordionHoverColor" />
207+
</div>
208+
</div>
209+
210+
<div class="row pb-2">
211+
<div class="col-12 col-lg-8 col-xl-5">
212+
Number of CollapsePanel: <strong>@_collapseCount</strong>
213+
<br />
214+
Accordion Disabled: <input class="mr-3" type="checkbox" @bind="_isAccordionDisabled" />
215+
</div>
216+
</div>
217+
218+
<Accordion @ref="_accordion" id="ac1"
219+
ActiveCollapsePanel="@_activePanel"
220+
Disabled="@_isAccordionDisabled"
221+
OnCollapsePanelChanged="OnAccordionChanged">
222+
<CollapsePanels>
223+
<CollapsePanel @ref="_panel1" style="margin-bottom: 10px;" CollapsedColor="@_accordionCollapsedColor"
224+
ExpandedColor="@_accordionExpandedColor"
225+
HoverColor="@_accordionHoverColor">
226+
<CollapsedHeaderContent>
227+
<div class="w-100">
228+
<h5>Panel 1 - Expand me</h5>
229+
<span class="fa fa-lg fa-chevron-circle-down" aria-hidden="true"></span>
230+
</div>
231+
</CollapsedHeaderContent>
232+
<ExpandedHeaderContent>
233+
<div class="w-100">
234+
<h5>Single Active panel 1 - Collapse me</h5>
235+
<span class="fa fa-lg fa-chevron-circle-up" aria-hidden="true"></span>
236+
</div>
237+
</ExpandedHeaderContent>
238+
<Content>
239+
<div style="border: 1px solid gray; height: 100%;">
240+
<h4>This is the content</h4>
241+
<a href="https://www.flickr.com/photos/135037635@N03/33802309192/in/album-72157655977338469/" target="_blank">
242+
<img src="https://live.staticflickr.com/2881/33802309192_74f2eb3005_b.jpg" width="200" height="150" />
243+
</a>
244+
</div>
245+
</Content>
246+
</CollapsePanel>
247+
<CollapsePanel @ref="_panel2" style="margin-bottom: 10px;" CollapsedColor="@_accordionCollapsedColor"
248+
ExpandedColor="@_accordionExpandedColor"
249+
HoverColor="@_accordionHoverColor">
250+
<CollapsedHeaderContent>
251+
<div class="w-100">
252+
<h5>Panel 2 - Expand me</h5>
253+
<span class="fa fa-lg fa-chevron-circle-down" aria-hidden="true"></span>
254+
</div>
255+
</CollapsedHeaderContent>
256+
<ExpandedHeaderContent>
257+
<div class="w-100">
258+
<h5>Single Active panel 2 - Collapse me</h5>
259+
<span class="fa fa-lg fa-chevron-circle-up" aria-hidden="true"></span>
260+
</div>
261+
</ExpandedHeaderContent>
262+
<Content>
263+
<div style="border: 1px solid gray; height: 100%;">
264+
<h4>This is the content</h4>
265+
<a href="https://www.flickr.com/photos/135037635@N03/41641664115/in/album-72157655977338469/" target="_blank">
266+
<img src="https://live.staticflickr.com/1730/41641664115_f3d6477b7c_b.jpg" width="200" height="150" />
267+
</a>
268+
</div>
269+
</Content>
270+
</CollapsePanel>
271+
<CollapsePanel @ref="_panel3" style="margin-bottom: 10px;" CollapsedColor="@_accordionCollapsedColor"
272+
ExpandedColor="@_accordionExpandedColor"
273+
HoverColor="@_accordionHoverColor">
274+
<CollapsedHeaderContent>
275+
<div class="w-100">
276+
<h5>Panel 3 - Expand me</h5>
277+
<span class="fa fa-lg fa-chevron-circle-down" aria-hidden="true"></span>
278+
</div>
279+
</CollapsedHeaderContent>
280+
<ExpandedHeaderContent>
281+
<div class="w-100">
282+
<h5>Single Active panel 3 - Collapse me</h5>
283+
<span class="fa fa-lg fa-chevron-circle-up" aria-hidden="true"></span>
284+
</div>
285+
</ExpandedHeaderContent>
286+
<Content>
287+
<div style="border: 1px solid gray; height: 100%;">
288+
<h4>This is the content</h4>
289+
<a href="https://www.flickr.com/photos/135037635@N03/30239309451/in/album-72157655977338469/" target="_blank">
290+
<img src="https://live.staticflickr.com/8273/30239309451_10f9bdfddd_b.jpg" width="200" height="150" />
291+
</a>
292+
</div>
293+
</Content>
294+
</CollapsePanel>
295+
</CollapsePanels>
296+
</Accordion>
297+
298+
<div class="row pb-2">
299+
<div class="col-12">
300+
<label><strong>Accordion Event log</strong>:</label>
301+
<textarea @ref="_logAccordion" @bind="_accordionLog" style="height:200px;" class="form-control w-100" readonly></textarea>
302+
</div>
303+
</div>
304+
</div>
305+
306+
@using System.Linq;
307+
308+
@code {
309+
protected override async Task OnAfterRenderAsync(bool firstRender)
310+
{
311+
if (firstRender)
312+
{
313+
//Accordion
314+
_activePanel = _panel2;
315+
_collapseCount = _accordion.CollapsePanelCount;
316+
StateHasChanged();
317+
}
318+
}
319+
320+
//Collapse
321+
private string _collapsedColor = "DodgerBlue";
322+
private string _expandedColor = "LightBlue";
323+
private string _hoverColor = "LightGray";
324+
private bool _isAnimated = true;
325+
private bool _isCollapseDisabled = false;
326+
private bool _isCollapsed = false;
327+
private bool _showOverflow = false;
328+
private int _height = 200;
329+
330+
private ElementReference _log;
331+
private string _collapseLog;
332+
333+
private async Task OnCollapsed(bool state)
334+
{
335+
_isCollapsed = state;
336+
_collapseLog = WriteLog(_collapseLog, $"Collapse panel state has changed event Collapsed: {state}");
337+
await _log.ScrollToEndAsync();
338+
}
339+
340+
//Accordion
341+
private string _accordionCollapsedColor = "green";
342+
private string _accordionExpandedColor = "lightGreen";
343+
private string _accordionHoverColor = "lime";
344+
private bool _isAccordionDisabled = false;
345+
private int _collapseCount;
346+
347+
private Accordion _accordion;
348+
private CollapsePanel? _activePanel;
349+
private CollapsePanel _panel1;
350+
private CollapsePanel _panel2;
351+
private CollapsePanel _panel3;
352+
353+
private ElementReference _logAccordion;
354+
private string _accordionLog;
355+
356+
private async Task OnAccordionChanged(CollapsePanel? active)
357+
{
358+
_activePanel = active;
359+
var index = _accordion.CollapsePanelItems.ToList().IndexOf(active);
360+
_accordionLog = WriteLog(_accordionLog, $"Accordion state has changed. Active CollapsePanel index: {index}");
361+
await _logAccordion.ScrollToEndAsync();
362+
}
363+
364+
private string WriteLog(string log, string message)
365+
{
366+
log += $"{DateTime.Now.TimeOfDay}: {message}. \r\n";
367+
return log;
368+
}
369+
}

0 commit comments

Comments
 (0)