mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: many changes, such as structure, add layout comp...

Browse Source
This commit is contained in:
07akioni 2019-06-03 13:47:12 +08:00
parent bbd2d2f619
commit 4bc028b1cc
15 changed files with 293 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
demo/components/sideMenuDemo.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div class="container">
<nv-layout></nv-layout>
</div>
</template>
<script>
export default {
}
</script>
<style>
.container {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
}
</style>

32
demo/index.js
View File

@ -1,11 +1,33 @@
import Vue from 'vue'
import Vue from 'vue/dist/vue'
import VueRouter from 'vue-router'
import '../styles/index.scss'
// import '../dist/lib/index.css'
import Demo from './demo.vue'
import Card from 'packages/Card'
import Icon from 'packages/Icon'
import Card from 'packages/common/Card'
import Icon from 'packages/common/Icon'
import SideMenu from 'packages/nimbus/SideMenu'
import Layout from 'packages/nimbus/Layout'
import sideMenuDemo from './components/sideMenuDemo'
Vue.use(VueRouter)
Card.install(Vue)
Icon.install(Vue)
SideMenu.install(Vue)
Layout.install(Vue)
;(new Vue(Demo)).$mount('#app')
const routes = [
{ path: '/sidemenu', component: sideMenuDemo }
]
const router = new VueRouter({
routes
})
;(new Vue({
router
})).$mount('#app')
console.log('...')

4
demo/index.tpl
View File

@ -5,6 +5,8 @@
<title>2s design</title>
</head>
<body>
<div id="app"></div>
<div id="app">
<router-view></router-view>
</div>
</body>
</html>

10
demo/indexUsingCss.js
View File

@ -1,10 +1,2 @@
import Vue from 'vue'
import '../dist/lib/index.css'
import Demo from './demo.vue'
import Card from 'packages/Card'
import Icon from 'packages/Icon'
Card.install(Vue)
Icon.install(Vue)
;(new Vue(Demo)).$mount('#app')
import './index.js'

4
package.json
View File

@ -4,9 +4,10 @@
"description": "",
"main": "index.js",
"scripts": {
"build": "",
"build": "cross-env NODE_ENV=development & gulp --gulpfile build/gulpfile.js build",
"demo": "cross-env NODE_ENV=development & gulp --gulpfile build/gulpfile.js build & webpack-dev-server --config build/webpack.demo.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.js",
"serve": "npm run dev",
"test": "cross-env NODE_ENV=development karma start test/unit/karma.conf.js"
},
"author": "",
@ -47,6 +48,7 @@
"url-loader": "^1.1.2",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-router": "^3.0.6",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.2",

0
packages/Card/index.js → packages/common/Card/index.js
View File

0
packages/Card/src/main.vue → packages/common/Card/src/main.vue
View File

0
packages/Icon/index.js → packages/common/Icon/index.js
View File

0
packages/Icon/src/main.vue → packages/common/Icon/src/main.vue
View File

7
packages/nimbus/Layout/index.js Normal file
View File

@ -0,0 +1,7 @@
import Layout from './src/main.vue'
Layout.install = function (Vue) {
Vue.component(Layout.name, Layout)
}
export default Layout

144
packages/nimbus/Layout/src/main.vue Normal file
View File

