Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add FullWidth parameter to BitSeparator (#8511) #8542

Merged
merged 3 commits into from
Sep 7, 2024
Merged

Add FullWidth parameter to BitSeparator (#8511) #8542

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6e2c6d7
add FullWidth parameter to BitSeparator #8511
msynk Sep 7, 2024
9769d62
fix demo
msynk Sep 7, 2024
7913baf
fix demo sections id
msynk Sep 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@ public partial class BitSeparator : BitComponentBase
/// </summary>
[Parameter] public RenderFragment? ChildContent { get; set; }

/// <summary>
/// Renders the separator in full width of its container.
/// </summary>
[Parameter, ResetStyleBuilder]
public bool FullWidth { get; set; }

/// <summary>
/// Whether the element is a vertical separator.
/// </summary>
Expand All @@ -34,4 +40,9 @@ protected override void RegisterCssClasses()
_ => "bit-spr-ctr"
});
}

protected override void RegisterCssStyles()
{
StyleBuilder.Register(() => FullWidth ? "width:100%" : string.Empty);
}
}
2 changes: 1 addition & 1 deletion src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@

.bit-spr-cnt {
position: relative;
display: inline-block;
color: $clr-fg-pri;
display: inline-block;
background: $clr-bg-pri;
}

Expand Down
22 changes: 16 additions & 6 deletions ...Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@
<ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
<ExamplePreview>
<div>
<BitLabel>Empty separator</BitLabel>
<div>Empty separator</div>
<BitSeparator />
<br />
<BitLabel>Separator with text</BitLabel>
<div>Separator with text</div>
<BitSeparator>Text</BitSeparator>
<br />
<BitLabel>Separator with icon</BitLabel>
<div>Separator with icon</div>
<BitSeparator><BitIcon IconName="Clock" /></BitSeparator>
</div>
</ExamplePreview>
Expand All @@ -42,7 +42,7 @@
<ExamplePreview>
<div style="height: 28rem">
<div>
<BitLabel>Horizontal separator with text</BitLabel>
<div>Horizontal separator with text</div>
<BitSeparator AlignContent="@BitSeparatorAlignContent.Center">Center</BitSeparator>
<br />
<BitSeparator AlignContent="@BitSeparatorAlignContent.Start">Start</BitSeparator>
Expand All @@ -51,14 +51,24 @@
</div>
<br /><br />
<div style="height: 13rem">
<BitLabel>Vertical separator with text</BitLabel>
<br />
<div>Vertical separator with text</div><br />
<BitSeparator Vertical AlignContent="@BitSeparatorAlignContent.Center">Center</BitSeparator>
<BitSeparator Vertical AlignContent="@BitSeparatorAlignContent.Start">Start</BitSeparator>
<BitSeparator Vertical AlignContent="@BitSeparatorAlignContent.End">End</BitSeparator>
</div>
</div>
</ExamplePreview>
</ComponentExampleBox>
<ComponentExampleBox Title="FullWidth" RazorCode="@example4RazorCode" Id="example4">
<ExamplePreview>
<div>While using inside a flex container with align-items css style:</div>
<br /><br />
<div style="display:flex;flex-direction:column;align-items:center">
<BitSeparator>Normal</BitSeparator>
<br />
<BitSeparator FullWidth>FullWidth</BitSeparator>
</div>
</ExamplePreview>
</ComponentExampleBox>
</ComponentDemo>
</div>
15 changes: 14 additions & 1 deletion ....BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ public partial class BitSeparatorDemo
Type = "BitSeparatorAlignContent",
DefaultValue = "BitSeparatorAlignContent.Center",
Description = "Where the content should be aligned in the separator.",
LinkType = LinkType.Link,
Href = "#separator-align-enum",
LinkType = LinkType.Link
},
new()
{
Expand All @@ -21,6 +21,13 @@ public partial class BitSeparatorDemo
Description = "The content of the Separator, it can be any custom tag or text."
},
new()
{
Name = "FullWidth",
Type = "bool",
DefaultValue = "false",
Description = "Renders the separator in full width of its container."
},
new()
{
Name = "Vertical",
Type = "bool",
Expand Down Expand Up @@ -97,6 +104,12 @@ public partial class BitSeparatorDemo
<BitSeparator Vertical AlignContent=""@BitSeparatorAlignContent.Center"">Center</BitSeparator>
<BitSeparator Vertical AlignContent=""@BitSeparatorAlignContent.Start"">Start</BitSeparator>
<BitSeparator Vertical AlignContent=""@BitSeparatorAlignContent.End"">End</BitSeparator>";

private readonly string example4RazorCode = @"
<div style=""display:flex;flex-direction:column;align-items:center"">
<BitSeparator>Normal</BitSeparator>
<BitSeparator FullWidth>FullWidth</BitSeparator>
</div>";
}


Loading