Skip to content

fix(nav-drawer, blazor): fixing the IgbNavDrawer icon usage doc #458

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kdinev wants to merge 1 commit into
base: vnext
Choose a base branch
from
Open

fix(nav-drawer, blazor): fixing the IgbNavDrawer icon usage doc #458

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 53 additions & 8 deletions docs/xplat/src/content/en/components/menus/navigation-drawer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,9 @@ Before using the <ApiLink pkg="core" type="NavDrawer" />, you need to register i

builder.Services.AddIgniteUIBlazor(
typeof(IgbNavDrawerModule),
typeof(IgbNavDrawerHeaderItemModule)
typeof(IgbNavDrawerHeaderItemModule),
typeof(IgbNavDrawerItemModule),
typeof(IgbIconModule)
Comment on lines +76 to +78

@damyanpetev damyanpetev Jul 22, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The IgbNavDrawerModule should have the item and header included already IIRC;
So only that and the icon should be quite enough:

Suggested change
typeof(IgbNavDrawerHeaderItemModule),
typeof(IgbNavDrawerItemModule),
typeof(IgbIconModule)
typeof(IgbIconModule),

);
```

Expand Down Expand Up @@ -132,20 +134,36 @@ The simplest way to start using the <ApiLink pkg="core" type="NavDrawer" /> is a

<PlatformBlock for="Blazor">

The icons used throughout the examples in this topic come from the `material` collection and have to be registered before the <ApiLink pkg="core" type="Icon" /> component can render them. Registering an icon requires a reference to a single <ApiLink pkg="core" type="Icon" /> element on the page, on which the <ApiLink pkg="core" type="Icon" member="registerIcon" label="RegisterIcon" /> method is called. For more details, see the [Icon](../layouts/icon.mdx) topic.

@damyanpetev damyanpetev Jul 22, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pretty sure the core is either not relevant for Blazor and/or can become an issue once we start breaking down those packages with Lite in the mix.
I'd also restrain from repeating the methodology and just go with "need to be registered, see topic". Again, due to the mechanism being a byproduct of generation, less than ideal and subject to change for the better :)
//2c


```razor
<IgbNavDrawer Open="true">
<IgbNavDrawerHeaderItem>
Sample Drawer
</IgbNavDrawerHeaderItem>
<IgbNavDrawerItem>
<IgbIcon @ref="@HomeIcon" slot="icon" IconName="home" Collection="material"></IgbIcon>
<IgbIcon @ref="@IconRef" slot="icon" IconName="home" Collection="material"></IgbIcon>
<span slot="content">Home</span>
</IgbNavDrawerItem>
<IgbNavDrawerItem>
<IgbIcon @ref="@SearchIcon" slot="icon" IconName="search" Collection="material"></IgbIcon>
<IgbIcon slot="icon" IconName="search" Collection="material"></IgbIcon>
<span slot="content">Search</span>
</IgbNavDrawerItem>
</IgbNavDrawer>

@code {
private IgbIcon IconRef { get; set; }

protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
if (this.IconRef != null && firstRender)
{
this.IconRef.RegisterIcon("home", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg", "material");
this.IconRef.RegisterIcon("search", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_search_24px.svg", "material");
}
}
}
```

</PlatformBlock>
Expand Down Expand Up @@ -216,7 +234,7 @@ To enhance our component a bit, we can use it in conjunction with the <ApiLink p

```razor
<IgbNavbar>
<IgbIcon slot="start" IconName="menu" Collection="material" />
<IgbIcon @ref="@IconRef" slot="start" IconName="menu" Collection="material" @onclick="OnMenuIconClick" />
<h2>Home</h2>
</IgbNavbar>

Expand All @@ -229,7 +247,7 @@ To enhance our component a bit, we can use it in conjunction with the <ApiLink p
<span slot="content">Home</span>
</IgbNavDrawerItem>
<IgbNavDrawerItem>
<IgbIcon slot="icon" IconName="search" Collection="material" @onclick="OnMenuIconClick" />
<IgbIcon slot="icon" IconName="search" Collection="material" />
<span slot="content">Search</span>
</IgbNavDrawerItem>
</IgbNavDrawer>
Expand Down Expand Up @@ -313,6 +331,19 @@ this.radioGroup.addEventListener('click', (radio: any) => {

public IgbNavDrawer NavDrawerRef { get; set; }

private IgbIcon IconRef { get; set; }

protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
Comment on lines +334 to +338
if (this.IconRef != null && firstRender)
{
this.IconRef.RegisterIcon("menu", "https://unpkg.com/material-design-icons@3.0.1/navigation/svg/production/ic_menu_24px.svg", "material");
this.IconRef.RegisterIcon("home", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg", "material");
this.IconRef.RegisterIcon("search", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_search_24px.svg", "material");
}
}

public void OnRadioOptionClick(IgbComponentBoolValueChangedEventArgs args)
{
IgbRadio radio = args.Parent as IgbRadio;
Expand Down Expand Up @@ -466,16 +497,16 @@ With the mini variant, the Navigation Drawer changes its width instead of closin
<PlatformBlock for="Blazor">

```razor
<IgbNavDrawer @ref="@NavDrawerRef" Open="true" style="position: relative">
<IgbNavDrawer Open="true" style="position: relative">

@damyanpetev damyanpetev Jul 22, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(0.o)
Unrelated, but like.. the position style has no business on this component

Suggested change
<IgbNavDrawer Open="true" style="position: relative">
<IgbNavDrawer Open="true">

<IgbNavDrawerHeaderItem>
Sample Drawer
</IgbNavDrawerHeaderItem>
<IgbNavDrawerItem>
<IgbIcon @ref="@HomeIcon" slot="icon" Collection="material" IconName="home" />
<IgbIcon @ref="@IconRef" slot="icon" Collection="material" IconName="home" />
<span slot="content">Home</span>
</IgbNavDrawerItem>
<IgbNavDrawerItem>
<IgbIcon @ref="@SearchIcon" slot="icon" Collection="material" IconName="search" />
<IgbIcon slot="icon" Collection="material" IconName="search" />
<span slot="content">Search</span>
</IgbNavDrawerItem>
<div slot="mini">
Expand All @@ -487,6 +518,20 @@ With the mini variant, the Navigation Drawer changes its width instead of closin
</IgbNavDrawerItem>
</div>
</IgbNavDrawer>

@code {
private IgbIcon IconRef { get; set; }

protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
if (this.IconRef != null && firstRender)
{
this.IconRef.RegisterIcon("home", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg", "material");
this.IconRef.RegisterIcon("search", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_search_24px.svg", "material");
}
}
}
```

</PlatformBlock>
Expand Down
Loading