👍 增加radio组件水平显示样式

monw3c · Aug 2, 2018 · 14f68bb · 14f68bb
1 parent 7af471d
commit 14f68bb
Show file tree

Hide file tree

Showing 26 changed files with 184 additions and 22 deletions.
diff --git a/docs/components/form.md b/docs/components/form.md
@@ -133,8 +133,8 @@ checkbox的另一种表现，有```value```属性
 
 ## radio 
 ###### 基础用法
-需配合 xm-radio-group 使用，通过```color```属性改变 √ 颜色，```disabled```禁止选中
-``` html
+需配合 xm-radio-group 使用，通过```color```属性改变 √ 颜色，```disabled```禁止选中,```hor```为水平单选框，默认不填为垂直
+```html
 <xm-radio-group v-model="radio" color="#4cd864">
     <xm-radio value="巴士"></xm-radio>
     <xm-radio value="火车"></xm-radio>
@@ -156,7 +156,7 @@ export default {
 |---------- |-------- |---------- |-------------  |-------- |
 | color   | 设置颜色  | String  | — | —  |
 | disabled   | 禁止选中  | Boolean  | — | false  |
-
+| hor   | 水平显示  | Boolean  | — | false  |
 
 ## checkbox
 ###### 基础用法

diff --git a/docs/dist/index.html b/docs/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>xmui - 基于vue2，可复用UI组件</title><link href=./static/css/app.d3b5058372ea2f8b3df034641c430bdc.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3eca77b76cc3bdfd2514.js></script><script type=text/javascript src=./static/js/vendor.c7ad6fdac84180d296de.js></script><script type=text/javascript src=./static/js/app.dd7d721cd309220695bc.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>xmui - 基于vue2，可复用UI组件</title><link href=./static/css/app.1a6913976475e8fd73c957dcbb6a9f91.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.1427bbba43ff028fa4f9.js></script><script type=text/javascript src=./static/js/vendor.c7ad6fdac84180d296de.js></script><script type=text/javascript src=./static/js/app.22d1c3bc6de09a946866.js></script></body></html>
diff --git a/.../app.d3b5058372ea2f8b3df034641c430bdc.css → .../app.1a6913976475e8fd73c957dcbb6a9f91.css b/.../app.d3b5058372ea2f8b3df034641c430bdc.css → .../app.1a6913976475e8fd73c957dcbb6a9f91.css
diff --git a/docs/dist/static/css/app.1a6913976475e8fd73c957dcbb6a9f91.css.map b/docs/dist/static/css/app.1a6913976475e8fd73c957dcbb6a9f91.css.map
diff --git a/docs/dist/static/css/app.d3b5058372ea2f8b3df034641c430bdc.css.map b/docs/dist/static/css/app.d3b5058372ea2f8b3df034641c430bdc.css.map
diff --git a/docs/dist/static/js/0.266fd9072fbe6c37ac38.js b/docs/dist/static/js/0.266fd9072fbe6c37ac38.js
diff --git a/docs/dist/static/js/0.266fd9072fbe6c37ac38.js.map b/docs/dist/static/js/0.266fd9072fbe6c37ac38.js.map
diff --git a/docs/dist/static/js/0.7067f52b699bbcd49756.js b/docs/dist/static/js/0.7067f52b699bbcd49756.js
diff --git a/docs/dist/static/js/0.7067f52b699bbcd49756.js.map b/docs/dist/static/js/0.7067f52b699bbcd49756.js.map
diff --git a/docs/dist/static/js/app.22d1c3bc6de09a946866.js b/docs/dist/static/js/app.22d1c3bc6de09a946866.js
diff --git a/docs/dist/static/js/app.22d1c3bc6de09a946866.js.map b/docs/dist/static/js/app.22d1c3bc6de09a946866.js.map
diff --git a/docs/dist/static/js/app.dd7d721cd309220695bc.js b/docs/dist/static/js/app.dd7d721cd309220695bc.js
diff --git a/docs/dist/static/js/app.dd7d721cd309220695bc.js.map b/docs/dist/static/js/app.dd7d721cd309220695bc.js.map
diff --git a/...tatic/js/manifest.3eca77b76cc3bdfd2514.js → ...tatic/js/manifest.1427bbba43ff028fa4f9.js b/...tatic/js/manifest.3eca77b76cc3bdfd2514.js → ...tatic/js/manifest.1427bbba43ff028fa4f9.js
diff --git a/...c/js/manifest.3eca77b76cc3bdfd2514.js.map → ...c/js/manifest.1427bbba43ff028fa4f9.js.map b/...c/js/manifest.3eca77b76cc3bdfd2514.js.map → ...c/js/manifest.1427bbba43ff028fa4f9.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "x-m-ui",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "description": "UI components base on Vue 2.x",
   "author": "mon <[email protected]>",
   "main": "package/xmui.min.js",

diff --git a/package/comps/components/radio/radio-group.vue b/package/comps/components/radio/radio-group.vue
@@ -15,6 +15,10 @@ export default {
     color: {
       type: String,
       default: '#4CD864'
+    },
+    hor: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

diff --git a/package/comps/components/radio/radio.scss b/package/comps/components/radio/radio.scss
@@ -3,6 +3,7 @@
     position: relative;
     vertical-align: middle;
     line-height: normal;
+    text-align: left;
 
     & .xm__radio {
         width: 100%; 
@@ -53,7 +54,68 @@
             transform: scaleY(1) scaleX(2);
             transform-origin: 0 0;
         }
+
+        &.horizontal{
+            display: inline-flex;
+            padding-right: 10px;
+            width: auto;
+            white-space: nowrap;
+
+
+            & .xm__radio--text-horizontal{
+                font-size: $font-size-base;
+                margin-left: .2rem;
+            }
+
+            & .xm__icon--radio-horizontal{
+                border-radius: 50%;
+                display: inline-block;
+                position: relative;
+                z-index: 10;
+                vertical-align: middle;
+                pointer-events: none;
+                width: $font-size-big;
+                height: $font-size-big;
+                // margin-top: -4px;
+            }
+
+            & > input[type=radio] {
+                position: absolute;
+                left: -9999em;
+
+                & + .xm__icon--radio-horizontal:before {
+                    color: #ccc;
+                    display: inline;
+                    content: "\E668";
+                    font-size: $font-size-base*1.5;
+                    right: 0;
+                    // top: -18px;
+                    position: absolute;
+                }
+
+                &:checked + .xm__icon--radio-horizontal:before {
+                    color: currentColor;
+                    content: "\E730";
+                }
+
+            }
 
+            &.disabled {
+
+                & .xm__radio--text-horizontal {
+                    color: #ccc;
+                }
+
+                & > input[type=radio] + .xm__icon--radio-horizontal:before{
+                    color: #efefef;
+                }
+
+            }
+
+            &:not(:last-child):after {
+                border-bottom: none;
+            }
+        }
     }
 
 }

