-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(module:menu): support auto active menu-item via routerLink
- Loading branch information
Showing
17 changed files
with
418 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,191 @@ | ||
| @import '../../style/themes/index'; | ||
| @import '../../style/mixins/index'; | ||
|
|
||
| @badge-prefix-cls: ~'@{ant-prefix}-badge'; | ||
| @number-prefix-cls: ~'@{ant-prefix}-scroll-number'; | ||
|
|
||
| .@{badge-prefix-cls} { | ||
| .reset-component; | ||
|
|
||
| position: relative; | ||
| display: inline-block; | ||
| color: unset; | ||
| line-height: 1; | ||
|
|
||
| &-count { | ||
| z-index: @zindex-badge; | ||
| min-width: @badge-height; | ||
| height: @badge-height; | ||
| padding: 0 6px; | ||
| color: @badge-text-color; | ||
| font-weight: @badge-font-weight; | ||
| font-size: @badge-font-size; | ||
| line-height: @badge-height; | ||
| white-space: nowrap; | ||
| text-align: center; | ||
| background: @highlight-color; | ||
| border-radius: @badge-height / 2; | ||
| box-shadow: 0 0 0 1px @shadow-color-inverse; | ||
| a, | ||
| a:hover { | ||
| color: @badge-text-color; | ||
| } | ||
| } | ||
|
|
||
| &-multiple-words { | ||
| padding: 0 8px; | ||
| } | ||
|
|
||
| &-dot { | ||
| z-index: @zindex-badge; | ||
| width: @badge-dot-size; | ||
| height: @badge-dot-size; | ||
| background: @highlight-color; | ||
| border-radius: 100%; | ||
| box-shadow: 0 0 0 1px @shadow-color-inverse; | ||
| } | ||
|
|
||
| &-count, | ||
| &-dot, | ||
| .@{number-prefix-cls}-custom-component { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| transform: translate(50%, -50%); | ||
| transform-origin: 100% 0%; | ||
| } | ||
|
|
||
| &-status { | ||
| line-height: inherit; | ||
| vertical-align: baseline; | ||
|
|
||
| &-dot { | ||
| position: relative; | ||
| top: -1px; | ||
| display: inline-block; | ||
| width: @badge-status-size; | ||
| height: @badge-status-size; | ||
| vertical-align: middle; | ||
| border-radius: 50%; | ||
| } | ||
| &-success { | ||
| background-color: @success-color; | ||
| } | ||
| &-processing { | ||
| position: relative; | ||
| background-color: @processing-color; | ||
| &::after { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| border: 1px solid @processing-color; | ||
| border-radius: 50%; | ||
| animation: antStatusProcessing 1.2s infinite ease-in-out; | ||
| content: ''; | ||
| } | ||
| } | ||
| &-default { | ||
| background-color: @normal-color; | ||
| } | ||
| &-error { | ||
| background-color: @error-color; | ||
| } | ||
| &-warning { | ||
| background-color: @warning-color; | ||
| } | ||
|
|
||
| // mixin to iterate over colors and create CSS class for each one | ||
| .make-color-classes(@i: length(@preset-colors)) when (@i > 0) { | ||
| .make-color-classes(@i - 1); | ||
| @color: extract(@preset-colors, @i); | ||
| @darkColor: '@{color}-6'; | ||
| &-@{color} { | ||
| background: @@darkColor; | ||
| } | ||
| } | ||
| .make-color-classes(); | ||
|
|
||
| &-text { | ||
| margin-left: 8px; | ||
| color: @text-color; | ||
| font-size: @font-size-base; | ||
| } | ||
| } | ||
|
|
||
| &-zoom-appear, | ||
| &-zoom-enter { | ||
| animation: antZoomBadgeIn 0.3s @ease-out-back; | ||
| animation-fill-mode: both; | ||
| } | ||
|
|
||
| &-zoom-leave { | ||
| animation: antZoomBadgeOut 0.3s @ease-in-back; | ||
| animation-fill-mode: both; | ||
| } | ||
|
|
||
| &-not-a-wrapper { | ||
| &:not(.@{badge-prefix-cls}-status) { | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| .@{ant-prefix}-scroll-number { | ||
| position: relative; | ||
| top: auto; | ||
| display: block; | ||
| } | ||
|
|
||
| .@{badge-prefix-cls}-count { | ||
| transform: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @keyframes antStatusProcessing { | ||
| 0% { | ||
| transform: scale(0.8); | ||
| opacity: 0.5; | ||
| } | ||
| 100% { | ||
| transform: scale(2.4); | ||
| opacity: 0; | ||
| } | ||
| } | ||
|
|
||
| .@{number-prefix-cls} { | ||
| overflow: hidden; | ||
| &-only { | ||
| display: inline-block; | ||
| height: @badge-height; | ||
| transition: all 0.3s @ease-in-out; | ||
| > p { | ||
| height: @badge-height; | ||
| margin: 0; | ||
| } | ||
| } | ||
|
|
||
| &-symbol { | ||
| vertical-align: top; | ||
| } | ||
| } | ||
|
|
||
| @keyframes antZoomBadgeIn { | ||
| 0% { | ||
| transform: scale(0) translate(50%, -50%); | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| transform: scale(1) translate(50%, -50%); | ||
| } | ||
| } | ||
|
|
||
| @keyframes antZoomBadgeOut { | ||
| 0% { | ||
| transform: scale(1) translate(50%, -50%); | ||
| } | ||
| 100% { | ||
| transform: scale(0) translate(50%, -50%); | ||
| opacity: 0; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| --- | ||
| order: 6 | ||
| order: 7 | ||
| title: | ||
| zh-CN: 递归生成菜单 | ||
| en-US: Recursive | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| order: 6 | ||
| title: | ||
| zh-CN: 配合路由使用 | ||
| en-US: Router | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| 自动根据路由激活菜单项，需要结合 [routerLink](https://www.angular.cn/api/router/RouterLink) 一起使用。 | ||
|
|
||
| ## en-US | ||
|
|
||
| Automatically activate menu items based on routing, should work with [routerLink](https://angular.io/api/router/RouterLink). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'nz-demo-menu-router', | ||
| template: ` | ||
| <ul nz-menu nzMode="horizontal"> | ||
| <li nz-menu-item nzMatchRouter> | ||
| <a [routerLink]="['/', 'components', 'menu', 'en']">English Menu Document</a> | ||
| </li> | ||
| <li nz-menu-item nzMatchRouter> | ||
| <a [routerLink]="['/', 'components', 'menu', 'zh']">Chinese Menu Document</a> | ||
| </li> | ||
| </ul> | ||
| ` | ||
| }) | ||
| export class NzDemoMenuRouterComponent {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.