Skip to content

Commit 16d94f4

Browse files
stsrkistsrki
authored
Offcanvas: add Size parameter (#6547)
* Offcanvas Size * Shorter headings * solve opening animations
1 parent 178aa2f commit 16d94f4

49 files changed

Lines changed: 1344 additions & 44 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎Demos/Blazorise.Demo/Pages/Tests/OffcanvasPage.razor‎

Lines changed: 165 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/tests/offcanvas"
1+
@page "/tests/offcanvas"
22

33
<Row>
44
<Column>
@@ -63,6 +63,47 @@
6363
</Column>
6464
</Row>
6565

66+
<Row>
67+
<Column>
68+
<Card Margin="Margin.Is4.FromBottom">
69+
<CardHeader>
70+
<CardTitle>Offcanvas Sizes</CardTitle>
71+
</CardHeader>
72+
<CardBody>
73+
<CardText>
74+
Predefined sizes are configured per offcanvas instance. Use separate instances when placement changes across axes.
75+
</CardText>
76+
</CardBody>
77+
<CardBody>
78+
<Button Color="Color.Primary" Margin="Margin.Is2.FromEnd" Clicked="@(() => ShowOffcanvas( offcanvasEndSmallRef ))">
79+
Small End
80+
</Button>
81+
<Button Color="Color.Primary" Margin="Margin.Is2.FromEnd" Clicked="@(() => ShowOffcanvas( offcanvasEndLargeRef ))">
82+
Large End
83+
</Button>
84+
<Button Color="Color.Primary" Margin="Margin.Is2.FromEnd" Clicked="@(() => ShowOffcanvas( offcanvasEndExtraLargeRef ))">
85+
Extra Large End
86+
</Button>
87+
<Button Color="Color.Primary" Margin="Margin.Is2.FromEnd" Clicked="@(() => ShowOffcanvas( offcanvasEndFullscreenRef ))">
88+
Fullscreen End
89+
</Button>
90+
<Button Color="Color.Secondary" Margin="Margin.Is2.FromEnd" Clicked="@(() => ShowOffcanvas( offcanvasTopSmallRef ))">
91+
Small Top
92+
</Button>
93+
<Button Color="Color.Secondary" Margin="Margin.Is2.FromEnd" Clicked="@(() => ShowOffcanvas( offcanvasTopLargeRef ))">
94+
Large Top
95+
</Button>
96+
<Button Color="Color.Secondary" Margin="Margin.Is2.FromEnd" Clicked="@(() => ShowOffcanvas( offcanvasTopExtraLargeRef ))">
97+
Extra Large Top
98+
</Button>
99+
<Button Color="Color.Secondary" Clicked="@(() => ShowOffcanvas( offcanvasTopFullscreenRef ))">
100+
Fullscreen Top
101+
</Button>
102+
</CardBody>
103+
</Card>
104+
</Column>
105+
</Row>
106+
66107
<Offcanvas @ref="offcanvasRef1" Placement="Placement.Start" Animated="@animation" AnimationDuration="@animationDuration">
67108
<OffcanvasHeader>
68109
Offcanvas Header
@@ -119,11 +160,123 @@
119160
</OffcanvasFooter>
120161
</Offcanvas>
121162

163+
<Offcanvas @ref="offcanvasEndSmallRef" Placement="Placement.End" Size="OffcanvasSize.Small" Animated="@animation" AnimationDuration="@animationDuration">
164+
<OffcanvasHeader>
165+
Small End Offcanvas
166+
<CloseButton Clicked="@(() => HideOffcanvas( offcanvasEndSmallRef ))" />
167+
</OffcanvasHeader>
168+
<OffcanvasBody>
169+
<p>Small size applied to an end-positioned offcanvas.</p>
170+
</OffcanvasBody>
171+
<OffcanvasFooter>
172+
<Button Color="Color.Primary" Clicked="@(() => HideOffcanvas( offcanvasEndSmallRef ))">Close Action</Button>
173+
</OffcanvasFooter>
174+
</Offcanvas>
175+
176+
<Offcanvas @ref="offcanvasEndLargeRef" Placement="Placement.End" Size="OffcanvasSize.Large" Animated="@animation" AnimationDuration="@animationDuration">
177+
<OffcanvasHeader>
178+
Large End Offcanvas
179+
<CloseButton Clicked="@(() => HideOffcanvas( offcanvasEndLargeRef ))" />
180+
</OffcanvasHeader>
181+
<OffcanvasBody>
182+
<p>Large size applied to an end-positioned offcanvas.</p>
183+
</OffcanvasBody>
184+
<OffcanvasFooter>
185+
<Button Color="Color.Primary" Clicked="@(() => HideOffcanvas( offcanvasEndLargeRef ))">Close Action</Button>
186+
</OffcanvasFooter>
187+
</Offcanvas>
188+
189+
<Offcanvas @ref="offcanvasEndExtraLargeRef" Placement="Placement.End" Size="OffcanvasSize.ExtraLarge" Animated="@animation" AnimationDuration="@animationDuration">
190+
<OffcanvasHeader>
191+
Extra Large End Offcanvas
192+
<CloseButton Clicked="@(() => HideOffcanvas( offcanvasEndExtraLargeRef ))" />
193+
</OffcanvasHeader>
194+
<OffcanvasBody>
195+
<p>Extra large size applied to an end-positioned offcanvas.</p>
196+
</OffcanvasBody>
197+
<OffcanvasFooter>
198+
<Button Color="Color.Primary" Clicked="@(() => HideOffcanvas( offcanvasEndExtraLargeRef ))">Close Action</Button>
199+
</OffcanvasFooter>
200+
</Offcanvas>
201+
202+
<Offcanvas @ref="offcanvasEndFullscreenRef" Placement="Placement.End" Size="OffcanvasSize.Fullscreen" Animated="@animation" AnimationDuration="@animationDuration">
203+
<OffcanvasHeader>
204+
Fullscreen End Offcanvas
205+
<CloseButton Clicked="@(() => HideOffcanvas( offcanvasEndFullscreenRef ))" />
206+
</OffcanvasHeader>
207+
<OffcanvasBody>
208+
<p>Fullscreen size applied to an end-positioned offcanvas.</p>
209+
</OffcanvasBody>
210+
<OffcanvasFooter>
211+
<Button Color="Color.Primary" Clicked="@(() => HideOffcanvas( offcanvasEndFullscreenRef ))">Close Action</Button>
212+
</OffcanvasFooter>
213+
</Offcanvas>
214+
215+
<Offcanvas @ref="offcanvasTopSmallRef" Placement="Placement.Top" Size="OffcanvasSize.Small" Animated="@animation" AnimationDuration="@animationDuration">
216+
<OffcanvasHeader>
217+
Small Top Offcanvas
218+
<CloseButton Clicked="@(() => HideOffcanvas( offcanvasTopSmallRef ))" />
219+
</OffcanvasHeader>
220+
<OffcanvasBody>
221+
<p>Small size applied to a top-positioned offcanvas.</p>
222+
</OffcanvasBody>
223+
<OffcanvasFooter>
224+
<Button Color="Color.Primary" Clicked="@(() => HideOffcanvas( offcanvasTopSmallRef ))">Close Action</Button>
225+
</OffcanvasFooter>
226+
</Offcanvas>
227+
228+
<Offcanvas @ref="offcanvasTopLargeRef" Placement="Placement.Top" Size="OffcanvasSize.Large" Animated="@animation" AnimationDuration="@animationDuration">
229+
<OffcanvasHeader>
230+
Large Top Offcanvas
231+
<CloseButton Clicked="@(() => HideOffcanvas( offcanvasTopLargeRef ))" />
232+
</OffcanvasHeader>
233+
<OffcanvasBody>
234+
<p>Large size applied to a top-positioned offcanvas.</p>
235+
</OffcanvasBody>
236+
<OffcanvasFooter>
237+
<Button Color="Color.Primary" Clicked="@(() => HideOffcanvas( offcanvasTopLargeRef ))">Close Action</Button>
238+
</OffcanvasFooter>
239+
</Offcanvas>
240+
241+
<Offcanvas @ref="offcanvasTopExtraLargeRef" Placement="Placement.Top" Size="OffcanvasSize.ExtraLarge" Animated="@animation" AnimationDuration="@animationDuration">
242+
<OffcanvasHeader>
243+
Extra Large Top Offcanvas
244+
<CloseButton Clicked="@(() => HideOffcanvas( offcanvasTopExtraLargeRef ))" />
245+
</OffcanvasHeader>
246+
<OffcanvasBody>
247+
<p>Extra large size applied to a top-positioned offcanvas.</p>
248+
</OffcanvasBody>
249+
<OffcanvasFooter>
250+
<Button Color="Color.Primary" Clicked="@(() => HideOffcanvas( offcanvasTopExtraLargeRef ))">Close Action</Button>
251+
</OffcanvasFooter>
252+
</Offcanvas>
253+
254+
<Offcanvas @ref="offcanvasTopFullscreenRef" Placement="Placement.Top" Size="OffcanvasSize.Fullscreen" Animated="@animation" AnimationDuration="@animationDuration">
255+
<OffcanvasHeader>
256+
Fullscreen Top Offcanvas
257+
<CloseButton Clicked="@(() => HideOffcanvas( offcanvasTopFullscreenRef ))" />
258+
</OffcanvasHeader>
259+
<OffcanvasBody>
260+
<p>Fullscreen size applied to a top-positioned offcanvas.</p>
261+
</OffcanvasBody>
262+
<OffcanvasFooter>
263+
<Button Color="Color.Primary" Clicked="@(() => HideOffcanvas( offcanvasTopFullscreenRef ))">Close Action</Button>
264+
</OffcanvasFooter>
265+
</Offcanvas>
266+
122267
@code {
123268
private Offcanvas offcanvasRef1;
124269
private Offcanvas offcanvasRef2;
125270
private Offcanvas offcanvasRef3;
126271
private Offcanvas offcanvasRef4;
272+
private Offcanvas offcanvasEndSmallRef;
273+
private Offcanvas offcanvasEndLargeRef;
274+
private Offcanvas offcanvasEndExtraLargeRef;
275+
private Offcanvas offcanvasEndFullscreenRef;
276+
private Offcanvas offcanvasTopSmallRef;
277+
private Offcanvas offcanvasTopLargeRef;
278+
private Offcanvas offcanvasTopExtraLargeRef;
279+
private Offcanvas offcanvasTopFullscreenRef;
127280

128281
private bool animation = true;
129282
private int animationDuration = 300;
@@ -147,4 +300,14 @@
147300
{
148301
return offcanvasRef4.Hide();
149302
}
150-
}
303+
304+
private Task ShowOffcanvas( Offcanvas offcanvas )
305+
{
306+
return offcanvas.Show();
307+
}
308+
309+
private Task HideOffcanvas( Offcanvas offcanvas )
310+
{
311+
return offcanvas.Hide();
312+
}
313+
}