diff --git a/package/comps/components/radio/radio.vue b/package/comps/components/radio/radio.vue
@@ -1,8 +1,17 @@
 <template>
-    <label class="xm__radio" :class="[{'disabled':disabled}]">
+    <label class="xm__radio" :class="[{'disabled':disabled,'horizontal':$parent.hor}]">
+      <!-- 水平显示 -->
+      <template v-if="$parent.hor">
+        <input type="radio" @change="onChange" :disabled="disabled" :checked="checked"/>
+        <span class=" xm__icon--radio-horizontal" :style="[{'color': $parent.color}]"></span>
+        <span class="xm__radio--text-horizontal"><slot>{{value}}</slot></span>
+      </template>
+      <!-- 垂直显示 -->
+      <template v-else>
         <span class="xm__radio--text"><slot>{{value}}</slot></span>
         <input type="radio" @change="onChange" :disabled="disabled" :checked="checked"/>
         <span class="xm__radio--icon xm__icon--radio" :style="[{'color': $parent.color}]"></span>
+      </template>
     </label>
 </template>
 

diff --git a/package/xmui.min.css b/package/xmui.min.css
diff --git a/package/xmui.min.css.map b/package/xmui.min.css.map
diff --git a/package/xmui.min.js b/package/xmui.min.js
diff --git a/src/comps/components/radio/radio-group.vue b/src/comps/components/radio/radio-group.vue
@@ -15,6 +15,10 @@ export default {
     color: {
       type: String,
       default: '#4CD864'
+    },
+    hor: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

diff --git a/src/comps/components/radio/radio.scss b/src/comps/components/radio/radio.scss
@@ -3,6 +3,7 @@
     position: relative;
     vertical-align: middle;
     line-height: normal;
+    text-align: left;
 
     & .xm__radio {
         width: 100%; 
@@ -53,7 +54,68 @@
             transform: scaleY(1) scaleX(2);
             transform-origin: 0 0;
         }
+
+        &.horizontal{
+            display: inline-flex;
+            padding-right: 10px;
+            width: auto;
+            white-space: nowrap;
+
+
+            & .xm__radio--text-horizontal{
+                font-size: $font-size-base;
+                margin-left: .2rem;
+            }
+
+            & .xm__icon--radio-horizontal{
+                border-radius: 50%;
+                display: inline-block;
+                position: relative;
+                z-index: 10;
+                vertical-align: middle;
+                pointer-events: none;
+                width: $font-size-big;
+                height: $font-size-big;
+                // margin-top: -4px;
+            }
+
+            & > input[type=radio] {
+                position: absolute;
+                left: -9999em;
+
+                & + .xm__icon--radio-horizontal:before {
+                    color: #ccc;
+                    display: inline;
+                    content: "\E668";
+                    font-size: $font-size-base*1.5;
+                    right: 0;
+                    // top: -18px;
+                    position: absolute;
+                }
+
+                &:checked + .xm__icon--radio-horizontal:before {
+                    color: currentColor;
+                    content: "\E730";
+                }
+
+            }
 
+            &.disabled {
+
+                & .xm__radio--text-horizontal {
+                    color: #ccc;
+                }
+
+                & > input[type=radio] + .xm__icon--radio-horizontal:before{
+                    color: #efefef;
+                }
+
+            }
+
+            &:not(:last-child):after {
+                border-bottom: none;
+            }
+        }
     }
 
 }

