Skip to content
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

docs(navigation-drawer): remove nav tag since it is added from the component itself #5989

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

docs(navigation-drawer): remove nav tag since it is added from the component itself #5989

Show file tree
Hide file tree
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
28 changes: 11 additions & 17 deletions en/components/navdrawer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,11 @@ import { IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent
<div class="content-wrap">
<igx-nav-drawer [isOpen]="true">
<ng-template igxDrawer>
<nav>
<span igxDrawerItem [isHeader]="true">Components</span>
<span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
<igx-icon fontSet="material">{{ item.name }}</igx-icon>
<span>{{ item.text }}</span>
</span>
</nav>
<span igxDrawerItem [isHeader]="true">Components</span>
<span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
<igx-icon fontSet="material">{{ item.name }}</igx-icon>
<span>{{ item.text }}</span>
</span>
</ng-template>
</igx-nav-drawer>
<main>
Expand Down Expand Up @@ -117,14 +115,12 @@ The [`igxRipple`](ripple.md) directive completes the look and feel:
<div class="content-wrap">
<igx-nav-drawer id="navigation" #drawer [isOpen]="true">
<ng-template igxDrawer>
<nav>
<span igxDrawerItem [isHeader]="true">Components</span>
<span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected"
igxRipple (click)="navigate(item)">
<igx-icon fontSet="material">{{ item.name }}</igx-icon>
<span>{{ item.text }}</span>
</span>
</nav>
</ng-template>
</igx-nav-drawer>
<main>
Expand Down Expand Up @@ -334,15 +330,13 @@ export class AppComponent {

<!-- ... -->
<ng-template igxDrawer>
<nav>
<span igxDrawerItem [isHeader]="true">Components</span>
<span igxDrawerItem [isHeader]="true">Components</span>

<span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
routerLinkActive #rla="routerLinkActive"
igxDrawerItem igxRipple [active]="rla.isActive">
{{item.name}}
</span>
</nav>
<span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
routerLinkActive #rla="routerLinkActive"
igxDrawerItem igxRipple [active]="rla.isActive">
{{item.name}}
</span>
</ng-template>
<!-- ... -->
```
Expand Down
28 changes: 11 additions & 17 deletions jp/components/navdrawer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,11 @@ import { IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent
<div class="content-wrap">
<igx-nav-drawer [isOpen]="true">
<ng-template igxDrawer>
<nav>
<span igxDrawerItem [isHeader]="true">Components</span>
<span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
<igx-icon fontSet="material">{{ item.name }}</igx-icon>
<span>{{ item.text }}</span>
</span>
</nav>
<span igxDrawerItem [isHeader]="true">Components</span>
<span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
<igx-icon fontSet="material">{{ item.name }}</igx-icon>
<span>{{ item.text }}</span>
</span>
</ng-template>
</igx-nav-drawer>
<main>
Expand Down Expand Up @@ -117,14 +115,12 @@ Drawer のコンテンツを igxDrawer ディレクティブでデコレート
<div class="content-wrap">
<igx-nav-drawer id="navigation" #drawer [isOpen]="true">
<ng-template igxDrawer>
<nav>
<span igxDrawerItem [isHeader]="true">Components</span>
<span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected"
igxRipple (click)="navigate(item)">
<igx-icon fontSet="material">{{ item.name }}</igx-icon>
<span>{{ item.text }}</span>
</span>
</nav>
</ng-template>
</igx-nav-drawer>
<main>
Expand Down Expand Up @@ -333,15 +329,13 @@ export class AppComponent {

<!-- ... -->
<ng-template igxDrawer>
<nav>
<span igxDrawerItem [isHeader]="true">Components</span>
<span igxDrawerItem [isHeader]="true">Components</span>

<span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
routerLinkActive #rla="routerLinkActive"
igxDrawerItem igxRipple [active]="rla.isActive">
{{item.name}}
</span>
</nav>
<span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
routerLinkActive #rla="routerLinkActive"
igxDrawerItem igxRipple [active]="rla.isActive">
{{item.name}}
</span>
</ng-template>
<!-- ... -->
```
Expand Down
26 changes: 10 additions & 16 deletions kr/components/navdrawer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,13 @@ While any content can be provided in the template, the [`igxDrawerItem`]({enviro
<div class="content-wrap">
<igx-nav-drawer id="navigation" #drawer [isOpen]="true">
<ng-template igxDrawer>
<nav>
<span igxDrawerItem [isHeader]="true"> Email Account </span>
<span igxDrawerItem igxRipple> Inbox </span>
<span igxDrawerItem igxRipple [active]="true"> Drafts </span>
<span igxDrawerItem igxRipple> Sent </span>
<span igxDrawerItem [isHeader]="true"> Folders </span>
<span igxDrawerItem igxRipple> Deleted </span>
<span igxDrawerItem igxRipple> Archive </span>
</nav>
</ng-template>
</igx-nav-drawer>
<main>
Expand Down Expand Up @@ -237,27 +235,23 @@ One way to tie in the active state is to directly use the [`routerLinkActive`](h
```html
<!-- ... -->
<ng-template igxDrawer>
<nav>
<span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
igxDrawerItem igxRipple
routerLinkActive="igx-nav-drawer__item--active" >
{{item.name}}
</span>
</nav>
<span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
igxDrawerItem igxRipple
routerLinkActive="igx-nav-drawer__item--active" >
{{item.name}}
</span>
</ng-template>
<!-- ... -->
```
This approach, of course, does not affect the actual directive active state and could be affected by styling changes. An alternative would be the more advanced use of `routerLinkActive` where it's assigned to a template variable and the `isActive` can be used for binding:
```html
<!-- ... -->
<ng-template igxDrawer>
<nav>
<span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
routerLinkActive #rla="routerLinkActive"
igxDrawerItem igxRipple [active]="rla.isActive">
{{item.name}}
</span>
</nav>
<span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
routerLinkActive #rla="routerLinkActive"
igxDrawerItem igxRipple [active]="rla.isActive">
{{item.name}}
</span>
</ng-template>
<!-- ... -->
```
Expand Down
Loading