-
Notifications
You must be signed in to change notification settings - Fork 159
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
⚡ refactor(Border): refactor using CSS approach (#1830)
* rename * ⚡ refactor(Border): refactor using CSS approach * update playgroud
- Loading branch information
Showing
9 changed files
with
117 additions
and
223 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 0 additions & 12 deletions
12
docs/Masa.Blazor.Docs/Examples/components/borders/Usage.razor.cs
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,161 +1,3 @@ | ||
| @page "/" | ||
|
|
||
| <h1>Test your code here!</h1> | ||
|
|
||
| <MDataTable Headers="_headers" | ||
| Items="_desserts" | ||
| ItemsPerPage="5" | ||
| Class="elevation-1"> | ||
| <ItemColContent> | ||
| @if (context.Header.Value == "Name") | ||
| { | ||
| <MTooltip Top> | ||
| <ActivatorContent Context="tooltip"> | ||
| <span @attributes="@tooltip.Attrs">@context.Value</span> | ||
| </ActivatorContent> | ||
| <ChildContent> | ||
| @context.Value | ||
| </ChildContent> | ||
| </MTooltip> | ||
| } | ||
| else | ||
| { | ||
| @context.Value | ||
| } | ||
| </ItemColContent> | ||
| </MDataTable> | ||
|
|
||
| @code { | ||
|
|
||
| public class Dessert | ||
| { | ||
| public string Name { get; set; } | ||
|
|
||
| public int Calories { get; set; } | ||
|
|
||
| public double Fat { get; set; } | ||
|
|
||
| public int Carbs { get; set; } | ||
|
|
||
| public double Protein { get; set; } | ||
|
|
||
| public int Sodium { get; set; } | ||
|
|
||
| public string Calcium { get; set; } | ||
|
|
||
| public string Iron { get; set; } | ||
| } | ||
|
|
||
| private List<DataTableHeader<Dessert>> _headers = new List<DataTableHeader<Dessert>> | ||
| { | ||
| new() | ||
| { | ||
| Text = "Dessert", | ||
| Align = DataTableHeaderAlign.Start, | ||
| Sortable = true, | ||
| Value = nameof(Dessert.Name), | ||
| Width = 200, | ||
| Ellipsis = true | ||
| }, | ||
| new() { Text = "Calories", Value = nameof(Dessert.Calories) }, | ||
| new() { Text = "Fat (g)", Value = nameof(Dessert.Fat) }, | ||
| new() { Text = "Carbs (g)", Value = nameof(Dessert.Carbs) }, | ||
| new() { Text = "Protein (g)", Value = nameof(Dessert.Protein) }, | ||
| new() { Text = "Iron (%)", Value = nameof(Dessert.Iron) } | ||
| }; | ||
|
|
||
| private List<Dessert> _desserts = new List<Dessert> | ||
| { | ||
| new Dessert | ||
| { | ||
| Name = "Frozen Yogurt ABCDEFG 123qwe123qwe ", | ||
| Calories = 159, | ||
| Fat = 6.0, | ||
| Carbs = 24, | ||
| Protein = 4.0, | ||
| Iron = "1%", | ||
| }, | ||
| new Dessert | ||
| { | ||
| Name = "Ice cream sandwich ABCDEFG 123qwe123qwe ", | ||
| Calories = 237, | ||
| Fat = 9.0, | ||
| Carbs = 37, | ||
| Protein = 4.3, | ||
| Iron = "1%", | ||
| }, | ||
| new Dessert | ||
| { | ||
| Name = "Eclair ABCDEFG 123qwe123qwe ", | ||
| Calories = 262, | ||
| Fat = 16.0, | ||
| Carbs = 23, | ||
| Protein = 6.0, | ||
| Iron = "7%", | ||
| }, | ||
| new Dessert | ||
| { | ||
| Name = "Cupcake ABCDEFG 123qwe123qwe ", | ||
| Calories = 305, | ||
| Fat = 3.7, | ||
| Carbs = 67, | ||
| Protein = 4.3, | ||
| Iron = "8%", | ||
| }, | ||
| new Dessert | ||
| { | ||
| Name = "Gingerbread ABCDEFG 123qwe123qwe ", | ||
| Calories = 356, | ||
| Fat = 16.0, | ||
| Carbs = 49, | ||
| Protein = 3.9, | ||
| Iron = "16%" | ||
| }, | ||
| new Dessert | ||
| { | ||
| Name = "Jelly bean ABCDEFG 123qwe123qwe ", | ||
| Calories = 375, | ||
| Fat = 0.0, | ||
| Carbs = 94, | ||
| Protein = 0.0, | ||
| Iron = "0%", | ||
| }, | ||
| new Dessert | ||
| { | ||
| Name = "Lollipop ABCDEFG 123qwe123qwe ", | ||
| Calories = 392, | ||
| Fat = 0.2, | ||
| Carbs = 98, | ||
| Protein = 0, | ||
| Iron = "2%", | ||
| }, | ||
| new Dessert | ||
| { | ||
| Name = "Honeycomb ABCDEFG 123qwe123qwe ", | ||
| Calories = 408, | ||
| Fat = 3.2, | ||
| Carbs = 87, | ||
| Protein = 6.5, | ||
| Iron = "45%", | ||
| }, | ||
| new Dessert | ||
| { | ||
| Name = "Donut ABCDEFG 123qwe123qwe ", | ||
| Calories = 452, | ||
| Fat = 25.0, | ||
| Carbs = 51, | ||
| Protein = 4.9, | ||
| Iron = "22%", | ||
| }, | ||
| new Dessert | ||
| { | ||
| Name = "KitKat ABCDEFG 123qwe123qwe ", | ||
| Calories = 518, | ||
| Fat = 26.0, | ||
| Carbs = 65, | ||
| Protein = 7, | ||
| Iron = "6%", | ||
| } | ||
| }; | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,51 +1,65 @@ | ||
| namespace Masa.Blazor | ||
| using StyleBuilder = Masa.Blazor.Core.StyleBuilder; | ||
|
|
||
| namespace Masa.Blazor; | ||
|
|
||
| public class MBorder : Container | ||
| { | ||
| public class MBorder : BBorder | ||
| [Parameter] | ||
| [MasaApiParameter(Borders.Left)] | ||
| public Borders Border { get; set; } = Borders.Left; | ||
|
|
||
| [Parameter] | ||
| [MasaApiParameter("primary")] | ||
| public string? Color { get; set; } = "primary"; | ||
|
|
||
| [Parameter] public bool Offset { get; set; } | ||
|
|
||
| [Parameter] [MasaApiParameter(true)] public bool Value { get; set; } = true; | ||
|
|
||
| [Obsolete("Use Size instead.")] | ||
| [Parameter] | ||
| [MasaApiParameter(8)] | ||
| public StringNumber Width { get; set; } = 8; | ||
|
|
||
| [Parameter] [MasaApiParameter(8)] public StringNumber Size { get; set; } = 8; | ||
|
|
||
| private Block _block = new("m-border"); | ||
|
|
||
| private bool Active => Value && Border != Borders.None; | ||
|
|
||
| protected override IEnumerable<string> BuildComponentClass() | ||
| { | ||
| protected override void SetComponentClass() | ||
| return _block.Modifier(Border.ToString()) | ||
| .And("active", Active) | ||
| .GenerateCssClasses(); | ||
| } | ||
|
|
||
| protected override IEnumerable<string> BuildComponentStyle() | ||
| { | ||
| var size = Size; | ||
| #pragma warning disable CS0618 // Type or member is obsolete | ||
| if (Width != 8) | ||
| { | ||
| CssProvider | ||
| .Apply("wrapper", _ => { }, | ||
| style => { style.Add("position:relative;display:inherit;").Add(WrapperStyle); }) | ||
| .Apply(css => | ||
| { | ||
| css.Add("m-border") | ||
| .Add(() => Border switch | ||
| { | ||
| Borders.Left => "m-border__left", | ||
| Borders.Right => "m-border__right", | ||
| Borders.Top => "m-border__top", | ||
| Borders.Bottom => "m-border__bottom", | ||
| _ => "", | ||
| }) | ||
| .AddColor(Color) | ||
| .AddRounded(Rounded); | ||
| }, style => | ||
| { | ||
| style | ||
| .AddIf("display:none", () => Inactive) | ||
| .AddIf(() => | ||
| { | ||
| var (number, unit) = ComputedWidth(); | ||
| return number > 0 ? $"border-width:{number}{unit}" : ""; | ||
| }, () => Width != null) | ||
| .AddIf(() => | ||
| { | ||
| var (number, unit) = ComputedWidth(); | ||
| if (number <= 0) return ""; | ||
|
|
||
| var calc = $"calc(1px - {number * 2}{unit})"; | ||
|
|
||
| return Border switch | ||
| { | ||
| Borders.Left => $"left:{calc}", | ||
| Borders.Right => $"right:{calc}", | ||
| Borders.Top => $"top:{calc}", | ||
| Borders.Bottom => $"bottom:{calc}", | ||
| _ => "", | ||
| }; | ||
| }, () => Offset); | ||
| }); | ||
| size = Width; | ||
| } | ||
| #pragma warning restore CS0618 // Type or member is obsolete | ||
|
|
||
| var styleBuilder = StyleBuilder.Create() | ||
| .Add("--m-border-size", size.ToUnit()) | ||
| .Add("--m-border-offset", Offset ? $"-{size.ToUnit()}" : "0"); | ||
|
|
||
| if (Color != null) | ||
| { | ||
| if (Color.StartsWith("#") || Color.StartsWith("rgb")) | ||
| { | ||
| styleBuilder.Add("--m-border-color", Color); | ||
| } | ||
| else | ||
| { | ||
| styleBuilder.Add("--m-border-color", $"var(--m-theme-{Color})"); | ||
| } | ||
| } | ||
|
|
||
| return styleBuilder.GenerateCssStyles(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.