Skip to content

Commit

Permalink
Version 0.1.0-alpha.3 - Anchored region
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dovrol
Dovrol committed Feb 24, 2024
2 parents 541ad15 + 5fb874c commit 9b93753
Show file tree
Hide file tree
Showing 10 changed files with 459 additions and 3 deletions.
2 changes: 1 addition & 1 deletion Version.props
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<Project>
<PropertyGroup>
<Version>0.1.0-alpha.2</Version>
<Version>0.1.0-alpha.3</Version>
<Copyright>Copyright © 2024 Wiktor Kubis</Copyright>
<Authors>Wiktor Kubis</Authors>
<RepositoryType>git</RepositoryType>
Expand Down
3 changes: 3 additions & 0 deletions examples/AdaptiveBlazor.Demo/Components/App.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
<base href="/" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="AdaptiveBlazor.Demo.styles.css" />

@* Avoid web component flickering - FOUC *@
<style>*:not(:defined){visibility:hidden}</style>
<HeadOutlet />
</head>

Expand Down
2 changes: 1 addition & 1 deletion src/AdaptiveBlazor.Storybook/AdaptiveBlazor.Storybook.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<Import Project="../../Version.props" />

<ItemGroup>
<PackageReference Include="BlazingStory" Version="1.0.0-preview.25" />
<PackageReference Include="BlazingStory" Version="1.0.0-preview.27" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.1" PrivateAssets="all" />
<PackageReference Include="PublishSPAforGitHubPages.Build" Version="2.1.1" />
Expand Down
198 changes: 198 additions & 0 deletions src/AdaptiveBlazor.Storybook/Stories/AnchoredRegion/AnchoredRegion.stories.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
@attribute [Stories("Components/Anchored region")]

<Stories TComponent="@AdaptiveAnchoredRegion" Layout="typeof(AnchoredRegionLayout)">
<Story Name="Default">
<Arguments>
<Arg For="_ => _.Anchor" Value="@anchorId" />
</Arguments>
<Template>
<adaptive-button id="@anchorId">This is anchor</adaptive-button>

<AdaptiveAnchoredRegion @attributes="context.Args">
<adaptive-menu>
<adaptive-menu-item>
Item 1
</adaptive-menu-item>
<adaptive-menu-item>
Item 2
</adaptive-menu-item>
</adaptive-menu>
</AdaptiveAnchoredRegion>
</Template>
</Story>

<Story Name="Relative placement: Adjacent vertically and inset horizontally">
@* TODO add as description *@
@* By default the anchored region is positioned adjacent to the element it is anchored to, but if the "horizontal-inset" or "vertical-inset" attributes are set then the region will be 'inset' and overlap the anchor on that axis. Various combinations of these attributes can enable some commonly desired layouts. In the following images the menu would be considered to be the anchored region and the "Select an option" button the anchor. *@
<Arguments>
<Arg For="_ => _.Anchor" Value="@anchorId" />
<Arg For="_ => _.HorizontalInset" Value="true" />
</Arguments>
<Template>
<adaptive-button id="@anchorId">This is anchor</adaptive-button>

<AdaptiveAnchoredRegion @attributes="context.Args">
<adaptive-menu>
<adaptive-menu-item>
Item 1
</adaptive-menu-item>
<adaptive-menu-item>
Item 2
</adaptive-menu-item>
</adaptive-menu>
</AdaptiveAnchoredRegion>
</Template>
</Story>
<Story Name="Relative placement: Inset vertically and adjacent horizontally">
<Arguments>
<Arg For="_ => _.Anchor" Value="@anchorId" />
<Arg For="_ => _.VerticalInset" Value="true" />
</Arguments>
<Template>
<adaptive-button id="@anchorId">This is anchor</adaptive-button>

<AdaptiveAnchoredRegion @attributes="context.Args">
<adaptive-menu>
<adaptive-menu-item>
Item 1
</adaptive-menu-item>
<adaptive-menu-item>
Item 2
</adaptive-menu-item>
</adaptive-menu>
</AdaptiveAnchoredRegion>
</Template>
</Story>
<Story Name="Relative placement: Inset on both axis positions">
<Arguments>
<Arg For="_ => _.Anchor" Value="@anchorId" />
<Arg For="_ => _.HorizontalInset" Value="true" />
<Arg For="_ => _.VerticalInset" Value="true" />
</Arguments>
<Template>
<adaptive-button id="@anchorId" style="min-width: 200px;">This is anchor</adaptive-button>

<AdaptiveAnchoredRegion @attributes="context.Args">
<adaptive-menu>
<adaptive-menu-item>
Item 1
</adaptive-menu-item>
<adaptive-menu-item>
Item 2
</adaptive-menu-item>
</adaptive-menu>
</AdaptiveAnchoredRegion>
</Template>
</Story>
<Story Name="Relative placement: Adjacent on both axis positions">
<Arguments>
<Arg For="_ => _.Anchor" Value="@anchorId" />
</Arguments>
<Template>
<adaptive-button id="@anchorId">This is anchor</adaptive-button>

<AdaptiveAnchoredRegion @attributes="context.Args">
<adaptive-menu>
<adaptive-menu-item>
Item 1
</adaptive-menu-item>
<adaptive-menu-item>
Item 2
</adaptive-menu-item>
</adaptive-menu>
</AdaptiveAnchoredRegion>
</Template>
</Story>
<Story Name="A region that always renders above the anchor element.">
<Arguments>
<Arg For="_ => _.Anchor" Value="@anchorId" />
<Arg For="_ => _.VerticalPositioningMode" Value="@AxisPositioningMode.Locktodefault" />
<Arg For="_ => _.VerticalDefaultPosition" Value="@VerticalPosition.Top" />
</Arguments>
<Template>
<adaptive-button id="@anchorId" style="align-self: flex-start;">This is anchor</adaptive-button>