@ -0,0 +1,144 @@
<template>
<div class="layout">
<div class="body"></div>
<div class="menu" :class="{ collapse: collapse, active: !collapse }">
<div class="header">Administration</div>
<div class="item active"><span>Service Management</span></div>
<div class="item"><span>Service Type Management</span></div>
<div class="item"><span>User Management</span></div>
<div class="toggle-button" @click="toggle"><img src="./toggleButton.svg"></div>
</div>
</div>
</template>
<script>
export default {
name: "NvLayout",
props: {},
methods: {
toggle () {
this.collapse = !this.collapse
}
},
data () {
return {
collapse: false
}
}
};
</script>
<style lang="scss" scoped>
.layout {
background: #1f263e;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.menu-container {
display: inline-block;
margin-right: 14px;
width: 256px;
&.active {
max-width: 256px;
transition: max-width .3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
&.collapse {
max-width: 32px;
transition: max-width .25s cubic-bezier(0.4, 0.0, 0.2, 1);
}
}
.menu {
& {
background-color: #1f263e;
width: 272px;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);
}
&.active {
transform: translateX(0);
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
.toggle-button {
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
transform: translateX(50%) translateY(-50%) rotate(0deg);
}
}
&.collapse {
transform: translateX(-224px);
transition: transform .25s cubic-bezier(0.4, 0.0, 0.2, 1);
.toggle-button {
transition: transform .25s cubic-bezier(0.4, 0.0, 0.2, 1);
transform: translateX(50%) translateY(-50%) rotate(180deg);
}
}
.header {
color: #fff;
font-weight: 700;
padding-top: 21px;
padding-bottom: 21px;
padding-left: 48px;
font-size: 16px;
button {
float: right;
}
}
.toggle-button {
cursor: pointer;
width: 36px;
height: 36px;
opacity: 0.3;
position: absolute;
top: 50%;
right: 0;
}
.item {
cursor: pointer;
position: relative;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 48px;
font-size: 14px;
color: #fff;
opacity: 0.4;
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
&.active {
opacity: 1;
background-image:linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%);
}
&:hover {
opacity: 1;
}
&::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
opacity: 0;
// background-image:linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%);
}
&:hover::before {
opacity: 1;
}
}
}
.body {
position: absolute;
left: 272px;
right: 0px;
top: 0;
bottom: 0;
}
</style>

1
packages/nimbus/Layout/src/toggleButton.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.06 56.06"><title>Folde &amp;amp; Unfold</title><path fill="#ffffff" d="M50,22A28,28,0,1,0,78,50,28.06,28.06,0,0,0,50,22ZM65.09,52.16h-25l7.1,7.1a2.16,2.16,0,0,1-3.05,3.05L33.38,51.52a2.15,2.15,0,0,1,0-3L44.16,37.69a2.16,2.16,0,0,1,3.05,3.05l-7.1,7.1h25a2.16,2.16,0,0,1,0,4.32Z" transform="translate(-21.97 -21.97)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 413 B

7
packages/nimbus/SideMenu/index.js Normal file
View File

@ -0,0 +1,7 @@
import SideMenu from './src/main.vue'
SideMenu.install = function (Vue) {
Vue.component(SideMenu.name, SideMenu)
}
export default SideMenu

78
packages/nimbus/SideMenu/src/main.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<div class="menu-container" :class="{ collapse: collapse, active: !collapse }">
<div class="menu" :class="{ collapse: collapse, active: !collapse }">
<div class="header">Good Service<button @click="toggle">&lt;</button></div>
<div class="item">Service Management</div>
<div class="item">Service Management</div>
<div class="item">Service Management</div>
<div class="toggle-button"></div>
</div>
</div>
</template>
<script>
export default {
name: "NvSidemenu",
props: {},
methods: {
toggle () {
console.log('hello')
this.collapse = !this.collapse
}
},
data () {
return {
collapse: false
}
}
};
</script>
<style lang="scss" scoped>
.menu-container {
display: inline-block;
position: relative;
margin-right: 14px;
top: 0;
bottom: 0;
width: 256px;
&.active {
max-width: 256px;
transition: max-width .3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
&.collapse {
max-width: 32px;
transition: max-width .25s cubic-bezier(0.4, 0.0, 0.2, 1);
}
}
.menu {
& {
background-color: #efefef;
width: 256px;
height: 100%;
display: flex;
flex-direction: column;
}
&.active {
transform: translateX(0);
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
&.collapse {
transform: translateX(-224px);
transition: transform .25s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.header {
font-weight: 700;
padding: 14px 4px 14px 21px;
font-size: 16px;
button {
float: right;
}
}
.item {
padding: 14px 21px;
font-size: 16px;
}
}
</style>

1
styles/base.scss
View File

@ -1,5 +1,6 @@
@import './fonts/OpenSans.scss';
body {
margin: 0;
font-family: 'Open Sans';
}