浏览代码

add NodeViewChildListGroup component

axolotle 3 年之前
父节点
当前提交
a9fd6cf9ab
共有 2 个文件被更改,包括 42 次插入0 次删除
  1. 41 0
      src/components/nodes/NodeViewChildListGroup.vue
  2. 1 0
      src/components/nodes/index.js

+ 41 - 0
src/components/nodes/NodeViewChildListGroup.vue

@@ -0,0 +1,41 @@
+<template>
+  <nav class="node-view-child-list-group">
+    <b-list-group>
+      <b-list-group-item
+        v-for="child in children" :key="child.id"
+        :variant="child.variant"
+        href="javascript:;"
+        @click="$parent.$emit('open-child', { childId: child.id })"
+      >
+        {{ $t('variants.' + child.variant) }}
+      </b-list-group-item>
+    </b-list-group>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'NodeViewChildListGroup',
+
+  props: {
+    children: { type: Array, required: true }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.node-view-child-list-group {
+  .list-group {
+    font-family: $font-family-base;
+    font-weight: $font-weight-bold;
+
+    @include media-breakpoint-up(sm) {
+      font-size: 1.75rem;
+    }
+
+    &-item {
+
+    }
+  }
+}
+</style>

+ 1 - 0
src/components/nodes/index.js

@@ -1,4 +1,5 @@
 export { default as NodeViewChildList } from './NodeViewChildList'
+export { default as NodeViewChildListGroup } from './NodeViewChildListGroup'
 export { default as NodeViewTitle } from './NodeViewTitle'
 export { default as NodeViewHeaderRef } from './NodeViewHeaderRef'
 export { default as NodeViewHeaderProd } from './NodeViewHeaderProd'