Skip to content

Commit 3728175

Browse files
gvreddy04gvreddy04
authored
documentation updates (#56)
Documentation updates for various UI components in the BlazorExpress.Bulma repository. Key changes include: - Renaming section titles from "Example" to "How it works" for clarity. - Adding detailed usage instructions, step-by-step guides, and demo references to component documentation (such as Block, Box, Breadcrumb, Button, ConfirmDialog, DeleteButton, DateInput, EnumInput, OTPInput, TextInput, Grid, Hero, BootstrapIcon, GoogleFontIcon, Image, GoogleMap, Message, Modal, Navbar, Notification, Pagination, ProgressBar, Skeletons, Tabs, and Tag). - Enhancing explanations for parameters, features, events, and customization options. - Improving layout, organization, and spacing of documentation. - Refactoring and correcting minor typos. - Updating and expanding demos, including dynamic and tabbed content. - Renaming parameters for clarity (e.g., `ShowDeleteButton` → `HideCloseButton`). - Removing redundant or placeholder content and streamlining instructions. Overall, the update greatly improves the clarity, completeness, and usability of the component documentation for developers.
1 parent d278db3 commit 3728175

38 files changed

Lines changed: 2468 additions & 326 deletions

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Block/BlockDocumentation.razor‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,19 @@
1111

1212
<DocsLink Href="@DemoRouteConstants.Docs_Block_Documentation" />
1313

14-
<Section Class="p-0" Size="HeadingSize.H3" Name="Example" PageUrl="@pageUrl" Link="example">
14+
<Section Class="p-0" Size="HeadingSize.H3" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
1515
<Block>
16-
In this example, we will use the <code>Block</code> component to create a consistent margin between sibling HTML elements.
17-
As you can see, the first two blocks have a margin bottom applied, but the last block does not.
18-
This is because the <code>Block</code> component applies a space on all the blocks, excpt the last one.
16+
The <strong>Block</strong> component is a simple layout utility that provides vertical spacing between sibling elements. It helps organize content by visually separating sections or groups of content with consistent margins.
17+
<br /><br />
18+
<strong>How to use:</strong>
19+
<div class="content mb-2">
20+
<ol>
21+
<li>Wrap your content inside the <code>&lt;Block&gt;</code> component to create a visually separated section.</li>
22+
<li>Place multiple <code>Block</code> components as siblings to automatically add spacing between them.</li>
23+
<li>Each <code>Block</code> will apply margin at the bottom, except for the last one, ensuring clean separation without extra space at the end.</li>
24+
</ol>
25+
</div>
26+
This demo illustrates how to use the <code>Block</code> component to structure your page with clear, consistent spacing between content sections.
1927
</Block>
2028
<Demo Type="typeof(Block_Demo_01_How_it_works)" Tabs="true" />
2129
</Section>

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Box/BoxDocumentation.razor‎

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,46 @@
1111

1212
<DocsLink Href="@DemoRouteConstants.Docs_Box_Documentation" />
1313

14-
<Section Class="p-0" Size="HeadingSize.H3" Name="Example" PageUrl="@pageUrl" Link="example">
14+
<Section Class="p-0" Size="HeadingSize.H3" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
15+
<Block>
16+
The <strong>Box</strong> component provides a simple, clean container with a white background, padding, and a subtle box shadow. It is ideal for grouping content, forms, or media in a visually distinct section.
17+
<br /><br />
18+
<strong>How to use:</strong>
19+
<div class="content mb-2">
20+
<ol>
21+
<li>Wrap your content inside the <code>&lt;Box&gt;</code> component to give it a styled container.</li>
22+
<li>You can place any valid markup inside <code>&lt;Box&gt;</code>, such as text, forms, or custom layouts.</li>
23+
<li>Use multiple <code>&lt;Box&gt;</code> components on a page to organize different sections or highlight important information.</li>
24+
</ol>
25+
</div>
26+
The following demo shows a basic usage of the <code>Box</code> component with simple text content.
27+
</Block>
1528
<Demo Class="mb-3" Type="typeof(Box_Demo_01_How_it_works_A)" Tabs="true" />
16-
<div class="mb-3">
17-
Box component acts as a container.
18-
You can easily include other components, like <b>form elements</b>:
19-
</div>
29+
<Block>
30+
The <strong>Box</strong> component can be used to neatly group interactive elements, such as forms, making them stand out from the rest of the page.
31+
<br /><br />
32+
<strong>How to use:</strong>
33+
<div class="content mb-2">
34+
<ol>
35+
<li>Place your form or input fields inside the <code>&lt;Box&gt;</code> component.</li>
36+
<li>This approach helps visually separate forms from other content, improving clarity and user experience.</li>
37+
</ol>
38+
</div>
39+
The demo below illustrates how to use the <code>Box</code> component to contain a sign-in form.
40+
</Block>
2041
<Demo Class="mb-3" Type="typeof(Box_Demo_01_How_it_works_B)" Tabs="true" />
21-
<div class="mb-3">
22-
Or a <code>media</code> object:
23-
</div>
42+
<Block>
43+
The <strong>Box</strong> component is also suitable for wrapping more complex layouts, such as media objects or card-like content, providing a consistent and attractive appearance.
44+
<br /><br />
45+
<strong>How to use:</strong>
46+
<div class="content mb-2">
47+
<ol>
48+
<li>Embed any layout, such as media, images, or interactive elements, inside the <code>&lt;Box&gt;</code> component.</li>
49+
<li>This ensures your content is visually grouped and stands out from the background.</li>
50+
</ol>
51+
</div>
52+
The following demo demonstrates the <code>Box</code> component containing a media object with an image and actions.
53+
</Block>
2454
<Demo Type="typeof(Box_Demo_01_How_it_works_C)" Tabs="true" />
2555
</Section>
2656

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Breadcrumb/BreadcrumbDocumentation.razor‎

Lines changed: 122 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -11,87 +11,140 @@
1111

1212
<DocsLink Href="@DemoRouteConstants.Docs_Breadcrumb_Documentation" />
1313

14-
<Section Class="p-0" Size="HeadingSize.H3" Name="Example" PageUrl="@pageUrl" Link="example">
15-
<div class="mb-3">
16-
The <b>Breadcrumb</b> component is a simple spacer tool. It allows sibling HTML elements to have a consistent margin between them.
17-
</div>
18-
<Demo Type="typeof(Breadcrumb_Demo_01_How_it_works)" Tabs="false" />
14+
<Section Class="p-0" Size="HeadingSize.H3" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
15+
<Block>
16+
The <strong>Breadcrumb</strong> component displays a navigation trail, helping users understand their current location within the application hierarchy and easily navigate back to previous sections.
17+
<br /><br />
18+
<strong>How to use:</strong>
19+
<div class="content mb-2">
20+
<ol>
21+
<li>Add the <code>Breadcrumb</code> component to your page.</li>
22+
<li>Define each navigation step using <code>BreadcrumbItem</code> components, setting the <code>Href</code> for navigation and <code>IsActive="true"</code> for the current page.</li>
23+
<li>Customize the breadcrumb by adding, removing, or reordering <code>BreadcrumbItem</code> elements as needed.</li>
24+
</ol>
25+
</div>
26+
This demo shows a basic breadcrumb setup with four navigation steps, highlighting the current page.
27+
</Block>
28+
<Demo Type="typeof(Breadcrumb_Demo_01_How_it_works)" Tabs="true" />
1929
</Section>
2030

2131
<Section Class="p-0" Size="HeadingSize.H3" Name="Alignment" PageUrl="@pageUrl" Link="alignment">
22-
<div class="mb-3">
23-
By default, the <code>Breadcrumb</code> component aligns its children to the left.
24-
For alternate alignment use the <code>Alignment</code> parameter. The <b>Alignment</b> parameter accepts the following values: <b>Default</b>, <b>Center</b>, and <b>Right</b>.
25-
</div>
26-
<Demo Type="typeof(Breadcrumb_Demo_02_Alignment_A_Default)" Tabs="false" />
27-
<div class="mb-3">
28-
In the following examples, the <code>Breadcrumb</code> component is aligned to the center.
29-
For this to work, the <code>Alignment</code> parameter must be set to <b>Center</b>.
30-
</div>
31-
<Demo Type="typeof(Breadcrumb_Demo_02_Alignment_B_Center)" Tabs="false" />
32-
<div class="mb-3">
33-
In the following examples, the <code>Breadcrumb</code> component is aligned to the right.
34-
For this to work, the <code>Alignment</code> parameter must be set to <b>Right</b>.
35-
</div>
36-
<Demo Type="typeof(Breadcrumb_Demo_02_Alignment_C_Right)" Tabs="false" />
32+
<Block>
33+
The <strong>Breadcrumb</strong> component supports alignment options to fit your layout needs.
34+
<br /><br />
35+
<strong>How to use:</strong>
36+
<div class="content mb-2">
37+
<ol>
38+
<li>Use the <code>Alignment</code> parameter to control breadcrumb alignment.</li>
39+
<li>Omit the parameter for default (left) alignment.</li>
40+
</ol>
41+
</div>
42+
The following demo shows the default (left-aligned) breadcrumb.
43+
</Block>
44+
<Demo Type="typeof(Breadcrumb_Demo_02_Alignment_A_Default)" Tabs="true" />
45+
<Block>
46+
To center the breadcrumb, set <code>Alignment="BreadcrumbAlignment.Center"</code>.
47+
<br /><br />
48+
<strong>How to use:</strong>
49+
<div class="content mb-2">
50+
<ol>
51+
<li>Add the <code>Alignment</code> parameter with value <code>BreadcrumbAlignment.Center</code> to the <code>Breadcrumb</code> component.</li>
52+
</ol>
53+
</div>
54+
This demo displays a centered breadcrumb navigation.
55+
</Block>
56+
<Demo Type="typeof(Breadcrumb_Demo_02_Alignment_B_Center)" Tabs="true" />
57+
<Block>
58+
To right-align the breadcrumb, set <code>Alignment="BreadcrumbAlignment.Right"</code>.
59+
<br /><br />
60+
<strong>How to use:</strong>
61+
<div class="content mb-2">
62+
<ol>
63+
<li>Add the <code>Alignment</code> parameter with value <code>BreadcrumbAlignment.Right</code> to the <code>Breadcrumb</code> component.</li>
64+
</ol>
65+
</div>
66+
This demo shows a right-aligned breadcrumb navigation.
67+
</Block>
68+
<Demo Type="typeof(Breadcrumb_Demo_02_Alignment_C_Right)" Tabs="true" />
3769
</Section>
3870

3971
<Section Class="p-0" Size="HeadingSize.H3" Name="Icons" PageUrl="@pageUrl" Link="icons">
40-
<div class="mb-3">
41-
You can add icons to the <code>Breadcrumb</code> component.
42-
Add <code><a href="@DemoRouteConstants.Demos_BootstrapIcons_Documentation">BootstrapIcon</a></code> or <code><a href="@DemoRouteConstants.Demos_GoogleFontIcons_Documentation">GoogleFontIcon</a></code> to the <code>BreadcrumbItem</code> component as a child content.
43-
</div>
44-
<div class="mb-3">
45-
In the following example, Bootstrap icons are used.
46-
</div>
47-
<Demo Type="typeof(Breadcrumb_Demo_03_Icons_A_BootstrapIcons)" Tabs="false" />
48-
<div class="mb-3">
49-
In the following example, Google Font icons are used.
50-
</div>
51-
<Demo Type="typeof(Breadcrumb_Demo_03_Icons_B_GoogleFontIcons)" Tabs="false" />
72+
<Block>
73+
You can enhance breadcrumbs with icons for better visual context.
74+
<br /><br />
75+
<strong>How to use Bootstrap Icons:</strong>
76+
<div class="content mb-2">
77+
<ol>
78+
<li>Wrap the breadcrumb label inside a <code>BootstrapIcon</code> component within each <code>BreadcrumbItem</code>.</li>
79+
<li>Set the <code>Name</code> property to the desired icon.</li>
80+
</ol>
81+
</div>
82+
This demo uses Bootstrap icons for each breadcrumb step.
83+
</Block>
84+
<Demo Type="typeof(Breadcrumb_Demo_03_Icons_A_BootstrapIcons)" Tabs="true" />
85+
<Block>
86+
<strong>How to use Google Font Icons:</strong>
87+
<div class="content mb-2">
88+
<ol>
89+
<li>Wrap the breadcrumb label inside a <code>GoogleFontIcon</code> component within each <code>BreadcrumbItem</code>.</li>
90+
<li>Set the <code>Name</code> property to the desired Google Font icon.</li>
91+
</ol>
92+
</div>
93+
This demo uses Google Font icons for each breadcrumb step.
94+
</Block>
95+
<Demo Type="typeof(Breadcrumb_Demo_03_Icons_B_GoogleFontIcons)" Tabs="true" />
5296
</Section>
5397

5498
<Section Class="p-0" Size="HeadingSize.H3" Name="Alternative seperators" PageUrl="@pageUrl" Link="alternative-seperators">
55-
<div class="mb-3">
56-
You can change the default separator between <code>BreadcrumbItem</code> components.
57-
Use the <code>Separator</code> parameter to change the separator.
58-
The <code>Separator</code> parameter accepts the following values: <b>Arrow</b>, <b>Bullet</b>, <b>Dot</b>, and <b>Succeeds</b>.
59-
</div>
60-
<div class="mb-3">
61-
In the following example, the separator is set to <b>Arrow</b>.
62-
</div>
63-
<Demo Type="typeof(Breadcrumb_Demo_04_Alternative_seperators_A_Arrow)" Tabs="false" />
64-
<div class="mb-3">
65-
In the following example, the separator is set to <b>Bullet</b>.
66-
</div>
67-
<Demo Type="typeof(Breadcrumb_Demo_04_Alternative_seperators_B_Bullet)" Tabs="false" />
68-
<div class="mb-3">
69-
In the following example, the separator is set to <b>Dot</b>.
70-
</div>
71-
<Demo Type="typeof(Breadcrumb_Demo_04_Alternative_seperators_C_Dot)" Tabs="false" />
72-
<div class="mb-3">
73-
In the following example, the separator is set to <b>Succeeds</b>.
74-
</div>
75-
<Demo Type="typeof(Breadcrumb_Demo_04_Alternative_seperators_D_Succeeds)" Tabs="false" />
99+
<Block>
100+
The <strong>Breadcrumb</strong> component supports different separator styles to match your application's design.
101+
<br /><br />
102+
<strong>How to use:</strong>
103+
<div class="content mb-2">
104+
<ol>
105+
<li>Set the <code>Separator</code> parameter on the <code>Breadcrumb</code> component.</li>
106+
<li>Choose from <code>BreadcrumbSeparator.Arrow</code>, <code>Bullet</code>, <code>Dot</code>, or <code>Succeeds</code>.</li>
107+
</ol>
108+
</div>
109+
This demo uses the <code>Arrow</code> separator.
110+
</Block>
111+
<Demo Type="typeof(Breadcrumb_Demo_04_Alternative_seperators_A_Arrow)" Tabs="true" />
112+
<Block>
113+
This demo uses the <code>Bullet</code> separator. Set <code>Separator="BreadcrumbSeparator.Bullet"</code> to apply this style.
114+
</Block>
115+
<Demo Type="typeof(Breadcrumb_Demo_04_Alternative_seperators_B_Bullet)" Tabs="true" />
116+
<Block>
117+
This demo uses the <code>Dot</code> separator. Set <code>Separator="BreadcrumbSeparator.Dot"</code> to apply this style.
118+
</Block>
119+
<Demo Type="typeof(Breadcrumb_Demo_04_Alternative_seperators_C_Dot)" Tabs="true" />
120+
<Block>
121+
This demo uses the <code>Succeds</code> separator. Set <code>Separator="BreadcrumbSeparator.Succeeds"</code> to apply this style.
122+
</Block>
123+
<Demo Type="typeof(Breadcrumb_Demo_04_Alternative_seperators_D_Succeeds)" Tabs="true" />
76124
</Section>
77125

78126
<Section Class="p-0" Size="HeadingSize.H3" Name="Sizes" PageUrl="@pageUrl" Link="sizes">
79-
<div class="mb-3">
80-
The <code>Breadcrumb</code> component has three sizes: <b>Small</b>, <b>Medium</b>, and <b>Large</b>.
81-
Use the <code>Size</code> parameter to change the size.
82-
</div>
83-
<div class="mb-3">
84-
In the following example, the size is set to <b>Small</b>.
85-
</div>
86-
<Demo Type="typeof(Breadcrumb_Demo_05_Sizes_A_Small)" Tabs="false" />
87-
<div class="mb-3">
88-
In the following example, the size is set to <b>Medium</b>.
89-
</div>
90-
<Demo Type="typeof(Breadcrumb_Demo_05_Sizes_B_Medium)" Tabs="false" />
91-
<div class="mb-3">
92-
In the following example, the size is set to <b>Large</b>.
93-
</div>
94-
<Demo Type="typeof(Breadcrumb_Demo_05_Sizes_C_Large)" Tabs="false" />
127+
<Block>
128+
The <strong>Breadcrumb</strong> component can be displayed in different sizes to fit your UI.
129+
<br /><br />
130+
<strong>How to use:</strong>
131+
<div class="content mb-2">
132+
<ol>
133+
<li>Set the <code>Size</code> parameter on the <code>Breadcrumb</code> component.</li>
134+
<li>Choose from <code>BreadcrumbSize.Small</code>, <code>Medium</code>, or <code>Large</code>.</li>
135+
</ol>
136+
</div>
137+
This demo shows a small breadcrumb (<code>Size="BreadcrumbSize.Small"</code>).
138+
</Block>
139+
<Demo Type="typeof(Breadcrumb_Demo_05_Sizes_A_Small)" Tabs="true" />
140+
<Block>
141+
This demo shows a medium breadcrumb (<code>Size="BreadcrumbSize.Medium"</code>).
142+
</Block>
143+
<Demo Type="typeof(Breadcrumb_Demo_05_Sizes_B_Medium)" Tabs="true" />
144+
<Block>
145+
This demo shows a large breadcrumb (<code>Size="BreadcrumbSize.Large"</code>).
146+
</Block>
147+
<Demo Type="typeof(Breadcrumb_Demo_05_Sizes_C_Large)" Tabs="true" />
95148
</Section>
96149

97150
@code {

0 commit comments

Comments
 (0)