‎Documentation/Blazorise.Docs/Models/Snippets.generated.cs‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2786,6 +2786,131 @@ private Task HideOffcanvas()
27862786
}
27872787
}";
27882788

2789+
public const string OffcanvasSizeExample = @"<Offcanvas @ref=""offcanvasEndSmallRef"" ShowBackdrop Placement=""Placement.End"" Size=""OffcanvasSize.Small"">
2790+
<OffcanvasHeader>
2791+
Small End Offcanvas
2792+
<CloseButton Clicked=""@(() => HideOffcanvas( offcanvasEndSmallRef ))"" />
2793+
</OffcanvasHeader>
2794+
<OffcanvasBody>
2795+
Small size applied to an end-positioned offcanvas.
2796+
</OffcanvasBody>
2797+
</Offcanvas>
2798+
2799+
<Offcanvas @ref=""offcanvasEndLargeRef"" ShowBackdrop Placement=""Placement.End"" Size=""OffcanvasSize.Large"">
2800+
<OffcanvasHeader>
2801+
Large End Offcanvas
2802+
<CloseButton Clicked=""@(() => HideOffcanvas( offcanvasEndLargeRef ))"" />
2803+
</OffcanvasHeader>
2804+
<OffcanvasBody>
2805+
Large size applied to an end-positioned offcanvas.
2806+
</OffcanvasBody>
2807+
</Offcanvas>
2808+
2809+
<Offcanvas @ref=""offcanvasEndExtraLargeRef"" ShowBackdrop Placement=""Placement.End"" Size=""OffcanvasSize.ExtraLarge"">
2810+
<OffcanvasHeader>
2811+
Extra Large End Offcanvas
2812+
<CloseButton Clicked=""@(() => HideOffcanvas( offcanvasEndExtraLargeRef ))"" />
2813+
</OffcanvasHeader>
2814+
<OffcanvasBody>
2815+
Extra large size applied to an end-positioned offcanvas.
2816+
</OffcanvasBody>
2817+
</Offcanvas>
2818+
2819+
<Offcanvas @ref=""offcanvasEndFullscreenRef"" ShowBackdrop Placement=""Placement.End"" Size=""OffcanvasSize.Fullscreen"">
2820+
<OffcanvasHeader>
2821+
Fullscreen End Offcanvas
2822+
<CloseButton Clicked=""@(() => HideOffcanvas( offcanvasEndFullscreenRef ))"" />
2823+
</OffcanvasHeader>
2824+
<OffcanvasBody>
2825+
Fullscreen size applied to an end-positioned offcanvas.
2826+
</OffcanvasBody>
2827+
</Offcanvas>
2828+
2829+
<Offcanvas @ref=""offcanvasTopSmallRef"" ShowBackdrop Placement=""Placement.Top"" Size=""OffcanvasSize.Small"">
2830+
<OffcanvasHeader>
2831+
Small Top Offcanvas
2832+
<CloseButton Clicked=""@(() => HideOffcanvas( offcanvasTopSmallRef ))"" />
2833+
</OffcanvasHeader>
2834+
<OffcanvasBody>
2835+
Small size applied to a top-positioned offcanvas.
2836+
</OffcanvasBody>
2837+
</Offcanvas>
2838+
2839+
<Offcanvas @ref=""offcanvasTopLargeRef"" ShowBackdrop Placement=""Placement.Top"" Size=""OffcanvasSize.Large"">
2840+
<OffcanvasHeader>
2841+
Large Top Offcanvas
2842+
<CloseButton Clicked=""@(() => HideOffcanvas( offcanvasTopLargeRef ))"" />
2843+
</OffcanvasHeader>
2844+
<OffcanvasBody>
2845+
Large size applied to a top-positioned offcanvas.
2846+
</OffcanvasBody>
2847+
</Offcanvas>
2848+
2849+
<Offcanvas @ref=""offcanvasTopExtraLargeRef"" ShowBackdrop Placement=""Placement.Top"" Size=""OffcanvasSize.ExtraLarge"">
2850+
<OffcanvasHeader>
2851+
Extra Large Top Offcanvas
2852+
<CloseButton Clicked=""@(() => HideOffcanvas( offcanvasTopExtraLargeRef ))"" />
2853+
</OffcanvasHeader>
2854+
<OffcanvasBody>
2855+
Extra large size applied to a top-positioned offcanvas.
2856+
</OffcanvasBody>
2857+
</Offcanvas>
2858+
2859+
<Offcanvas @ref=""offcanvasTopFullscreenRef"" ShowBackdrop Placement=""Placement.Top"" Size=""OffcanvasSize.Fullscreen"">
2860+
<OffcanvasHeader>
2861+
Fullscreen Top Offcanvas
2862+
<CloseButton Clicked=""@(() => HideOffcanvas( offcanvasTopFullscreenRef ))"" />
2863+
</OffcanvasHeader>
2864+
<OffcanvasBody>
2865+
Fullscreen size applied to a top-positioned offcanvas.
2866+
</OffcanvasBody>
2867+
</Offcanvas>
2868+
2869+
<Div Margin=""Margin.Is3.FromBottom"">
2870+
<Button Color=""Color.Primary"" Margin=""Margin.Is2.FromEnd"" Clicked=""@(() => ShowOffcanvas( Placement.End, OffcanvasSize.Small ))"">Small End</Button>
2871+
<Button Color=""Color.Primary"" Margin=""Margin.Is2.FromEnd"" Clicked=""@(() => ShowOffcanvas( Placement.End, OffcanvasSize.Large ))"">Large End</Button>
2872+
<Button Color=""Color.Primary"" Margin=""Margin.Is2.FromEnd"" Clicked=""@(() => ShowOffcanvas( Placement.End, OffcanvasSize.ExtraLarge ))"">Extra Large End</Button>
2873+
<Button Color=""Color.Primary"" Margin=""Margin.Is2.FromEnd"" Clicked=""@(() => ShowOffcanvas( Placement.End, OffcanvasSize.Fullscreen ))"">Fullscreen End</Button>
2874+
</Div>
2875+
<Div>
2876+
<Button Color=""Color.Secondary"" Margin=""Margin.Is2.FromEnd"" Clicked=""@(() => ShowOffcanvas( Placement.Top, OffcanvasSize.Small ))"">Small Top</Button>
2877+
<Button Color=""Color.Secondary"" Margin=""Margin.Is2.FromEnd"" Clicked=""@(() => ShowOffcanvas( Placement.Top, OffcanvasSize.Large ))"">Large Top</Button>
2878+
<Button Color=""Color.Secondary"" Margin=""Margin.Is2.FromEnd"" Clicked=""@(() => ShowOffcanvas( Placement.Top, OffcanvasSize.ExtraLarge ))"">Extra Large Top</Button>
2879+
<Button Color=""Color.Secondary"" Clicked=""@(() => ShowOffcanvas( Placement.Top, OffcanvasSize.Fullscreen ))"">Fullscreen Top</Button>
2880+
</Div>
2881+
2882+
@code {
2883+
private Offcanvas offcanvasEndSmallRef;
2884+
private Offcanvas offcanvasEndLargeRef;
2885+
private Offcanvas offcanvasEndExtraLargeRef;
2886+
private Offcanvas offcanvasEndFullscreenRef;
2887+
private Offcanvas offcanvasTopSmallRef;
2888+
private Offcanvas offcanvasTopLargeRef;
2889+
private Offcanvas offcanvasTopExtraLargeRef;
2890+
private Offcanvas offcanvasTopFullscreenRef;
2891+
2892+
private Task ShowOffcanvas( Placement nextPlacement, OffcanvasSize nextSize )
2893+
{
2894+
return (nextPlacement, nextSize) switch
2895+
{
2896+
(Placement.End, OffcanvasSize.Small ) => offcanvasEndSmallRef.Show(),
2897+
(Placement.End, OffcanvasSize.Large ) => offcanvasEndLargeRef.Show(),
2898+
(Placement.End, OffcanvasSize.ExtraLarge ) => offcanvasEndExtraLargeRef.Show(),
2899+
(Placement.End, OffcanvasSize.Fullscreen ) => offcanvasEndFullscreenRef.Show(),
2900+
(Placement.Top, OffcanvasSize.Small ) => offcanvasTopSmallRef.Show(),
2901+
(Placement.Top, OffcanvasSize.Large ) => offcanvasTopLargeRef.Show(),
2902+
(Placement.Top, OffcanvasSize.ExtraLarge ) => offcanvasTopExtraLargeRef.Show(),
2903+
(Placement.Top, OffcanvasSize.Fullscreen ) => offcanvasTopFullscreenRef.Show(),
2904+
_ => Task.CompletedTask,
2905+
};
2906+
}
2907+
2908+
private Task HideOffcanvas( Offcanvas offcanvas )
2909+
{
2910+
return offcanvas.Hide();
2911+
}
2912+
}";
2913+
27892914
public const string OffcanvasStartExample = @"<Offcanvas @ref=""offcanvasRef"" ShowBackdrop Placement=""Placement.Start"">
27902915
<OffcanvasHeader>
27912916
Offcanvas Start
@@ -15488,6 +15613,40 @@ public Task ShowCounter()
1548815613

