From 36b098dcb082395d0817b7853b76bd7d4d6f5a45 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 16 Feb 2024 13:44:41 +0200 Subject: [PATCH] Merge kb-drawer-tooltip-1930 into production (#1933) * docs(drawer|tooltip): Update KB * docs(drawer): Add explanations for navlinks and navigation --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/drawer/navigation.md | 26 ++++----- components/drawer/templates.md | 2 + knowledge-base/drawer-add-tooltip.md | 84 ++++++++++++++++++---------- 3 files changed, 69 insertions(+), 43 deletions(-) diff --git a/components/drawer/navigation.md b/components/drawer/navigation.md index de0725583..e5bf85968 100644 --- a/components/drawer/navigation.md +++ b/components/drawer/navigation.md @@ -18,7 +18,8 @@ To use the Drawer for navigating between pages: * Put the `@Body` tag in the `` tag of the drawer. * Provide a collection of models that describe the pages you want the user to navigate to. ->tip You can find a runnable sample that showcases this in the [Drawer as Side Navigation](https://github.com/telerik/blazor-ui/tree/master/drawer/sidenav) sample project. +@[template](/_contentTemplates/common/navigation-components.md#navman-used) +@[template](/_contentTemplates/common/navigation-components.md#double-navigation) >caption Use the Drawer for Navigation in `MainLayout.razor` @@ -41,14 +42,13 @@ To use the Drawer for navigating between pages: @code{ - List NavigablePages { get; set; } = - new List - { - new DrawerItem { Text = "Home", Url = "/", Icon = SvgIcon.Home }, - new DrawerItem { Separator = true }, - new DrawerItem { Text = "Counter", Url = "counter", Icon = SvgIcon.PlusOutline }, - new DrawerItem { Text = "FetchData", Url = "fetchdata", Icon = SvgIcon.Grid } - }; + List NavigablePages { get; set; } = new List + { + new DrawerItem { Text = "Home", Url = "/", Icon = SvgIcon.Home }, + new DrawerItem { Separator = true }, + new DrawerItem { Text = "Counter", Url = "counter", Icon = SvgIcon.PlusOutline }, + new DrawerItem { Text = "FetchData", Url = "fetchdata", Icon = SvgIcon.Grid } + }; public class DrawerItem { @@ -60,13 +60,11 @@ To use the Drawer for navigating between pages: } ```` +## Additional Examples -## Notes - -@[template](/_contentTemplates/common/navigation-components.md#navman-used) -@[template](/_contentTemplates/common/navigation-components.md#double-navigation) +* A GitHub sample project that showcases [Drawer as side navigation](https://github.com/telerik/blazor-ui/tree/master/drawer/sidenav). +* KB article on [how to select a Drawer item when the page loads]({%slug drawer-kb-sync-selected-item%}). -* You may also find useful [this article on selecting a Drawer item when a page loads]({%slug drawer-kb-sync-selected-item%}). ## See Also diff --git a/components/drawer/templates.md b/components/drawer/templates.md index ec7cb059a..9b206002e 100644 --- a/components/drawer/templates.md +++ b/components/drawer/templates.md @@ -21,6 +21,8 @@ The `` controls the rendering of the [data bound items]({%slug dra This template receives a `context` argument that is of the data model type and represents the current item. +When using an `ItemTemplate`, the Drawer can still [navigate automatically if the `UrlField` parameter is set, or if the Drawer data items have a popuplated `Url` property]({%slug drawer-navigation%}). + >caption Use ItemTemplate to control the rendering of the items in the Drawer. ````CSHTML diff --git a/knowledge-base/drawer-add-tooltip.md b/knowledge-base/drawer-add-tooltip.md index 37a8548d3..8dbfa64f6 100644 --- a/knowledge-base/drawer-add-tooltip.md +++ b/knowledge-base/drawer-add-tooltip.md @@ -6,70 +6,96 @@ page_title: Drawer tooltips slug: drawer-kb-tooltips position: tags: +ticketid: 1640720 res_type: kb --- ## Environment + - - - - - - + + + + + +
ProductDrawer for Blazor
ProductDrawer for Blazor
- ## Description I would like to add [Tooltips]({%slug tooltip-overview%}) to the [Drawer's]({%slug drawer-overview%}) navigation icons. - ## Solution To add a tooltip to the drawer navigation icons you have to use the [ItemTemplate]({%slug drawer-templates%}#itemtemplate) to set a `title` attribute to the desired element (like the `span` that contains the icon). If using a [TelerikTooltip](https://demos.telerik.com/blazor-ui/tooltip/overview), add a suitable CSS selector, which targets the span with the icon, to the `TargetSelector` parameter of the component. +When using an `ItemTemplate`, the Drawer can still [navigate automatically if the `UrlField` parameter is set, or if the Drawer data items have a popuplated `Url` property]({%slug drawer-navigation%}). + >caption Add a tooltip to the Drawer navigation icons ````CSHTML -@* Add a Telerik Tooltip to the Drawer *@ - - +

- Toggle drawer + Toggle Drawer

- + Mode="@DrawerMode.Push"> - + + @* When UrlField is set or there is Url property, the Drawer will navigate automatically. *@ + + + + @item.Text + + @* *** *@ + + @* When UrlField is not set and there is no Url property, navigate manually with NavLink or NavigationManager. *@ + + @* + + + + @item.Text + *@ + - + @code { - public TelerikDrawer DrawerRef { get; set; } - public IEnumerable Data { get; set; } = - new List - { - new DrawerItem { Title="Counter Title", Text = "Counter", Icon = SvgIcon.Plus, Url = "counter" }, - new DrawerItem { Title="FetchData Title", Text = "FetchData", Icon = SvgIcon.GridLayout, Url = "fetchdata" }, - }; + private TelerikDrawer? DrawerRef { get; set; } + + private IEnumerable DrawerData { get; set; } = new List + { + new DrawerItem { Title="Counter Title", Text = "Counter", Icon = SvgIcon.Plus, Url = "counter" }, + new DrawerItem { Title="FetchData Title", Text = "FetchData", Icon = SvgIcon.GridLayout, Url = "fetchdata" }, + }; + + private async Task ToggleDrawer() + { + await DrawerRef?.ToggleAsync(); + } public class DrawerItem { - public string Title { get; set; } - public string Text { get; set; } - public ISvgIcon Icon { get; set; } - public string Url { get; set; } + public string Title { get; set; } = string.Empty; + public string Text { get; set; } = string.Empty; + public ISvgIcon? Icon { get; set; } + public string Url { get; set; } = string.Empty; } } ```` -