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 Alignment parameter to BitPivot (#8512) #8541

Merged
merged 1 commit into from
Sep 7, 2024
Merged

Add Alignment parameter to BitPivot (#8512) #8541

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
19 changes: 19 additions & 0 deletions src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@ public partial class BitPivot : BitComponentBase



/// <summary>
/// Determines the alignment of the header section of the pivot.
/// </summary>
[Parameter, ResetStyleBuilder]
public BitAlignment? Alignment { get; set; }

/// <summary>
/// The content of pivot, It can be Any custom tag
/// </summary>
Expand Down Expand Up @@ -106,6 +112,19 @@ protected override void RegisterCssClasses()
protected override void RegisterCssStyles()
{
StyleBuilder.Register(() => Styles?.Root);

StyleBuilder.Register(() => Alignment switch
{
BitAlignment.Start => "--bit-pvt-hal:flex-start",
BitAlignment.End => "--bit-pvt-hal:flex-end",
BitAlignment.Center => "--bit-pvt-hal:center",
BitAlignment.SpaceBetween => "--bit-pvt-hal:space-between",
BitAlignment.SpaceAround => "--bit-pvt-hal:space-around",
BitAlignment.SpaceEvenly => "--bit-pvt-hal:space-evenly",
BitAlignment.Baseline => "--bit-pvt-hal:baseline",
BitAlignment.Stretch => "--bit-pvt-hal:stretch",
_ => "--bit-pvt-hal:flex-start"
});
}

protected override async Task OnInitializedAsync()
Expand Down
1 change: 1 addition & 0 deletions src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
.bit-pvt-hct {
display: flex;
white-space: nowrap;
justify-content: var(--bit-pvt-hal);

* {
font-size: spacing(2);
Expand Down
33 changes: 29 additions & 4 deletions .../Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,7 +340,32 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Position" RazorCode="@example11RazorCode" Id="example11">
<ComponentExampleBox Title="Alignment" RazorCode="@example11RazorCode" Id="example11">
<ExamplePreview>
<BitPivot Alignment="BitAlignment.Center">
<BitPivotItem HeaderText="File">
<div style="margin-top:10px">
<h1>Pivot #1</h1>
<p style="white-space:pre-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra. Fusce mattis sit amet enim vitae imperdiet. Maecenas hendrerit sapien nisl, quis consectetur mi bibendum vel. Pellentesque vel rhoncus quam, non bibendum arcu. Vivamus euismod tellus non felis finibus, dictum finibus eros elementum. Vivamus a massa sit amet leo volutpat blandit at vel tortor. Praesent posuere, nulla eu tempus accumsan, nibh elit rhoncus mauris, eu semper tellus risus et nisi. Duis felis ipsum, luctus eget ultrices sit amet, scelerisque quis metus.</p>
</div>
</BitPivotItem>
<BitPivotItem HeaderText="Shared with me">
<div style="margin-top:15px">
<h2>Pivot #2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra.</p>
</div>
</BitPivotItem>
<BitPivotItem HeaderText="Recent">
<div style="margin-top:10px">
<h3>Pivot #3</h3>
<p style="white-space:pre-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra. Fusce mattis sit amet enim vitae imperdiet. Maecenas hendrerit sapien nisl, quis consectetur mi bibendum vel. Pellentesque vel rhoncus quam, non bibendum arcu. Vivamus euismod tellus non felis finibus, dictum finibus eros elementum. Vivamus a massa sit amet leo volutpat blandit at vel tortor. Praesent posuere, nulla eu tempus accumsan, nibh elit rhoncus mauris, eu semper tellus risus et nisi. Duis felis ipsum, luctus eget ultrices sit amet, scelerisque quis metus.<br />Suspendisse blandit erat ac lobortis pulvinar. Donec nunc leo, tempus sit amet accumsan in, sagittis sed odio. Pellentesque tristique felis sed purus pellentesque, ac dictum ex fringilla. Integer a tincidunt eros, non porttitor turpis. Sed gravida felis massa, in viverra massa aliquam sit amet. Etiam vitae dolor in velit sodales tristique id nec turpis. Proin sit amet urna sollicitudin, malesuada enim et, lacinia mi. Fusce nisl massa, efficitur sit amet elementum convallis, porttitor vel turpis. Fusce congue dui sit amet mollis pulvinar. Suspendisse vulputate leo quis nunc tincidunt, nec dictum risus congue.</p>
</div>
</BitPivotItem>
</BitPivot>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Position" RazorCode="@example12RazorCode" Id="example12">
<ExamplePreview>
<div class="subtitle">Pivot Position: <strong>Top</strong></div>
<div class="box">
Expand Down Expand Up @@ -440,7 +465,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Disabled state" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
<ComponentExampleBox Title="Disabled state" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
<ExamplePreview>
<BitButton OnClick="() => PivotEnabled = !PivotEnabled">Toggle Pivot's IsEnabled</BitButton>
<BitButton OnClick="() => PivotItemEnabled = !PivotItemEnabled">Toggle Pivot Item's IsEnabled</BitButton>
Expand All @@ -467,7 +492,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Style & Class" RazorCode="@example13RazorCode" Id="example13">
<ComponentExampleBox Title="Style & Class" RazorCode="@example14RazorCode" Id="example14">
<ExamplePreview>
<div>
<div>Component's Style & Class:</div>
Expand Down Expand Up @@ -561,7 +586,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="RTL" RazorCode="@example14RazorCode" Id="example14">
<ComponentExampleBox Title="RTL" RazorCode="@example15RazorCode" Id="example15">
<ExamplePreview>
<BitPivot Dir="BitDir.Rtl" OverflowBehavior="@BitPivotOverflowBehavior.Scroll">
<BitPivotItem HeaderText="اسناد" IconName="@BitIconName.Info">
Expand Down
90 changes: 85 additions & 5 deletions ...mo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,15 @@ public partial class BitPivotDemo
{
private readonly List<ComponentParameter> componentParameters =
[
new()
{
Name = "Alignment",
Type = "BitAlignment?",
DefaultValue = "null",
Description = "Determines the alignment of the header section of the pivot.",
LinkType = LinkType.Link,
Href = "#alignment-enum",
},
new()
{
Name = "ChildContent",
Expand All @@ -17,8 +26,8 @@ public partial class BitPivotDemo
Type = "BitPivotClassStyles?",
DefaultValue = "null",
Description = "Custom CSS classes for different parts of the BitPivot component.",
LinkType = LinkType.Link,
Href = "#pivot-class-styles",
LinkType = LinkType.Link
},
new()
{
Expand Down Expand Up @@ -237,6 +246,55 @@ public partial class BitPivotDemo

private readonly List<ComponentSubEnum> componentSubEnums =
[
new()
{
Id = "alignment-enum",
Name = "BitAlignment",
Description = "",
Items =
[
new()
{
Name = "Start",
Value = "0",
},
new()
{
Name = "End",
Value = "1",
},
new()
{
Name = "Center",
Value = "2",
},
new()
{
Name = "SpaceBetween",
Value = "3",
},
new()
{
Name = "SpaceAround",
Value = "4",
},
new()
{
Name = "SpaceEvenly",
Value = "5",
},
new()
{
Name = "Baseline",
Value = "6",
},
new()
{
Name = "Stretch",
Value = "7",
}
]
},
new()
{
Id = "linkFormat-enum",
Expand Down Expand Up @@ -667,6 +725,28 @@ private void TogglePivotItemVisibility()
</BitPivot>";

private readonly string example11RazorCode = @"
<BitPivot Alignment=""BitAlignment.Center"">
<BitPivotItem HeaderText=""File"">
<div style=""margin-top:10px"">
<h1>Pivot #1</h1>
<p style=""white-space:pre-wrap"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra. Fusce mattis sit amet enim vitae imperdiet. Maecenas hendrerit sapien nisl, quis consectetur mi bibendum vel. Pellentesque vel rhoncus quam, non bibendum arcu. Vivamus euismod tellus non felis finibus, dictum finibus eros elementum. Vivamus a massa sit amet leo volutpat blandit at vel tortor. Praesent posuere, nulla eu tempus accumsan, nibh elit rhoncus mauris, eu semper tellus risus et nisi. Duis felis ipsum, luctus eget ultrices sit amet, scelerisque quis metus.</p>
</div>
</BitPivotItem>
<BitPivotItem HeaderText=""Shared with me"">
<div style=""margin-top:15px"">
<h2>Pivot #2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra.</p>
</div>
</BitPivotItem>
<BitPivotItem HeaderText=""Recent"">
<div style=""margin-top:10px"">
<h3>Pivot #3</h3>
<p style=""white-space:pre-wrap"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra. Fusce mattis sit amet enim vitae imperdiet. Maecenas hendrerit sapien nisl, quis consectetur mi bibendum vel. Pellentesque vel rhoncus quam, non bibendum arcu. Vivamus euismod tellus non felis finibus, dictum finibus eros elementum. Vivamus a massa sit amet leo volutpat blandit at vel tortor. Praesent posuere, nulla eu tempus accumsan, nibh elit rhoncus mauris, eu semper tellus risus et nisi. Duis felis ipsum, luctus eget ultrices sit amet, scelerisque quis metus.<br />Suspendisse blandit erat ac lobortis pulvinar. Donec nunc leo, tempus sit amet accumsan in, sagittis sed odio. Pellentesque tristique felis sed purus pellentesque, ac dictum ex fringilla. Integer a tincidunt eros, non porttitor turpis. Sed gravida felis massa, in viverra massa aliquam sit amet. Etiam vitae dolor in velit sodales tristique id nec turpis. Proin sit amet urna sollicitudin, malesuada enim et, lacinia mi. Fusce nisl massa, efficitur sit amet elementum convallis, porttitor vel turpis. Fusce congue dui sit amet mollis pulvinar. Suspendisse vulputate leo quis nunc tincidunt, nec dictum risus congue.</p>
</div>
</BitPivotItem>
</BitPivot>";

private readonly string example12RazorCode = @"
<style>
.subtitle {
padding: 20px 0 10px 0;
Expand Down Expand Up @@ -774,7 +854,7 @@ private void TogglePivotItemVisibility()
</BitPivot>
</div>";

private readonly string example12RazorCode = @"
private readonly string example13RazorCode = @"
<BitButton OnClick=""() => PivotEnabled = !PivotEnabled"">Toggle Pivot's IsEnabled</BitButton>
<BitButton OnClick=""() => PivotItemEnabled = !PivotItemEnabled"">Toggle Pivot Item's IsEnabled</BitButton>

Expand All @@ -798,11 +878,11 @@ private void TogglePivotItemVisibility()
</div>
</BitPivotItem>
</BitPivot>";
private readonly string example12CsharpCode = @"
private readonly string example13CsharpCode = @"
private bool PivotEnabled = true;
private bool PivotItemEnabled = true;";

private readonly string example13RazorCode = @"
private readonly string example14RazorCode = @"
<style>
.custom-class {
margin: 1rem;
Expand Down Expand Up @@ -911,7 +991,7 @@ private void TogglePivotItemVisibility()
</BitPivotItem>
</BitPivot>";

private readonly string example14RazorCode = @"
private readonly string example15RazorCode = @"
<BitPivot Dir=""BitDir.Rtl"" OverflowBehavior=""@BitPivotOverflowBehavior.Scroll"">
<BitPivotItem HeaderText=""اسناد"" IconName=""@BitIconName.Info"">
<br />
Expand Down
Loading