Commit 21cc957ac58cc38d10f2a74ef44c3f1f64717990
1 parent
ab673ebc
update Menu
update Menu
Showing
4 changed files
with
42 additions
and
4 deletions
Show diff stats
src/components/menu/menu.vue
| @@ -45,7 +45,7 @@ | @@ -45,7 +45,7 @@ | ||
| 45 | `${prefixCls}`, | 45 | `${prefixCls}`, |
| 46 | { | 46 | { |
| 47 | [`${prefixCls}-${this.mode}`]: this.mode, | 47 | [`${prefixCls}-${this.mode}`]: this.mode, |
| 48 | - [`${prefixCls}-${this.theme}`]: this.theme | 48 | + [`${prefixCls}-${this.theme}`]: this.mode === 'horizontal' || (this.mode === 'vertical' && this.theme !== 'primary') |
| 49 | } | 49 | } |
| 50 | ] | 50 | ] |
| 51 | } | 51 | } |
src/styles/components/menu.less
| @@ -166,6 +166,11 @@ | @@ -166,6 +166,11 @@ | ||
| 166 | padding-left: 28px; | 166 | padding-left: 28px; |
| 167 | } | 167 | } |
| 168 | } | 168 | } |
| 169 | + &-dark&-vertical &-item-group{ | ||
| 170 | + &-title{ | ||
| 171 | + color: @text-color; | ||
| 172 | + } | ||
| 173 | + } | ||
| 169 | 174 | ||
| 170 | &-light&-vertical &-item{ | 175 | &-light&-vertical &-item{ |
| 171 | border-right: 2px solid transparent; | 176 | border-right: 2px solid transparent; |
| @@ -175,5 +180,30 @@ | @@ -175,5 +180,30 @@ | ||
| 175 | z-index: 2; | 180 | z-index: 2; |
| 176 | } | 181 | } |
| 177 | } | 182 | } |
| 183 | + | ||
| 184 | + &-dark&-vertical &-item, &-dark&-vertical &-submenu-title{ | ||
| 185 | + color: @subsidiary-color; | ||
| 186 | + &-active:not(.@{menu-prefix-cls}-submenu), &:hover{ | ||
| 187 | + background: @menu-dark-active-bg; | ||
| 188 | + } | ||
| 189 | + &-active:not(.@{menu-prefix-cls}-submenu){ | ||
| 190 | + color: @primary-color; | ||
| 191 | + border-right: 2px solid @primary-color; | ||
| 192 | + } | ||
| 193 | + } | ||
| 194 | + &-dark&-vertical &-submenu &-item{ | ||
| 195 | + &:hover{ | ||
| 196 | + background: @title-color; | ||
| 197 | + } | ||
| 198 | + &-active{ | ||
| 199 | + border-right: none; | ||
| 200 | + color: #fff; | ||
| 201 | + background: @primary-color; | ||
| 202 | + } | ||
| 203 | + } | ||
| 204 | + | ||
| 205 | + &-dark&-vertical &-opened{ | ||
| 206 | + background: @menu-dark-active-bg; | ||
| 207 | + } | ||
| 178 | } | 208 | } |
| 179 | .select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls); | 209 | .select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls); |
| 180 | \ No newline at end of file | 210 | \ No newline at end of file |
src/styles/themes/default/custom.less
| @@ -42,6 +42,7 @@ | @@ -42,6 +42,7 @@ | ||
| 42 | @table-td-stripe-bg : #f5f7f9; | 42 | @table-td-stripe-bg : #f5f7f9; |
| 43 | @table-td-hover-bg : #ebf7ff; | 43 | @table-td-hover-bg : #ebf7ff; |
| 44 | @table-td-highlight-bg : #ebf7ff; | 44 | @table-td-highlight-bg : #ebf7ff; |
| 45 | +@menu-dark-active-bg : #313540; | ||
| 45 | 46 | ||
| 46 | // Shadow | 47 | // Shadow |
| 47 | @shadow-color : rgba(0, 0, 0, .2); | 48 | @shadow-color : rgba(0, 0, 0, .2); |
test/routers/menu.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <Menu mode="horizontal" active-key="1"> | 3 | + <Menu mode="horizontal" :theme="theme" active-key="1"> |
| 4 | <Menu-item key="1"> | 4 | <Menu-item key="1"> |
| 5 | <Icon type="ionic"></Icon><span>导航一</span> | 5 | <Icon type="ionic"></Icon><span>导航一</span> |
| 6 | </Menu-item> | 6 | </Menu-item> |
| @@ -19,7 +19,13 @@ | @@ -19,7 +19,13 @@ | ||
| 19 | <Menu-item key="4">导航四</Menu-item> | 19 | <Menu-item key="4">导航四</Menu-item> |
| 20 | </Menu> | 20 | </Menu> |
| 21 | <br><br> | 21 | <br><br> |
| 22 | - <Menu :mode="mode" active-key="1" @on-open-change="change"> | 22 | + <Radio-group :model.sync="theme"> |
| 23 | + <Radio value="light"></Radio> | ||
| 24 | + <Radio value="dark"></Radio> | ||
| 25 | + <Radio value="primary"></Radio> | ||
| 26 | + </Radio-group> | ||
| 27 | + <br><br> | ||
| 28 | + <Menu :mode="mode" :theme="theme" active-key="1" @on-open-change="change"> | ||
| 23 | <Menu-item key="1"> | 29 | <Menu-item key="1"> |
| 24 | <Icon type="ionic"></Icon> | 30 | <Icon type="ionic"></Icon> |
| 25 | <span>导航一</span> | 31 | <span>导航一</span> |
| @@ -114,7 +120,8 @@ | @@ -114,7 +120,8 @@ | ||
| 114 | props: {}, | 120 | props: {}, |
| 115 | data () { | 121 | data () { |
| 116 | return { | 122 | return { |
| 117 | - mode: 'vertical' | 123 | + mode: 'vertical', |
| 124 | + theme: 'dark' | ||
| 118 | } | 125 | } |
| 119 | }, | 126 | }, |
| 120 | computed: {}, | 127 | computed: {}, |