mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-04-12 14:40:47 +08:00
refactor: service layout demo
This commit is contained in:
07akioni
parent
1e0011c5cd
commit
6995dd3ce8
@ -1,45 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="service-container">
|
||||
<n-nimbus-service-layout>
|
||||
<n-with-padding
|
||||
:padding-left="48"
|
||||
:padding-right="48"
|
||||
>
|
||||
<n-table>
|
||||
<n-thead>
|
||||
<n-tr>
|
||||
<n-th>ID</n-th>
|
||||
<n-th>Cluster</n-th>
|
||||
<n-th>Cluster Type</n-th>
|
||||
<n-th>Tags</n-th>
|
||||
<n-th>Network Type</n-th>
|
||||
<n-th>Cluster Status</n-th>
|
||||
<n-th>Nodes</n-th>
|
||||
<n-th>Location</n-th>
|
||||
<n-th>Version</n-th>
|
||||
<n-th>Actions</n-th>
|
||||
</n-tr>
|
||||
</n-thead>
|
||||
<n-tbody>
|
||||
<n-tr
|
||||
v-for="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]"
|
||||
:key="i"
|
||||
>
|
||||
<n-td>1</n-td>
|
||||
<n-td>Name1</n-td>
|
||||
<n-td>Type1</n-td>
|
||||
<n-td>bla</n-td>
|
||||
<n-td>blablabla</n-td>
|
||||
<n-td>Running</n-td>
|
||||
<n-td>6</n-td>
|
||||
<n-td>Beijing</n-td>
|
||||
<n-td>1.12.6-aliyun.1</n-td>
|
||||
<n-td>Manage | View Logs | Dashboard | Scale Out | More</n-td>
|
||||
</n-tr>
|
||||
</n-tbody>
|
||||
</n-table>
|
||||
</n-with-padding>
|
||||
<n-nimbus-service-layout
|
||||
name="已经不需要，一些挽留字句"
|
||||
:items="[
|
||||
{
|
||||
name: '第一个服务'
|
||||
},
|
||||
{
|
||||
name: '第二个服务',
|
||||
childItems: [
|
||||
{
|
||||
name: '二级菜单１'
|
||||
},
|
||||
{
|
||||
name: '二级菜单2'
|
||||
},
|
||||
{
|
||||
name: '二级菜单3'
|
||||
},
|
||||
{
|
||||
name: '二级菜单4'
|
||||
},
|
||||
{
|
||||
name: '二级菜单5'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '第三个服务'
|
||||
}
|
||||
]"
|
||||
>
|
||||
<n-gradient-text>你觉得应该怎么写</n-gradient-text>
|
||||
<textarea
|
||||
rows="50"
|
||||
style="width: 100%;"
|
||||
><n-nimbus-service-layout
|
||||
name="已经不需要，一些挽留字句"
|
||||
:items="[
|
||||
{
|
||||
name: '第一个服务'
|
||||
},
|
||||
{
|
||||
name: '第二个服务',
|
||||
childItems: [
|
||||
{
|
||||
name: '二级菜单１'
|
||||
},
|
||||
{
|
||||
name: '二级菜单2'
|
||||
},
|
||||
{
|
||||
name: '二级菜单3'
|
||||
},
|
||||
{
|
||||
name: '二级菜单4'
|
||||
},
|
||||
{
|
||||
name: '二级菜单5'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '第三个服务'
|
||||
}
|
||||
]"
|
||||
>
|
||||
<n-gradient-text>你觉得应该怎么写</n-gradient-text>
|
||||
...
|
||||
</n-nimbus-service-layout></textarea>
|
||||
</n-nimbus-service-layout>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
@ -50,7 +80,6 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
92
demo/components/tableDemo.vue
Normal file
92
demo/components/tableDemo.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="doc">
|
||||
<h1>表格 / n-table</h1>
|
||||
<hr>
|
||||
<h2>基本用法</h2>
|
||||
<n-table>
|
||||
<n-thead>
|
||||
<n-tr>
|
||||
<n-th>ID</n-th>
|
||||
<n-th>Cluster</n-th>
|
||||
<n-th>Cluster Type</n-th>
|
||||
<n-th>Tags</n-th>
|
||||
<n-th>Network Type</n-th>
|
||||
<n-th>Cluster Status</n-th>
|
||||
<n-th>Nodes</n-th>
|
||||
<n-th>Location</n-th>
|
||||
<n-th>Version</n-th>
|
||||
<n-th>Actions</n-th>
|
||||
</n-tr>
|
||||
</n-thead>
|
||||
<n-tbody>
|
||||
<n-tr
|
||||
v-for="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]"
|
||||
:key="i"
|
||||
>
|
||||
<n-td>1</n-td>
|
||||
<n-td>Name1</n-td>
|
||||
<n-td>Type1</n-td>
|
||||
<n-td>bla</n-td>
|
||||
<n-td>blablabla</n-td>
|
||||
<n-td>Running</n-td>
|
||||
<n-td>6</n-td>
|
||||
<n-td>Beijing</n-td>
|
||||
<n-td>1.12.6-aliyun.1</n-td>
|
||||
<n-td>Manage | View Logs | Dashboard | Scale Out | More</n-td>
|
||||
</n-tr>
|
||||
</n-tbody>
|
||||
</n-table>
|
||||
<br>
|
||||
<textarea rows="50"><n-table>
|
||||
<n-thead>
|
||||
<n-tr>
|
||||
<n-th>ID</n-th>
|
||||
<n-th>Cluster</n-th>
|
||||
<n-th>Cluster Type</n-th>
|
||||
<n-th>Tags</n-th>
|
||||
<n-th>Network Type</n-th>
|
||||
<n-th>Cluster Status</n-th>
|
||||
<n-th>Nodes</n-th>
|
||||
<n-th>Location</n-th>
|
||||
<n-th>Version</n-th>
|
||||
<n-th>Actions</n-th>
|
||||
</n-tr>
|
||||
</n-thead>
|
||||
<n-tbody>
|
||||
<n-tr
|
||||
v-for="i in [1,2,3,4,5]"
|
||||
:key="i"
|
||||
>
|
||||
<n-td>1</n-td>
|
||||
<n-td>Name1</n-td>
|
||||
<n-td>Type1</n-td>
|
||||
<n-td>bla</n-td>
|
||||
<n-td>blablabla</n-td>
|
||||
<n-td>Running</n-td>
|
||||
<n-td>6</n-td>
|
||||
<n-td>Beijing</n-td>
|
||||
<n-td>1.12.6-aliyun.1</n-td>
|
||||
<n-td>Manage | View Logs | Dashboard | Scale Out | More</n-td>
|
||||
</n-tr>
|
||||
</n-tbody>
|
||||
</n-table></textarea>
|
||||
<hr>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.doc {
|
||||
width: 1200px;
|
||||
margin: auto;
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 3em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -31,6 +31,9 @@
|
||||
<br>
|
||||
<router-link to="/n-switch">
|
||||
开关 / n-switch
|
||||
</router-link><br>
|
||||
<router-link to="/n-table">
|
||||
表格 / n-table
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -27,6 +27,7 @@ import iconDemo from './components/iconDemo'
|
||||
import checkboxDemo from './components/checkboxDemo'
|
||||
import roundButtonDemo from './components/roundButtonDemo'
|
||||
import switchDemo from './components/switchDemo'
|
||||
import tableDemo from './components/tableDemo'
|
||||
import demo from './demo'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
@ -56,7 +57,8 @@ const routes = [
|
||||
{ path: '/n-icon', component: iconDemo },
|
||||
{ path: '/n-checkbox', component: checkboxDemo },
|
||||
{ path: '/n-round-button', component: roundButtonDemo },
|
||||
{ path: '/n-switch', component: switchDemo }
|
||||
{ path: '/n-switch', component: switchDemo },
|
||||
{ path: '/n-table', component: tableDemo }
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "naive-ui",
|
||||
"version": "0.1.13",
|
||||
"version": "0.1.14",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -4,11 +4,6 @@
|
||||
class="body"
|
||||
:class="{ 'is-collapsed': isCollapsed, active: !isCollapsed }"
|
||||
>
|
||||
<div class="header">
|
||||
<span class="content">
|
||||
Service Management
|
||||
</span>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
<div
|
||||
@ -24,11 +19,11 @@
|
||||
:size="22"
|
||||
/>
|
||||
</div>
|
||||
Administration
|
||||
{{ name }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="item in items"
|
||||
v-for="item in itemsWithCollapseStatus"
|
||||
:key="item.name"
|
||||
>
|
||||
<div
|
||||
@ -84,40 +79,24 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'NNimbusServiceLayout',
|
||||
props: {},
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isCollapsed: false,
|
||||
activeItemName: 'Service Management',
|
||||
items: [
|
||||
{
|
||||
name: 'Service Management'
|
||||
},
|
||||
{
|
||||
name: 'Service Type Management',
|
||||
isCollapsed: false,
|
||||
childItems: [
|
||||
{
|
||||
name: 'Clusters'
|
||||
},
|
||||
{
|
||||
name: 'Notes'
|
||||
},
|
||||
{
|
||||
name: 'Volume'
|
||||
},
|
||||
{
|
||||
name: 'Namespaces'
|
||||
},
|
||||
{
|
||||
name: 'Authorization'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'User Management'
|
||||
}
|
||||
]
|
||||
itemsWithCollapseStatus: this.items.map(item => ({
|
||||
...item,
|
||||
isCollapsed: true
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -128,9 +107,9 @@ export default {
|
||||
this.activeItemName = itemName
|
||||
},
|
||||
toggleGroupHeaderCollapse (headerName) {
|
||||
const headerIndex = this.items.findIndex(item => item.name === headerName && item.childItems)
|
||||
const headerIndex = this.itemsWithCollapseStatus.findIndex(item => item.name === headerName && item.childItems)
|
||||
if (headerIndex + 1) {
|
||||
this.items[headerIndex].isCollapsed = !this.items[headerIndex].isCollapsed
|
||||
this.itemsWithCollapseStatus[headerIndex].isCollapsed = !this.itemsWithCollapseStatus[headerIndex].isCollapsed
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
|
||||
.body {
|
||||
& {
|
||||
padding: 21px 48px;
|
||||
position: absolute;
|
||||
left: 272px;
|
||||
right: 0px;
|
||||
@ -26,26 +27,6 @@
|
||||
&.is-collapsed {
|
||||
left: 48px;
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
padding-top: 21px;
|
||||
padding-bottom: 21px;
|
||||
padding-left: 48px;
|
||||
font-size: 16px;
|
||||
.content {
|
||||
background:linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user