Skip to content

Commit 69fb83f

Browse files
gvreddy04gvreddy04
committed
Block component - demos updated
1 parent d8c8cf0 commit 69fb83f

3 files changed

Lines changed: 31 additions & 7 deletions

File tree

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@
1212
<DocsLink Href="@RouteConstants.Docs_Block_Documentation" />
1313

1414
<Section Class="p-0" Size="HeadingSize.H3" Name="Example" PageUrl="@pageUrl" Link="example">
15+
<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.
19+
</Block>
1520
<Demo Type="typeof(Block_Demo_01_How_it_works)" Tabs="true" />
1621
</Section>
1722

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Icons/GoogleFontIcons/GoogleFontIconDocumentation.razor‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,38 @@
1616
</Section>
1717

1818
<Section Class="p-0" Size="HeadingSize.H3" Name="Icon text" PageUrl="@pageUrl" Link="icon-text">
19+
<div class="mb-3">
20+
You can show the icon with text by wrapping the text in a <code>GoogleFontIcon</code> component.
21+
In the example below, the icon is shown with text on the right.
22+
</div>
1923
<Demo Type="typeof(GoogleFontIcon_Demo_02_Icon_Text)" Tabs="true" />
2024
</Section>
2125

2226
<Section Class="p-0" Size="HeadingSize.H3" Name="Colors" PageUrl="@pageUrl" Link="colors">
27+
<div class="mb-3">
28+
Use <code>Color</code> parameter to set the color of the icon.
29+
In the example below, the icon is shown with different colors.
30+
</div>
2331
<Demo Type="typeof(GoogleFontIcon_Demo_03_Icon_Colors_A)" Tabs="true" />
32+
<div class="mb-3">
33+
When icon with text is used, aldong with <code>Color</code> parameter,
34+
set <code>ApplyColorToText</code> to <code>true</code> to apply the color to the text as well.
35+
</div>
2436
<Demo Type="typeof(GoogleFontIcon_Demo_03_Icon_Colors_B_Text_Color)" Tabs="true" />
2537
</Section>
2638

2739
<Section Class="p-0" Size="HeadingSize.H3" Name="Sizes" PageUrl="@pageUrl" Link="sizes">
40+
<div class="mb-3">
41+
Use <code>Size</code> parameter to set the size of the icon.
42+
In the example below, the icon is shown with different sizes.
43+
</div>
2844
<Demo Type="typeof(GoogleFontIcon_Demo_04_Icon_Sizes)" Tabs="true" />
2945
</Section>
3046

3147
<Section Class="p-0" Size="HeadingSize.H3" Name="All icons" PageUrl="@pageUrl" Link="all-icons">
48+
<div class="mb-3">
49+
In the example below, all icons are shown with their names.
50+
</div>
3251
<Demo Type="typeof(GoogleFontIcon_Demo_99_All_Icons)" Tabs="true" />
3352
</Section>
3453

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Icons/GoogleFontIcons/GoogleFontIcon_Demo_04_Icon_Sizes.razor‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,31 @@
88
<tbody>
99
<tr>
1010
<td><code>GoogleFontIconSize.None</code></td>
11-
<td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.None" IconContainerCssClass="@BulmaCssClass.Margin3" /></td>
11+
<td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.None" /></td>
1212
</tr>
1313
<tr>
1414
<td><code>GoogleFontIconSize.XSmall</code></td>
15-
<td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.XSmall" IconContainerCssClass="@BulmaCssClass.Margin3" /></td>
15+
<td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.XSmall" /></td>
1616
</tr>
1717
<tr>
1818
<td><code>GoogleFontIconSize.Small</code></td>
19-
<td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.Small" IconContainerCssClass="@BulmaCssClass.Margin3" /></td>
19+
<td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.Small" /></td>
2020
</tr>
2121
<tr>
2222
<td><code>GoogleFontIconSize.Medium</code></td>
23-
<td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.Medium" IconContainerCssClass="@BulmaCssClass.Margin3" /></td>
23+
<td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.Medium" /></td>
2424
</tr>
2525
<tr>
2626
<td><code>GoogleFontIconSize.Large</code></td>
27-
<td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.Large" IconContainerCssClass="@BulmaCssClass.Margin3" /></td>
27+
<td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.Large" /></td>
2828
</tr>
2929
<tr>
3030
<td><code>GoogleFontIconSize.XLarge</code></td>
31-
<td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.XLarge" IconContainerCssClass="@BulmaCssClass.Margin3" /></td>
31+
<td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.XLarge" /></td>
3232
</tr>
3333
<tr>
3434
<td><code>GoogleFontIconSize.XXLarge</code></td>
35-
<td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.XXLarge" IconContainerCssClass="@BulmaCssClass.Margin3" /></td>
35+
<td><GoogleFontIcon Name="GoogleFontIconName.Search" Color="GoogleFontIconColor.Primary" Size="GoogleFontIconSize.XXLarge" /></td>
3636
</tr>
3737
</tbody>
3838
</table>

0 commit comments

Comments
 (0)