From 3f653fed5f0c23b3746e4ae970f555c28124794f Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Wed, 21 Jul 2021 13:31:28 +0300 Subject: [PATCH 1/8] kb(drawer):add kb for expand/collapse drawer handle --- .../drawer-add-expand-collapse-handle.md | 99 +++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 knowledge-base/drawer-add-expand-collapse-handle.md diff --git a/knowledge-base/drawer-add-expand-collapse-handle.md b/knowledge-base/drawer-add-expand-collapse-handle.md new file mode 100644 index 0000000000..b3f8cc4433 --- /dev/null +++ b/knowledge-base/drawer-add-expand-collapse-handle.md @@ -0,0 +1,99 @@ +--- +title: Add Expand/Collapse Handle to toggle the Drawer +description: How to add Expand/Collapse Handle to toggle the Drawer? +type: how-to +page_title: Add Expand/Collapse Handle to toggle the Drawer +slug: drawer-kb-add-expand-collapse-handle +position: +tags: telerik, blazor, drawer, expand, collapse, handle +ticketid: 1527830 +res_type: kb +--- + +## Environment + + + + + + + +
ProductDrawer for Blazor
+ + +## Description + +It would be nice to have a handle feature within the rendered Drawer component that would expand and collapse the component. + +## Solution + +To achieve the desired result you can try the following: + +* Add a Telerik Button +* Toggle the Drawer on click of that button +* Use some custom CSS to style the button as desired (appearance, position, transition etc.) + +The example below demonstrates the described approach: + +````CSHTML +@* Add Expand/Collapse handle to toggle the Drawer *@ + + + + + + + @* Place your contents here - it can be as simple as text, it can be conditional components or components that take the selected item as a parameter, or even the @Body tag for navigation if you place the drawer high enough in the project layout hierarchy *@ +
+ Selected Item: @SelectedItem?.Text +
+ + + + +@code { + public bool ExpandedDrawer { get; set; } + + TelerikDrawer DrawerRef { get; set; } + + DrawerItem SelectedItem { get; set; } + + IEnumerable Data { get; set; } = + new List + { + new DrawerItem { Text = "Counter", Icon = "plus"}, + new DrawerItem { Text = "FetchData", Icon = "grid-layout"} + }; + + public class DrawerItem + { + public string Text { get; set; } + public string Icon { get; set; } + } +} +```` From 191f8a9a67c94e3ce6901876ddc90a17b352ea81 Mon Sep 17 00:00:00 2001 From: ntacheva <73842592+ntacheva@users.noreply.github.com> Date: Wed, 21 Jul 2021 14:45:42 +0300 Subject: [PATCH 2/8] Update knowledge-base/drawer-add-expand-collapse-handle.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/drawer-add-expand-collapse-handle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/drawer-add-expand-collapse-handle.md b/knowledge-base/drawer-add-expand-collapse-handle.md index b3f8cc4433..ecd6320386 100644 --- a/knowledge-base/drawer-add-expand-collapse-handle.md +++ b/knowledge-base/drawer-add-expand-collapse-handle.md @@ -23,7 +23,7 @@ res_type: kb ## Description -It would be nice to have a handle feature within the rendered Drawer component that would expand and collapse the component. +How to add a handle feature within the rendered Drawer component that would expand and collapse the component? ## Solution From b2d1c29227adbc8219bb869f8b5d57c708bb6026 Mon Sep 17 00:00:00 2001 From: ntacheva <73842592+ntacheva@users.noreply.github.com> Date: Wed, 21 Jul 2021 14:45:52 +0300 Subject: [PATCH 3/8] Update knowledge-base/drawer-add-expand-collapse-handle.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/drawer-add-expand-collapse-handle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/drawer-add-expand-collapse-handle.md b/knowledge-base/drawer-add-expand-collapse-handle.md index ecd6320386..cca929af72 100644 --- a/knowledge-base/drawer-add-expand-collapse-handle.md +++ b/knowledge-base/drawer-add-expand-collapse-handle.md @@ -1,5 +1,5 @@ --- -title: Add Expand/Collapse Handle to toggle the Drawer +title: Add Expand/Collapse Handle to Toggle the Drawer description: How to add Expand/Collapse Handle to toggle the Drawer? type: how-to page_title: Add Expand/Collapse Handle to toggle the Drawer From 796ff7f1091505e6e4c3729790ad1d2f9766cc44 Mon Sep 17 00:00:00 2001 From: ntacheva <73842592+ntacheva@users.noreply.github.com> Date: Wed, 21 Jul 2021 14:46:02 +0300 Subject: [PATCH 4/8] Update knowledge-base/drawer-add-expand-collapse-handle.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/drawer-add-expand-collapse-handle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/drawer-add-expand-collapse-handle.md b/knowledge-base/drawer-add-expand-collapse-handle.md index cca929af72..90d79e7edf 100644 --- a/knowledge-base/drawer-add-expand-collapse-handle.md +++ b/knowledge-base/drawer-add-expand-collapse-handle.md @@ -1,6 +1,6 @@ --- title: Add Expand/Collapse Handle to Toggle the Drawer -description: How to add Expand/Collapse Handle to toggle the Drawer? +description: This demo shows how to add expand/collapse handle to toggle the Telerik Blazor Drawer. type: how-to page_title: Add Expand/Collapse Handle to toggle the Drawer slug: drawer-kb-add-expand-collapse-handle From c68e1e10b304cae839b538e431ed20b2ca2d5cd7 Mon Sep 17 00:00:00 2001 From: ntacheva <73842592+ntacheva@users.noreply.github.com> Date: Wed, 21 Jul 2021 14:46:20 +0300 Subject: [PATCH 5/8] Update knowledge-base/drawer-add-expand-collapse-handle.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/drawer-add-expand-collapse-handle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/drawer-add-expand-collapse-handle.md b/knowledge-base/drawer-add-expand-collapse-handle.md index 90d79e7edf..bfd8446af1 100644 --- a/knowledge-base/drawer-add-expand-collapse-handle.md +++ b/knowledge-base/drawer-add-expand-collapse-handle.md @@ -31,7 +31,7 @@ To achieve the desired result you can try the following: * Add a Telerik Button * Toggle the Drawer on click of that button -* Use some custom CSS to style the button as desired (appearance, position, transition etc.) +* Use custom CSS to adjust the button's appearance, position, transition etc. The example below demonstrates the described approach: From d65ac691b35010d6aa67f2b60584a5c2e6bb93a3 Mon Sep 17 00:00:00 2001 From: ntacheva <73842592+ntacheva@users.noreply.github.com> Date: Wed, 21 Jul 2021 14:46:31 +0300 Subject: [PATCH 6/8] Update knowledge-base/drawer-add-expand-collapse-handle.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/drawer-add-expand-collapse-handle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/drawer-add-expand-collapse-handle.md b/knowledge-base/drawer-add-expand-collapse-handle.md index bfd8446af1..fd9d116cc3 100644 --- a/knowledge-base/drawer-add-expand-collapse-handle.md +++ b/knowledge-base/drawer-add-expand-collapse-handle.md @@ -45,7 +45,7 @@ The example below demonstrates the described approach: border: 1px solid rgba(0, 0, 0, 0.08); z-index: 1; background-color: #fff; - transition-duration:0.3s; + transition-duration:0.3s; /* match the Drawer's animation duration */ } .my-toggle-button.collapsed { From 142b046f9b360375e160cc85ba02df830c89c433 Mon Sep 17 00:00:00 2001 From: ntacheva <73842592+ntacheva@users.noreply.github.com> Date: Wed, 21 Jul 2021 14:46:45 +0300 Subject: [PATCH 7/8] Update knowledge-base/drawer-add-expand-collapse-handle.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/drawer-add-expand-collapse-handle.md | 1 + 1 file changed, 1 insertion(+) diff --git a/knowledge-base/drawer-add-expand-collapse-handle.md b/knowledge-base/drawer-add-expand-collapse-handle.md index fd9d116cc3..cfcc3e8020 100644 --- a/knowledge-base/drawer-add-expand-collapse-handle.md +++ b/knowledge-base/drawer-add-expand-collapse-handle.md @@ -60,6 +60,7 @@ The example below demonstrates the described approach: + Date: Wed, 21 Jul 2021 14:54:09 +0300 Subject: [PATCH 8/8] Update knowledge-base/drawer-add-expand-collapse-handle.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/drawer-add-expand-collapse-handle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/drawer-add-expand-collapse-handle.md b/knowledge-base/drawer-add-expand-collapse-handle.md index cfcc3e8020..3eb2153d4b 100644 --- a/knowledge-base/drawer-add-expand-collapse-handle.md +++ b/knowledge-base/drawer-add-expand-collapse-handle.md @@ -2,7 +2,7 @@ title: Add Expand/Collapse Handle to Toggle the Drawer description: This demo shows how to add expand/collapse handle to toggle the Telerik Blazor Drawer. type: how-to -page_title: Add Expand/Collapse Handle to toggle the Drawer +page_title: Add Expand/Collapse Handle to Toggle the Drawer slug: drawer-kb-add-expand-collapse-handle position: tags: telerik, blazor, drawer, expand, collapse, handle