From 82d001c5cfdd98f3a408e9173834e6abc3dff9b4 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Thu, 13 Jun 2019 19:17:41 +0800 Subject: [PATCH] feat: checkbox --- demo/components/checkboxDemo.vue | 37 +++++++++++++++++++++ demo/components/demoScaffold.vue | 29 ++++++++++++++++ demo/demo.vue | 4 +++ demo/index.js | 6 +++- package.json | 2 +- packages/common/Checkbox/index.js | 7 ++++ packages/common/Checkbox/src/main.vue | 37 +++++++++++++++++++++ packages/common/Scaffold/index.js | 7 ++++ packages/common/Scaffold/src/main.vue | 13 ++++++++ styles/Checkbox.scss | 48 +++++++++++++++++++++++++++ styles/Scaffold.scss | 6 +++- styles/index.scss | 1 + 12 files changed, 194 insertions(+), 3 deletions(-) create mode 100644 demo/components/checkboxDemo.vue create mode 100644 demo/components/demoScaffold.vue create mode 100644 packages/common/Checkbox/index.js create mode 100644 packages/common/Checkbox/src/main.vue create mode 100644 packages/common/Scaffold/index.js create mode 100644 packages/common/Scaffold/src/main.vue create mode 100644 styles/Checkbox.scss diff --git a/demo/components/checkboxDemo.vue b/demo/components/checkboxDemo.vue new file mode 100644 index 000000000..6978021e5 --- /dev/null +++ b/demo/components/checkboxDemo.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/demo/components/demoScaffold.vue b/demo/components/demoScaffold.vue new file mode 100644 index 000000000..a7933471f --- /dev/null +++ b/demo/components/demoScaffold.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/demo/demo.vue b/demo/demo.vue index f628c4bb5..c8f878db8 100644 --- a/demo/demo.vue +++ b/demo/demo.vue @@ -20,6 +20,10 @@ 图标 / n-icon +
+ + 多选框 / n-checkbox + diff --git a/demo/index.js b/demo/index.js index 239678cf1..17460919a 100644 --- a/demo/index.js +++ b/demo/index.js @@ -11,6 +11,7 @@ import WithPadding from 'packages/common/WithPadding' import WithMargin from 'packages/common/WithMargin' import MasonryGroup from 'packages/common/MasonryGroup' import Table from 'packages/common/Table' +import Checkbox from 'packages/common/Checkbox' import ServiceCard from 'packages/nimbus/ServiceCard' import HomeLayout from 'packages/nimbus/HomeLayout' @@ -21,6 +22,7 @@ import sideMenuDemo from './components/sideMenuDemo' import homeDemo from './components/homeDemo' import gradientTextDemo from './components/gradientTextDemo' import iconDemo from './components/iconDemo' +import checkboxDemo from './components/checkboxDemo' import demo from './demo' Vue.use(VueRouter) @@ -38,13 +40,15 @@ ServiceCard.install(Vue) MasonryGroup.install(Vue) Table.install(Vue) WithMargin.install(Vue) +Checkbox.install(Vue) const routes = [ { path: '/', component: demo }, { path: '/n-nimbus-service-layout', component: sideMenuDemo }, { path: '/n-nimbus-home-layout', component: homeDemo }, { path: '/n-gradient-text', component: gradientTextDemo }, - { path: '/n-icon', component: iconDemo } + { path: '/n-icon', component: iconDemo }, + { path: '/n-checkbox', component: checkboxDemo } ] const router = new VueRouter({ diff --git a/package.json b/package.json index b0fe8d6ae..c3b428efd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "naive-ui", - "version": "0.1.10", + "version": "0.1.11", "description": "", "main": "index.js", "scripts": { diff --git a/packages/common/Checkbox/index.js b/packages/common/Checkbox/index.js new file mode 100644 index 000000000..acd2af902 --- /dev/null +++ b/packages/common/Checkbox/index.js @@ -0,0 +1,7 @@ +import NCheckbox from './src/main.vue' + +NCheckbox.install = function (Vue) { + Vue.component(NCheckbox.name, NCheckbox) +} + +export default NCheckbox diff --git a/packages/common/Checkbox/src/main.vue b/packages/common/Checkbox/src/main.vue new file mode 100644 index 000000000..fcbf9976c --- /dev/null +++ b/packages/common/Checkbox/src/main.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/common/Scaffold/index.js b/packages/common/Scaffold/index.js new file mode 100644 index 000000000..a790b91b8 --- /dev/null +++ b/packages/common/Scaffold/index.js @@ -0,0 +1,7 @@ +import Scaffold from './src/main.vue' + +Scaffold.install = function (Vue) { + Vue.component(Scaffold.name, Scaffold) +} + +export default Scaffold diff --git a/packages/common/Scaffold/src/main.vue b/packages/common/Scaffold/src/main.vue new file mode 100644 index 000000000..821d2b093 --- /dev/null +++ b/packages/common/Scaffold/src/main.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/styles/Checkbox.scss b/styles/Checkbox.scss new file mode 100644 index 000000000..beb898f02 --- /dev/null +++ b/styles/Checkbox.scss @@ -0,0 +1,48 @@ +@import './mixins/mixins.scss'; + +@include b(checkbox) { + & { + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + } + .label { + font-size: 12px; + color: #63E2B7; + } + .checkbox { + & { + height: 15px; + width: 15px; + margin-right: 6px; + border: 1px solid #63E2B7; + background-color: transparent; + border-radius: 4px; + position: relative; + + } + &.checked { + background-color: #63E2B7; + } + .inner { + &::after { + box-sizing: content-box; + content: ""; + border: 1.5px solid #5C647B; + border-left: 0; + border-top: 0; + height: 8px; + left: 5px; + position: absolute; + top: 2px; + transform: rotate(45deg) scaleY(0); + width: 3px; + transform-origin: center; + } + &.checked::after { + transform: rotate(45deg) scaleY(1); + } + } + } +} \ No newline at end of file diff --git a/styles/Scaffold.scss b/styles/Scaffold.scss index d1b491be2..1f289347a 100644 --- a/styles/Scaffold.scss +++ b/styles/Scaffold.scss @@ -1 +1,5 @@ -@import './mixins/mixins.scss'; \ No newline at end of file +@import './mixins/mixins.scss'; + +@include b() { + +} \ No newline at end of file diff --git a/styles/index.scss b/styles/index.scss index d70abf5de..1b9f8805e 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -8,5 +8,6 @@ @import './ServiceCard.scss'; @import './Table.scss'; @import './WithMargin.scss'; +@import './Checkbox.scss'; @import './NimbusServiceLayout.scss'; \ No newline at end of file