diff --git a/src/comps/components/radio/radio.vue b/src/comps/components/radio/radio.vue
@@ -1,8 +1,17 @@
 <template>
-    <label class="xm__radio" :class="[{'disabled':disabled}]">
+    <label class="xm__radio" :class="[{'disabled':disabled,'horizontal':$parent.hor}]">
+      <!-- 水平显示 -->
+      <template v-if="$parent.hor">
+        <input type="radio" @change="onChange" :disabled="disabled" :checked="checked"/>
+        <span class=" xm__icon--radio-horizontal" :style="[{'color': $parent.color}]"></span>
+        <span class="xm__radio--text-horizontal"><slot>{{value}}</slot></span>
+      </template>
+      <!-- 垂直显示 -->
+      <template v-else>
         <span class="xm__radio--text"><slot>{{value}}</slot></span>
         <input type="radio" @change="onChange" :disabled="disabled" :checked="checked"/>
         <span class="xm__radio--icon xm__icon--radio" :style="[{'color': $parent.color}]"></span>
+      </template>
     </label>
 </template>
 

diff --git a/src/views/home.vue b/src/views/home.vue
@@ -123,6 +123,18 @@
         </xm-cell-item>
       </xm-cell-group>
 
+      <xm-cell-group title="单选" class="xm-radio-group" style="background: #fff;margin-bottom: 20px;text-align: center;">
+        <xm-cell-item>
+          <xm-radio-group slot="right" v-model="radio" color="#ed3f14" hor>
+            <xm-radio value="巴士"></xm-radio>
+            <xm-radio value="火车"></xm-radio>
+            <xm-radio value="飞机" disabled>飞机--disabled</xm-radio>
+            <xm-radio value="单车">单车</xm-radio>
+          </xm-radio-group>
+        </xm-cell-item>
+      </xm-cell-group>
+
+
       <xm-cell-group title="复选" class="xm-checkbox-group" >
         <xm-cell-item>
           <xm-checkbox-group slot="right" v-model="checkbox" color="#4cd864">
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>xmui - 基于vue2，可复用UI组件</title><link href=./static/css/app.d3b5058372ea2f8b3df034641c430bdc.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3eca77b76cc3bdfd2514.js></script><script type=text/javascript src=./static/js/vendor.c7ad6fdac84180d296de.js></script><script type=text/javascript src=./static/js/app.dd7d721cd309220695bc.js></script></body></html>
		<!DOCTYPE html><html><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>xmui - 基于vue2，可复用UI组件</title><link href=./static/css/app.1a6913976475e8fd73c957dcbb6a9f91.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.1427bbba43ff028fa4f9.js></script><script type=text/javascript src=./static/js/vendor.c7ad6fdac84180d296de.js></script><script type=text/javascript src=./static/js/app.22d1c3bc6de09a946866.js></script></body></html>