Skip to content

Commit 909a654

Browse files
gvreddy04gvreddy04
committed
RCL - Shared components updated
1 parent b98adb1 commit 909a654

File tree

10 files changed

+257
-114
lines changed

10 files changed

+257
-114
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/AccordionDocumentation.razor‎

Lines changed: 97 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,119 @@
1-
@page "/accordion"
1+
@attribute [Route(pageUrl)]
22

3-
<PageTitle>@title</PageTitle>
3+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
44

5-
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6-
7-
<h1>Blazor Accordion</h1>
8-
<div class="lead mb-3">
9-
Build vertically collapsing accordions in combination with our Collapse component.
10-
</div>
5+
<PageHero Heading="@pageTitle">
6+
<LeadSection>@pageDescription</LeadSection>
7+
</PageHero>
118

129
<CarbonAds />
1310

14-
<SectionHeading Size="HeadingSize.H2" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
15-
<div class="mb-3">
16-
The <code>Accordion</code> component uses the <code>Collapse</code> component internally to make it collapsible.
17-
</div>
11+
<Section Class="p-0" Size="HeadingSize.H2" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
12+
<div class="mb-3">
13+
The <code>Accordion</code> component uses the <code>Collapse</code> component internally to make it collapsible.
14+
</div>
15+
</Section>
1816

1917
<Callout Color="CalloutColor.Info">
2018
The animation effect of this component is dependent on the <code>prefers-reduced-motion</code> media query. <br />
2119
See the <a href="https://getbootstrap.com/docs/5.3/getting-started/accessibility/#reduced-motion" target="_blank">reduced motion section of our accessibility documentation</a>.
2220
</Callout>
2321

24-
<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
25-
<div class="mb-3">
26-
Click the accordions below to expand/collapse the accordion content.
27-
</div>
28-
<Demo Type="typeof(Accordion_Demo_01_Examples)" Tabs="false" />
22+
<Section Class="p-0" Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" Link="examples">
23+
<div class="mb-3">
24+
Click the accordions below to expand/collapse the accordion content.
25+
</div>
26+
<Demo Type="typeof(Accordion_Demo_01_Examples)" Tabs="false" />
27+
</Section>
2928

30-
<SectionHeading Size="HeadingSize.H2" Text="Title with Icon" PageUrl="@pageUrl" HashTagName="title-with-icon" />
31-
<div class="mb-3">
32-
To customize the accordion title, use <code>TitleTemplate</code>, as shown in the below example.
33-
</div>
34-
<Demo Type="typeof(Accordion_Demo_02_Title_with_Icon)" Tabs="false" />
29+
<Section Class="p-0" Size="HeadingSize.H2" Name="Title with Icon" PageUrl="@pageUrl" Link="title-with-icon">
30+
<div class="mb-3">
31+
To customize the accordion title, use <code>TitleTemplate</code>, as shown in the below example.
32+
</div>
33+
<Demo Type="typeof(Accordion_Demo_02_Title_with_Icon)" Tabs="false" />
34+
</Section>
3535

36-
<SectionHeading Size="HeadingSize.H2" Text="Flush" PageUrl="@pageUrl" HashTagName="flush" />
37-
<div class="mb-3">
38-
Set the <code>Flush</code> parameter to <code>true</code> to remove borders and rounded corners to render accordions edge-to-edge with their parent container.
39-
</div>
40-
<Demo Type="typeof(Accordion_Demo_03_Flush)" Tabs="true" />
36+
<Section Size="HeadingSize.H2" Name="Flush" PageUrl="@pageUrl" Link="flush">
37+
<div class="mb-3">
38+
Set the <code>Flush</code> parameter to <code>true</code> to remove borders and rounded corners to render accordions edge-to-edge with their parent container.
39+
</div>
40+
<Demo Type="typeof(Accordion_Demo_03_Flush)" Tabs="true" />
41+
</Section>
4142

42-
<SectionHeading Size="HeadingSize.H2" Text="Set default active accordion item" PageUrl="@pageUrl" HashTagName="set-default-active-accordion-item" />
43-
<div class="mb-3">
44-
Set the <code>Active</code> parameter to <code>true</code> to keep the accordion item open by default.
45-
</div>
46-
<Demo Type="typeof(Accordion_Demo_04_Set_Default_Active)" Tabs="true" />
43+
<Section Size="HeadingSize.H2" Name="Set default active accordion item" PageUrl="@pageUrl" Link="set-default-active-accordion-item">
44+
<div class="mb-3">
45+
Set the <code>Active</code> parameter to <code>true</code> to keep the accordion item open by default.
46+
</div>
47+
<Demo Type="typeof(Accordion_Demo_04_Set_Default_Active)" Tabs="true" />
48+
</Section>
4749

