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 <template> 1 <template>
2 - <label :class="wrapClasses"> 2 + <label
  3 + :class="wrapClasses"
  4 + :tabindex="disabled ? -1 : 0"
  5 + @keyup.space="change">
3 <span :class="radioClasses"> 6 <span :class="radioClasses">
4 <span :class="innerClasses"></span> 7 <span :class="innerClasses"></span>
5 <input 8 <input
6 type="radio" 9 type="radio"
  10 + tabindex="-1"
7 :class="inputClasses" 11 :class="inputClasses"
8 :disabled="disabled" 12 :disabled="disabled"
9 :checked="currentValue" 13 :checked="currentValue"
10 :name="name" 14 :name="name"
11 - @change="change"> 15 + @change="change"
  16 + >
12 </span><slot>{{ label }}</slot> 17 </span><slot>{{ label }}</slot>
13 </label> 18 </label>
14 </template> 19 </template>
src/styles/components/radio.less
  Show/Hide comments   View file @a43f9d7
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 } 16 }
17 } 17 }
18 18
19 -// 普通状态 19 +// 普通状态 - Normal state
20 .@{radio-prefix-cls}-wrapper { 20 .@{radio-prefix-cls}-wrapper {
21 font-size: @font-size-small; 21 font-size: @font-size-small;
22 vertical-align: middle; 22 vertical-align: middle;
@@ -28,6 +28,12 @@ @@ -28,6 +28,12 @@
28 &-disabled{ 28 &-disabled{
29 cursor: @cursor-disabled; 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 .@{radio-prefix-cls} { 39 .@{radio-prefix-cls} {
@@ -110,7 +116,7 @@ @@ -110,7 +116,7 @@
110 } 116 }
111 } 117 }
112 118
113 -// 选中状态 119 +// 选中状态 - Selected state
114 .@{radio-prefix-cls}-checked { 120 .@{radio-prefix-cls}-checked {
115 .@{radio-inner-prefix-cls} { 121 .@{radio-inner-prefix-cls} {
116 border-color: @primary-color; 122 border-color: @primary-color;
@@ -156,7 +162,7 @@ span.@{radio-prefix-cls} + * { @@ -156,7 +162,7 @@ span.@{radio-prefix-cls} + * {
156 margin-right: 2px; 162 margin-right: 2px;
157 } 163 }
158 164
159 -// 按钮样式 165 +// 按钮样式 - Button style
160 .@{radio-group-button-prefix-cls} { 166 .@{radio-group-button-prefix-cls} {
161 font-size: 0; 167 font-size: 0;
162 -webkit-text-size-adjust:none; 168 -webkit-text-size-adjust:none;
@@ -214,6 +220,13 @@ span.@{radio-prefix-cls} + * { @@ -214,6 +220,13 @@ span.@{radio-prefix-cls} + * {
214 &:hover { 220 &:hover {
215 position: relative; 221 position: relative;
216 color: @primary-color; 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 .@{radio-prefix-cls}-inner, 232 .@{radio-prefix-cls}-inner,
@@ -240,6 +253,10 @@ span.@{radio-prefix-cls} + * { @@ -240,6 +253,10 @@ span.@{radio-prefix-cls} + * {
240 color: tint(@primary-color, 20%); 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 &:active { 260 &:active {
244 border-color: shade(@primary-color, 5%); 261 border-color: shade(@primary-color, 5%);
245 box-shadow: -1px 0 0 0 shade(@primary-color, 5%); 262 box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
@@ -291,3 +308,4 @@ span.@{radio-prefix-cls} + * { @@ -291,3 +308,4 @@ span.@{radio-prefix-cls} + * {
291 border-radius: 0 @btn-border-radius-small @btn-border-radius-small 0; 308 border-radius: 0 @btn-border-radius-small @btn-border-radius-small 0;
292 } 309 }
293 } 310 }
  311 +