other / mew-iview

Commit a43f9d7ceb4124983e2424601ee1c806847fe73c

Authored by Aresn
Committed by GitHub
2 parents 5a3fe3ec 18efb1b4

Merge pull request #2847 from Xotic750/radio_tabindex 

Radio: Tabindex WIP
Showing 2 changed files with 28 additions and 5 deletions   Show diff stats
Inline Side-by-side
src/components/radio/radio.vue
  Show/Hide comments   View file @a43f9d7
1 1 <template>
2   - <label :class="wrapClasses">
  2 + <label
  3 + :class="wrapClasses"
  4 + :tabindex="disabled ? -1 : 0"
  5 + @keyup.space="change">
3 6 <span :class="radioClasses">
4 7 <span :class="innerClasses"></span>
5 8 <input
6 9 type="radio"
  10 + tabindex="-1"
7 11 :class="inputClasses"
8 12 :disabled="disabled"
9 13 :checked="currentValue"
10 14 :name="name"
11   - @change="change">
  15 + @change="change"
  16 + >
12 17 </span><slot>{{ label }}</slot>
13 18 </label>
14 19 </template>
... ...
src/styles/components/radio.less
  Show/Hide comments   View file @a43f9d7
... ... @@ -16,7 +16,7 @@
16 16 }
17 17 }
18 18  
19   -// 普通状态
  19 +// 普通状态 - Normal state
20 20 .@{radio-prefix-cls}-wrapper {
21 21 font-size: @font-size-small;
22 22 vertical-align: middle;
... ... @@ -28,6 +28,12 @@
28 28 &-disabled{
29 29 cursor: @cursor-disabled;
30 30 }
  31 + outline: 0;
  32 + &:focus {
  33 + & .@{radio-inner-prefix-cls} {
  34 + box-shadow: 0 0 0 2px fade(@primary-color, 20%);
  35 + }
  36 + }
31 37 }
32 38  
33 39 .@{radio-prefix-cls} {
... ... @@ -110,7 +116,7 @@
110 116 }
111 117 }
112 118  
113   -// 选中状态
  119 +// 选中状态 - Selected state
114 120 .@{radio-prefix-cls}-checked {
115 121 .@{radio-inner-prefix-cls} {
116 122 border-color: @primary-color;
... ... @@ -156,7 +162,7 @@ span.@{radio-prefix-cls} + * {
156 162 margin-right: 2px;
157 163 }
158 164  
159   -// 按钮样式
  165 +// 按钮样式 - Button style
160 166 .@{radio-group-button-prefix-cls} {
161 167 font-size: 0;
162 168 -webkit-text-size-adjust:none;
... ... @@ -214,6 +220,13 @@ span.@{radio-prefix-cls} + * {
214 220 &:hover {
215 221 position: relative;
216 222 color: @primary-color;
  223 + & .@{radio-prefix-cls} {
  224 + background-color: black;
  225 + }
  226 + }
  227 +
  228 + &:focus {
  229 + box-shadow: 0 0 0 2px fade(@primary-color, 20%);
217 230 }
218 231  
219 232 .@{radio-prefix-cls}-inner,
... ... @@ -240,6 +253,10 @@ span.@{radio-prefix-cls} + * {
240 253 color: tint(@primary-color, 20%);
241 254 }
242 255  
  256 + &:focus {
  257 + box-shadow: 0 0 0 2px fade(@primary-color, 20%)!important;
  258 + }
  259 +
243 260 &:active {
244 261 border-color: shade(@primary-color, 5%);
245 262 box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
... ... @@ -291,3 +308,4 @@ span.@{radio-prefix-cls} + * {
291 308 border-radius: 0 @btn-border-radius-small @btn-border-radius-small 0;
292 309 }
293 310 }
  311 +
... ...