48-
<SectionHeading Size="HeadingSize.H2" Text="Always open" PageUrl="@pageUrl" HashTagName="always-open" />
49-
<div class="mb-3">
50-
Set the <code>AlwaysOpen</code> parameter to <code>true</code> to keep accordion items open when another item is opened.
51-
</div>
52-
<Demo Type="typeof(Accordion_Demo_05_Always_Open)" Tabs="true" />
50+
<Section Size="HeadingSize.H2" Name="Always open" PageUrl="@pageUrl" Link="always-open">
51+
<div class="mb-3">
52+
Set the <code>AlwaysOpen</code> parameter to <code>true</code> to keep accordion items open when another item is opened.
53+
</div>
54+
<Demo Type="typeof(Accordion_Demo_05_Always_Open)" Tabs="true" />
55+
</Section>
5356

54-
<SectionHeading Size="HeadingSize.H2" Text="Show / hide individual accordion items" PageUrl="@pageUrl" HashTagName="show-hide-individual-accordion-items" />
55-
<div class="mb-3">
56-
You can show and hide individual accordion items in several ways.
57-
<ul>
58-
<li>To show an accordion item, use predefined methods <code>ShowFirstAccordionItemAsync</code>, <code>ShowLastAccordionItemAsync</code>, <code>ShowAccordionItemByNameAsync</code>, and <code>ShowAccordionItemByIndexAsync</code>.</li>
59-
<li>To hide an accordion item, use predefined methods <code>HideFirstAccordionItemAsync</code>, <code>HideLastAccordionItemAsync</code>, <code>HideAccordionItemByNameAsync</code>, and <code>HideAccordionItemByIndexAsync</code>.</li>
60-
</ul>
61-
</div>
62-
<Demo Type="typeof(Accordion_Demo_06_Show_Hide_Individual_AccordionItems)" Tabs="true" />
57+
<Section Size="HeadingSize.H2" Name="Show / hide individual accordion items" PageUrl="@pageUrl" Link="show-hide-individual-accordion-items">
58+
<div class="mb-3">
59+
You can show and hide individual accordion items in several ways.
60+
<ul>
61+
<li>To show an accordion item, use predefined methods <code>ShowFirstAccordionItemAsync</code>, <code>ShowLastAccordionItemAsync</code>, <code>ShowAccordionItemByNameAsync</code>, and <code>ShowAccordionItemByIndexAsync</code>.</li>
62+
<li>To hide an accordion item, use predefined methods <code>HideFirstAccordionItemAsync</code>, <code>HideLastAccordionItemAsync</code>, <code>HideAccordionItemByNameAsync</code>, and <code>HideAccordionItemByIndexAsync</code>.</li>
63+
</ul>
64+
</div>
65+
<Demo Type="typeof(Accordion_Demo_06_Show_Hide_Individual_AccordionItems)" Tabs="true" />
66+
</Section>
6367

64-
<SectionHeading Size="HeadingSize.H2" Text="Show / hide all accordion items" PageUrl="@pageUrl" HashTagName="show-hide-all-accordion-items" />
65-
<div class="mb-3">
66-
When the <code>AlwaysOpen</code> parameter is set to <code>true</code>, you can show all accordion items simultaneously using the <code>ShowAllAccordionItemsAsync</code> method.
68+
<Section Size="HeadingSize.H2" Name="Show / hide all accordion items" PageUrl="@pageUrl" Link="show-hide-all-accordion-items">
69+
<div class="mb-3">
70+
When the <code>AlwaysOpen</code> parameter is set to <code>true</code>, you can show all accordion items simultaneously using the <code>ShowAllAccordionItemsAsync</code> method.
6771
The <code>HideAllAccordionItemsAsync</code> method will hide all accordion items, regardless of the value of <code>AlwaysOpen</code>.
68-
</div>
69-
<Demo Type="typeof(Accordion_Demo_07_Show_Hide_All_AccordionItems)" Tabs="true" />
72+
</div>
73+
<Demo Type="typeof(Accordion_Demo_07_Show_Hide_All_AccordionItems)" Tabs="true" />
74+
</Section>
7075