1548915614
<OffcanvasProvider UseOffcanvasStructure Animated Placement=""Placement.Start"" />";
1549015615

15616+
public const string OffcanvasProviderSizeExample = @"<Div Margin=""Margin.Is3.FromBottom"">
15617+
<Button Color=""Color.Primary"" Margin=""Margin.Is2.FromEnd"" Clicked=""@(() => ShowOffcanvas( Placement.End, OffcanvasSize.Small ))"">Small End</Button>
15618+
<Button Color=""Color.Primary"" Margin=""Margin.Is2.FromEnd"" Clicked=""@(() => ShowOffcanvas( Placement.End, OffcanvasSize.Large ))"">Large End</Button>
15619+
<Button Color=""Color.Primary"" Margin=""Margin.Is2.FromEnd"" Clicked=""@(() => ShowOffcanvas( Placement.End, OffcanvasSize.ExtraLarge ))"">Extra Large End</Button>
15620+
<Button Color=""Color.Primary"" Margin=""Margin.Is2.FromEnd"" Clicked=""@(() => ShowOffcanvas( Placement.End, OffcanvasSize.Fullscreen ))"">Fullscreen End</Button>
15621+
</Div>
15622+
<Div>
15623+
<Button Color=""Color.Secondary"" Margin=""Margin.Is2.FromEnd"" Clicked=""@(() => ShowOffcanvas( Placement.Top, OffcanvasSize.Small ))"">Small Top</Button>
15624+
<Button Color=""Color.Secondary"" Margin=""Margin.Is2.FromEnd"" Clicked=""@(() => ShowOffcanvas( Placement.Top, OffcanvasSize.Large ))"">Large Top</Button>
15625+
<Button Color=""Color.Secondary"" Margin=""Margin.Is2.FromEnd"" Clicked=""@(() => ShowOffcanvas( Placement.Top, OffcanvasSize.ExtraLarge ))"">Extra Large Top</Button>
15626+
<Button Color=""Color.Secondary"" Clicked=""@(() => ShowOffcanvas( Placement.Top, OffcanvasSize.Fullscreen ))"">Fullscreen Top</Button>
15627+
</Div>
15628+
15629+
@code {
15630+
[Inject] public IOffcanvasService OffcanvasService { get; set; }
15631+
15632+
private Task ShowOffcanvas( Placement placement, OffcanvasSize size )
15633+
{
15634+
RenderFragment content = builder =>
15635+
{
15636+
builder.AddContent( 0, $""Placement {placement} with size {size}."" );
15637+
};
15638+
15639+
return OffcanvasService.Show(
15640+
$""{size} {placement} Offcanvas"",
15641+
content,
15642+
new OffcanvasInstanceOptions()
15643+
{
15644+
Placement = placement,
15645+
Size = size
15646+
} );
15647+
}
15648+
}";
15649+
1549115650
public const string OffcanvasProviderStatefulExample = @"<Button Color=""Color.Primary"" Clicked=""ShowStateful"">Show Stateful</Button>
1549215651

1549315652
@code {

0 commit comments

Comments
 (0)