<AdaptiveAnchoredRegion @attributes="context.Args">
<adaptive-menu>
<adaptive-menu-item>
Item 1
</adaptive-menu-item>
<adaptive-menu-item>
Item 2
</adaptive-menu-item>
</adaptive-menu>
</AdaptiveAnchoredRegion>
</Template>
</Story>
<Story Name="A region that renders above or below the anchor depending on available space.">
<Arguments>
<Arg For="_ => _.Anchor" Value="@anchorId" />
<Arg For="_ => _.VerticalPositioningMode" Value="@AxisPositioningMode.Dynamic" />
</Arguments>
<Template>
<adaptive-button id="@anchorId" style="align-self: flex-start;">This is anchor</adaptive-button>

<AdaptiveAnchoredRegion @attributes="context.Args">
<adaptive-menu>
<adaptive-menu-item>
Item 1
</adaptive-menu-item>
<adaptive-menu-item>
Item 2
</adaptive-menu-item>
</adaptive-menu>
</AdaptiveAnchoredRegion>
</Template>
</Story>
<Story Name="A region that overlaps the anchor and renders above or below it depending on available space.">
<Arguments>
<Arg For="_ => _.Anchor" Value="@anchorId" />
<Arg For="_ => _.VerticalPositioningMode" Value="@AxisPositioningMode.Dynamic" />
<Arg For="_ => _.VerticalInset" Value="true" />
</Arguments>
<Template>
<adaptive-button id="@anchorId" style="align-self: flex-end;">This is anchor</adaptive-button>

<AdaptiveAnchoredRegion @attributes="context.Args">
<adaptive-menu>
<adaptive-menu-item>
Item 1
</adaptive-menu-item>
<adaptive-menu-item>
Item 2
</adaptive-menu-item>
</adaptive-menu>
</AdaptiveAnchoredRegion>
</Template>
</Story>
<Story Name="A region that renders above the anchor until that space is less than 250px.">
<Arguments>
<Arg For="_ => _.Anchor" Value="@anchorId" />
<Arg For="_ => _.VerticalPositioningMode" Value="@AxisPositioningMode.Dynamic" />
<Arg For="_ => _.VerticalDefaultPosition" Value="@VerticalPosition.Top" />
<Arg For="_ => _.VerticalThreshold" Value="250" />
</Arguments>
<Template>
<adaptive-button id="@anchorId" style="align-self: center;">This is anchor</adaptive-button>

<AdaptiveAnchoredRegion @attributes="context.Args">
<adaptive-menu>
<adaptive-menu-item>
Item 1
</adaptive-menu-item>
<adaptive-menu-item>
Item 2
</adaptive-menu-item>
</adaptive-menu>
</AdaptiveAnchoredRegion>
</Template>
</Story>
</Stories>




@code
{
private string anchorId = "anchor";
}
28 changes: 28 additions & 0 deletions src/AdaptiveBlazor.Storybook/Stories/AnchoredRegion/AnchoredRegionLayout.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
@inherits LayoutComponentBase
@layout DefaultLayout

<div id="wrapper">
<div id="anchored-region-content">
@Body
</div>
</div>


<style>
#wrapper
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#anchored-region-content
{
min-height: 200px;
min-width: 500px;
display: flex;
border: 1px solid;
align-items: center;
}
</style>
2 changes: 1 addition & 1 deletion src/AdaptiveBlazor/Components/Anchor/AdaptiveAnchor.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ public partial class AdaptiveAnchor
/// <see href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">see a element</see> for more information.
/// HTML Attribute: target
/// </summary>
[Parameter] public AnchorTarget? Target { get; set; } = AnchorTarget.Self;
[Parameter] public AnchorTarget? Target { get; set; }

/// <summary>
/// <see href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">see a element</see> for more information.
Expand Down
27 changes: 27 additions & 0 deletions src/AdaptiveBlazor/Components/AnchoredRegion/AdaptiveAnchoredRegion.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
@namespace AdaptiveBlazor.Components
@inherits AdaptiveComponentBase

<adaptive-anchored-region
id="@Id"
class="@Class"
style="@Style"
anchor="@Anchor"
viewport="@Viewport"
horizontal-positioning-mode="@HorizontalPositioningMode?.ToAttribute()"
horizontal-default-position="@HorizontalDefaultPosition?.ToAttribute()"
horizontal-viewport-lock=@HorizontalViewportLock
horizontal-inset="@HorizontalInset"
horizontal-threshold="@HorizontalThreshold"
horizontal-scaling="@HorizontalScaling?.ToAttribute()"
vertical-positioning-mode="@VerticalPositioningMode?.ToAttribute()"
vertical-default-position="@VerticalDefaultPosition?.ToAttribute()"
vertical-viewport-lock=@VerticalViewportLock
vertical-inset="@VerticalInset"
vertical-threshold="@VerticalThreshold"
vertical-scaling="@VerticalScaling?.ToAttribute()"
fixed-placement=@FixedPlacement
auto-update-mode="@AutoUpdateMode?.ToAttribute()"
@attributes="AdditionalAttributes">

@ChildContent
</adaptive-anchored-region>
Loading

0 comments on commit 9b93753

Please sign in to comment.