71-
<SectionHeading Size="HeadingSize.H2" Text="Events" PageUrl="@pageUrl" HashTagName="events" />
72-
<div class="mb-3">
73-
Blazor Bootstrap Accordion component exposes a few events for hooking into accordion functionality.
74-
<table class="table">
75-
<thead>
76-
<tr>
77-
<th scope="col">Event Name</th>
78-
<th scope="col">Description</th>
79-
</tr>
80-
</thead>
81-
<tbody class="table-group-divider">
82-
<tr>
83-
<th scope="row"><code>OnHiding</code></th>
84-
<td>This event is fired immediately when the <code>hide</code> method has been called.</td>
85-
</tr>
86-
<tr>
87-
<th scope="row"><code>OnHidden</code></th>
88-
<td>This event is fired when a accordion item has been hidden from the user (will wait for CSS transitions to complete).</td>
89-
</tr>
90-
<tr>
91-
<th scope="row"><code>OnShowing</code></th>
92-
<td>This event fires immediately when the <code>show</code> method is called.</td>
93-
</tr>
94-
<tr>
95-
<th scope="row"><code>OnShown</code></th>
96-
<td>This event is fired when a accordion item has been made visible to the user (will wait for CSS transitions to complete).</td>
97-
</tr>
98-
</tbody>
99-
</table>
100-
<Callout Type="CalloutColor.Info">
101-
If no accordion item is active, then the <code>OnHiding</code> and <code>OnHidden</code> events will not be fired.
102-
</Callout>
103-
</div>
104-
<Demo Type="typeof(Accordion_Demo_08_Events)" Tabs="true" />
76+
<Section Size="HeadingSize.H2" Name="Events" PageUrl="@pageUrl" Link="events">
77+
<div class="mb-3">
78+
Blazor Bootstrap Accordion component exposes a few events for hooking into accordion functionality.
79+
<table class="table">
80+
<thead>
81+
<tr>
82+
<th scope="col">Event Name</th>
83+
<th scope="col">Description</th>
84+
</tr>
85+
</thead>
86+
<tbody class="table-group-divider">
87+
<tr>
88+
<th scope="row"><code>OnHiding</code></th>
89+
<td>This event is fired immediately when the <code>hide</code> method has been called.</td>
90+
</tr>
91+
<tr>
92+
<th scope="row"><code>OnHidden</code></th>
93+
<td>This event is fired when a accordion item has been hidden from the user (will wait for CSS transitions to complete).</td>
94+
</tr>
95+
<tr>
96+
<th scope="row"><code>OnShowing</code></th>
97+
<td>This event fires immediately when the <code>show</code> method is called.</td>
98+
</tr>
99+
<tr>
100+
<th scope="row"><code>OnShown</code></th>
101+
<td>This event is fired when a accordion item has been made visible to the user (will wait for CSS transitions to complete).</td>
102+
</tr>
103+
</tbody>
104+
</table>
105+
<Callout Type="CalloutColor.Info">
106+
If no accordion item is active, then the <code>OnHiding</code> and <code>OnHidden</code> events will not be fired.
107+
</Callout>
108+
</div>
109+
<Demo Type="typeof(Accordion_Demo_08_Events)" Tabs="true" />
110+
</Section>
105111

106112
@code {
107-
private string pageUrl = "/accordion";
108-
private string title = "Blazor Accordion Component";
109-
private string description = "Build vertically collapsing accordions in combination with our Collapse component.";
110-
private string imageUrl = "https://i.imgur.com/g4zpMXp.png";
113+
private const string pageUrl = "/accordion";
114+
private const string pageTitle = "Blazor Accordion";
115+
private const string pageDescription = "Build vertically collapsing accordions in combination with our Collapse component.";
116+
private const string metaTitle = "Blazor Accordion Component";
117+
private const string metaDescription = "Build vertically collapsing accordions in combination with our Collapse component.";
118+
private const string imageUrl = "https://i.imgur.com/g4zpMXp.png";
111119
}

‎BlazorBootstrap.Demo.RCL/Components/Shared/PageHero.razor‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@namespace BlazorBootstrap.Demo.RCL
2+
@inherits BlazorBootstrapComponentBase
3+
4+
<h1>@Heading</h1>
5+
<div class="lead mb-3">
6+
@LeadSection
7+
</div>

‎BlazorBootstrap.Demo.RCL/Components/Shared/PageHero.razor.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace BlazorBootstrap.Demo.RCL;
2+
3+
public partial class PageHero : BlazorBootstrapComponentBase
4+
{
5+
[Parameter]
6+
public string? Heading { get; set; }
7+
8+
[Parameter]
9+
public RenderFragment? LeadSection { get; set; }
10+
}

