From 48aa9509e6f597de288d171db5e977a18357ec53 Mon Sep 17 00:00:00 2001 From: Erin McLaughlin Date: Sun, 19 May 2024 18:41:37 -0400 Subject: [PATCH] added alignment section --- .../Examples/DocumentationBlock.razor | 35 +++++++++++-------- ...e.razor => DropdownAlignmentExample.razor} | 4 +-- .../Examples/Dropdown/DropdownExample.razor | 8 +++++ .../Examples/Dropdown/DropdownExamples.razor | 4 +-- .../Components/Pages/Home.razor | 2 +- .../Components/Pages/Home.razor.css | 13 +++---- .../Behaviors/Click/ClickBehavior.razor | 7 ---- .../Popover/HBPopoverBehavior.razor.js | 7 ++-- src/HeadlessBlazor.Dropdown/HBDropdownMenu.cs | 4 +-- 9 files changed, 44 insertions(+), 40 deletions(-) rename docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/{SimpleDropdownExample.razor => DropdownAlignmentExample.razor} (88%) create mode 100644 docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownExample.razor delete mode 100644 src/HeadlessBlazor.Core/Behaviors/Click/ClickBehavior.razor diff --git a/docs/HeadlessBlazor.Docs.Client/Examples/DocumentationBlock.razor b/docs/HeadlessBlazor.Docs.Client/Examples/DocumentationBlock.razor index 7f1677e..0e06c32 100644 --- a/docs/HeadlessBlazor.Docs.Client/Examples/DocumentationBlock.razor +++ b/docs/HeadlessBlazor.Docs.Client/Examples/DocumentationBlock.razor @@ -1,18 +1,22 @@ -
-
- -
-
- @if (string.IsNullOrEmpty(CodeBlock)) - { -

Loading...

- } - else - { -
+
+

@Title

+ +
+
+ +
+
+ @if (string.IsNullOrEmpty(CodeBlock)) + { +

Loading...

+ } + else + { +
                 @CodeBlock
-            
- } +
+ } +
@@ -23,6 +27,9 @@ [Inject] private IRazorFileReader FileProvider { get; set; } = default!; + [Parameter, EditorRequired] + public required string Title { get; set; } + [Parameter, EditorRequired] public required Type Type { get; set; } diff --git a/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/SimpleDropdownExample.razor b/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownAlignmentExample.razor similarity index 88% rename from docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/SimpleDropdownExample.razor rename to docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownAlignmentExample.razor index fbb5962..dea27aa 100644 --- a/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/SimpleDropdownExample.razor +++ b/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownAlignmentExample.razor @@ -6,10 +6,10 @@ Option 2 Option 3 - + Click Me - + Option 1 Option 2 Option 3 diff --git a/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownExample.razor b/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownExample.razor new file mode 100644 index 0000000..6b45334 --- /dev/null +++ b/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownExample.razor @@ -0,0 +1,8 @@ + + Click Me + + Option 1 + Option 2 + Option 3 + + \ No newline at end of file diff --git a/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownExamples.razor b/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownExamples.razor index 9b29e13..6d50b49 100644 --- a/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownExamples.razor +++ b/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownExamples.razor @@ -1,2 +1,2 @@ -

Simple Dropdown

- + + \ No newline at end of file diff --git a/docs/HeadlessBlazor.Docs/Components/Pages/Home.razor b/docs/HeadlessBlazor.Docs/Components/Pages/Home.razor index c0af743..9419079 100644 --- a/docs/HeadlessBlazor.Docs/Components/Pages/Home.razor +++ b/docs/HeadlessBlazor.Docs/Components/Pages/Home.razor @@ -10,7 +10,7 @@ Headless Blazor -
+
diff --git a/docs/HeadlessBlazor.Docs/Components/Pages/Home.razor.css b/docs/HeadlessBlazor.Docs/Components/Pages/Home.razor.css index 45e81af..f3341f6 100644 --- a/docs/HeadlessBlazor.Docs/Components/Pages/Home.razor.css +++ b/docs/HeadlessBlazor.Docs/Components/Pages/Home.razor.css @@ -1,11 +1,8 @@ -.page-root > * { - padding: 0.5rem 1rem; -} - -.hb-top-row { +.hb-top-row { background-image: linear-gradient(45deg, #5271FF, hotpink); display: flex; justify-content: space-between; + padding: 0.5rem 1rem; } .hb-top-row .hb-brand { @@ -22,6 +19,6 @@ width: 0.85em; } - .hb-top-row { - flex-grow: 0; - } +.hb-content { + padding: 1rem; +} \ No newline at end of file diff --git a/src/HeadlessBlazor.Core/Behaviors/Click/ClickBehavior.razor b/src/HeadlessBlazor.Core/Behaviors/Click/ClickBehavior.razor deleted file mode 100644 index 09ec410..0000000 --- a/src/HeadlessBlazor.Core/Behaviors/Click/ClickBehavior.razor +++ /dev/null @@ -1,7 +0,0 @@ -@code { - [Parameter] - public HBElementBase Target { get; set; } = default!; - - [Parameter] - public EventCallback OnClick { get; set; } -} \ No newline at end of file diff --git a/src/HeadlessBlazor.Core/Behaviors/Popover/HBPopoverBehavior.razor.js b/src/HeadlessBlazor.Core/Behaviors/Popover/HBPopoverBehavior.razor.js index 69720b8..cbd6c68 100644 --- a/src/HeadlessBlazor.Core/Behaviors/Popover/HBPopoverBehavior.razor.js +++ b/src/HeadlessBlazor.Core/Behaviors/Popover/HBPopoverBehavior.razor.js @@ -21,12 +21,11 @@ export class HBPopoverBehavior { * @param {any} options */ constructor(anchor, content, options) { - const side = (options && options.Side) || 'bottom'; - const align = (options && options.Alignment) || 'start'; - + const side = options.side || 'bottom'; + const align = options.alignment || 'start'; this.dispose = autoUpdate(anchor, content, () => { computePosition(anchor, content, { - placement: `${side}-${align}`, + placement: `${side}-${align}`.toLowerCase(), middleware: [flip()] }).then(({ x, y }) => { Object.assign(content.style, { diff --git a/src/HeadlessBlazor.Dropdown/HBDropdownMenu.cs b/src/HeadlessBlazor.Dropdown/HBDropdownMenu.cs index 2404a51..e9ddb67 100644 --- a/src/HeadlessBlazor.Dropdown/HBDropdownMenu.cs +++ b/src/HeadlessBlazor.Dropdown/HBDropdownMenu.cs @@ -8,7 +8,7 @@ public class HBDropdownMenu : HBElement public ElementReference ElementReference { get; private set; } [Parameter] - public HBPopoverAlignment Alignment { get; set; } = HBPopoverAlignment.Start; + public HBPopoverAlignment? Alignment { get; set; } [Parameter] public bool AutoPosition { get; set; } = true; @@ -17,7 +17,7 @@ public class HBDropdownMenu : HBElement protected HBDropdown Dropdown { get; set; } = default!; [Parameter] - public HBPopoverSide Side { get; set; } = HBPopoverSide.Bottom; + public HBPopoverSide? Side { get; set; } protected override void AddBehaviors(RenderTreeBuilder builder, ref int sequenceNumber) {