BlazorBootstrap.Demo.RCL/Components/Shared/MetaTags.razor renamed to BlazorBootstrap.Demo.RCL/Components/Shared/PageMetaTags.razor

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
@namespace BlazorBootstrap.Demo.RCL
2+
@inherits BlazorBootstrapComponentBase
3+
4+
<PageTitle>@title</PageTitle>
25

36
<HeadContent>
47
<meta name="description" content="@Description">

BlazorBootstrap.Demo.RCL/Components/Shared/MetaTags.razor.cs renamed to BlazorBootstrap.Demo.RCL/Components/Shared/PageMetaTags.razor.cs

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,39 @@
11
namespace BlazorBootstrap.Demo.RCL;
22

3-
public partial class MetaTags : ComponentBase
3+
public partial class PageMetaTags : BlazorBootstrapComponentBase
44
{
5-
#region Members
6-
7-
private string siteName => "Blazor Bootstrap";
8-
9-
private string title => $"{Title} | {siteName}";
10-
11-
private string url => $"https://demos.blazorbootstrap.com{PageUrl}";
12-
13-
#endregion
14-
15-
#region Methods
16-
17-
#endregion
18-
19-
#region Properties
5+
#region Properties, Indexers
206

217
/// <summary>
22-
/// Meta Url.
23-
/// Example: /alerts, /modal
8+
/// Meta Description.
249
/// </summary>
25-
[Parameter] public string PageUrl { get; set; } = null!;
10+
[Parameter]
11+
public string Description { get; set; } = null!;
2612

2713
/// <summary>
28-
/// Page Title / Meta Title.
14+
/// Meta Image Url.
2915
/// </summary>
30-
[Parameter] public string Title { get; set; } = null!;
16+
[Parameter]
17+
public string ImageUrl { get; set; } = null!;
3118

3219
/// <summary>
33-
/// Meta Description.
20+
/// Meta Url.
21+
/// Example: /alerts, /modal
3422
/// </summary>
35-
[Parameter] public string Description { get; set; } = null!;
23+
[Parameter]
24+
public string PageUrl { get; set; } = null!;
25+
26+
private string siteName => "Blazor Bootstrap";
27+
28+
private string title => $"{Title} | {siteName}";
3629

3730
/// <summary>
38-
/// Meta Image Url.
31+
/// Page Title / Meta Title.
3932
/// </summary>
40-
[Parameter] public string ImageUrl { get; set; } = null!;
33+
[Parameter]
34+
public string Title { get; set; } = null!;
35+
36+
private string url => $"https://demos.blazorbootstrap.com{PageUrl}";
4137

4238
#endregion
4339
}

‎BlazorBootstrap.Demo.RCL/Components/Shared/Section.razor‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@namespace BlazorBootstrap.Demo.RCL
2+
@inherits BlazorBootstrapComponentBase
3+
4+
<section @ref="@Element"
5+
id="@Id"
6+
class="@ClassNames"
7+
style="@StyleNames"
8+
@attributes="@AdditionalAttributes">
9+
10+
@if (Size == HeadingSize.H2)
11+
{
12+
<h2 id="@Link!.ToLower()" class="@headerClassNames">
13+
<span class="anchor-name">@Name</span>
14+
<a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
15+
</h2>
16+
}
17+
else if (Size == HeadingSize.H3)
18+
{
19+
<h3 id="@Link!.ToLower()" class="@headerClassNames">
20+
<span class="anchor-name">@Name</span>
21+
<a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
22+
</h3>
23+
}
24+
else if (Size == HeadingSize.H4)
25+
{
26+
<h4 id="@Link!.ToLower()" class="@headerClassNames">
27+
<span class="anchor-name">@Name</span>
28+
<a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
29+
</h4>
30+
}
31+
else if (Size == HeadingSize.H5)
32+
{
33+
<h5 id="@Link!.ToLower()" class="@headerClassNames">
34+
<span class="anchor-name">@Name</span>
35+
<a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
36+
</h5>
37+
}
38+
else if (Size == HeadingSize.H6)
39+
{
40+
<h6 id="@Link!.ToLower()" class="@headerClassNames">
41+
<span class="anchor-name">@Name</span>
42+
<a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
43+
</h6>
44+
}
45+
46+
@ChildContent
47+
48+
</section>

0 commit comments

Comments
 (0)