feat: add component c-tabs

clair-design · Nov 28, 2018 · 488d483 · 488d483
1 parent 4c7856e
commit 488d483
Show file tree

Hide file tree

Showing 6 changed files with 601 additions and 1 deletion.
diff --git a/docs/layouts/component.vue b/docs/layouts/component.vue
@@ -87,7 +87,7 @@ export default {
           title: '导航',
           icon: 'navigation',
           children: [
-            { title: '标签页', name: 'tab' },
+            { title: '标签页', name: 'tabs' },
             { title: '导航菜单', name: 'menu' },
             { title: '面包屑', name: 'breadcrumb' },
             { title: '工具栏', name: 'toolbar' },

diff --git a/src/components/tabs/index.css b/src/components/tabs/index.css
@@ -0,0 +1,147 @@
+/**
+* c-tabs
+*/
+@import url('../../styles/variables.css');
+
+.c-tabs {
+  display: flex;
+}
+
+.tabs-nav {
+  position: relative;
+  display: flex;
+  list-style: none;
+  transition: color cubic-bezier(0.645, 0.045, 0.355, 1);
+  border: transparent;
+
+  & .tabs-nav__item {
+    cursor: pointer;
+    padding: 0 0.6em;
+    line-height: 2.8em;
+    color: var(--black);
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &:hover,
+    &.is-active {
+      color: var(--primary-color);
+    }
+
+    &.disabled {
+      color: color(var(--gray) l(80%));
+      cursor: not-allowed;
+    }
+  }
+
+  & .tabs-nav--item:last-child {
+    margin-right: 0;
+  }
+}
+
+.c-tabs--card {
+  display: block;
+  border: 1px solid color(var(--gray) l(90%));
+
+  & .tabs-nav {
+    background: color(var(--primary-color) l(50%) a(0.1));
+
+    & .tabs-nav__item {
+      padding: 0 1em;
+      border-left: 1px solid transparent;
+      border-right: 1px solid transparent;
+
+      &.is-active {
+        background-color: #fff;
+        position: relative;
+
+        &::after {
+          position: absolute;
+          z-index: 1;
+          content: '';
+          width: 100%;
+          height: 1px;
+          background-color: #fff;
+          left: 0;
+          bottom: -1px;
+        }
+      }
+
+      &:first-child.is-active {
+        border-right: 1px solid color(var(--gray) l(90%));
+      }
+
+      &:not(:first-child).is-active {
+        border-left-color: color(var(--gray) l(90%));
+        border-right-color: color(var(--gray) l(90%));
+      }
+    }
+  }
+}
+
+.nav-bar__active {
+  z-index: 1;
+  position: absolute;
+  box-sizing: border-box;
+  background-color: var(--primary-color);
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.c-tabs--top {
+  flex-direction: column;
+}
+
+.c-tabs--bottom {
+  flex-direction: column-reverse;
+}
+
+.c-tabs--top .tabs-nav,
+.c-tabs--bottom .tabs-nav {
+  flex-direction: row;
+  border-bottom: 1px solid color(var(--gray) l(90%));
+
+  & .tabs-nav__item {
+    margin-right: 1.5em;
+  }
+
+  & .nav-bar__active {
+    height: 2px;
+    bottom: -1px;
+  }
+}
+
+.c-tabs--left {
+  flex-direction: row;
+
+  & .tabs-nav {
+    flex-direction: column;
+    border-right: 1px solid color(var(--gray) l(90%));
+
+    & .nav-bar__active {
+      width: 2px;
+      right: -1px;
+    }
+  }
+}
+
+.c-tabs--right {
+  flex-direction: row-reverse;
+
+  & .tabs-nav {
+    flex-direction: column;
+    border-left: 1px solid color(var(--gray) l(90%));
+
+    & .nav-bar__active {
+      width: 2px;
+      left: -1px;
+    }
+  }
+}
+
+.c-tabs--left > .tabs-nav__item:not(:nth-last-child(2)),
+.c-tabs--right > .tabs-nav__item:not(:nth-last-child(2)) {
+  margin-bottom: 0.6em;
+}
+
+.tab-pane__content {
+  padding: 0.6em;
+  flex: 1;
+}
diff --git a/src/components/tabs/index.md b/src/components/tabs/index.md
@@ -0,0 +1,193 @@
+---
+title: Tabs
+route: /component/tabs
+layout: component
+---
+
+# Tabs
+
+页面内容器切换组件。
+
+## 基础标签
+
+给`<c-tabs>`设置属性`activeIndex`的值，可指定当前展示容器，默认值为1。
+
+`activeIndex`的值不要超出`<c-tab-pane`的个数，否则重置该值为1。
+
+```html
+<c-tabs>
+  <c-tab-pane label="Tab1">
+    惜诵以致愍兮，发愤以抒情。<br>
+    所作忠而言之兮，指苍天以为正。
+  </c-tab-pane>
+  <c-tab-pane label="Tab2">
+    屈原既放，三年不得复见。<br>
+    竭知尽忠而蔽障于谗。<br>
+    心烦虑乱，不知所从。
+  </c-tab-pane>
+  <c-tab-pane label="Tab3">
+    桂树丛生兮山之幽，偃蹇连蜷兮枝相缭。<br>
+    山气巄嵷兮石嵯峨，溪谷崭岩兮水曾波。
+  </c-tab-pane>
+</c-tabs>
+<br><br>
+<c-tabs activeIndex="2">
+  <c-tab-pane label="Tab1">
+    惜诵以致愍兮，发愤以抒情。<br>
+    所作忠而言之兮，指苍天以为正。
+  </c-tab-pane>
+  <c-tab-pane label="Tab2">
+    屈原既放，三年不得复见。<br>
+    竭知尽忠而蔽障于谗。<br>
+    心烦虑乱，不知所从。
+  </c-tab-pane>
+  <c-tab-pane label="Tab3">
+    桂树丛生兮山之幽，偃蹇连蜷兮枝相缭。<br>
+    山气巄嵷兮石嵯峨，溪谷崭岩兮水曾波。
+  </c-tab-pane>
+</c-tabs>
+```
+
+## 自定义标签
+
+通过添加`slot="label"`给标签添加自定义内容。
+
+```html
+<c-tabs>
+  <c-tab-pane>
+    <span slot="label">
+      <c-icon name="video" size="1em" valign="middle"></c-icon>
+      video
+    </span>
+    It's not what happens to you, but how you react to it that matters.
+  </c-tab-pane>
+  <c-tab-pane>
+    <span slot="label">
+      <c-icon name="sun" size="1em" valign="middle"></c-icon>
+      sun
+    </span>
+    Be the type of person you want to meet.
+  </c-tab-pane>
+  <c-tab-pane>
+    <span slot="label">
+      <c-icon name="slack" size="1em" valign="middle"></c-icon>
+      slack
+    </span>
+    Imagination is more important than knowledge. <br>
+    Knowledge is limited. <br>
+    Imagination encircles the world.
+  </c-tab-pane>
+</c-tabs>
+```
+
+## 使标签不可用
+通过给`<c-tab-pane>`设置`disabled`，使当前标签页呈现不可点击状态。
+
+```html
+<c-tabs activeIndex="2">
+  <c-tab-pane label="video" disabled>
+    It's not what happens to you, but how you react to it that matters.
+  </c-tab-pane>
+  <c-tab-pane label="sun">
+    Be the type of person you want to meet.
+  </c-tab-pane>
+  <c-tab-pane label="slack">
+    Imagination is more important than knowledge. <br>
+    Knowledge is limited. <br>
+    Imagination encircles the world.
+  </c-tab-pane>
+</c-tabs>
+```
+
+## 标签位置
+通过给`<c-tabs>`设置`position`值，更换标签位置。
+```html
+<div style="margin-bottom: 2em;">
+  <c-radio-group
+    :options="options"
+    v-model="position"
+    button
+  />
+</div>
+
+<c-tabs :position="position" activeIndex="3">
+  <c-tab-pane label="Tab1">
+    惜诵以致愍兮，发愤以抒情。<br>
+    所作忠而言之兮，指苍天以为正。
+  </c-tab-pane>
+  <c-tab-pane label="Tab2">
+    屈原既放，三年不得复见。<br>
+    竭知尽忠而蔽障于谗。<br>
+    心烦虑乱，不知所从。
+  </c-tab-pane>
+  <c-tab-pane label="Tab3">
+    桂树丛生兮山之幽，偃蹇连蜷兮枝相缭。<br>
+    山气巄嵷兮石嵯峨，溪谷崭岩兮水曾波。
+  </c-tab-pane>
+</c-tabs>
+
+<script>
+export default {
+  data(){
+    return {
+      position: 'top',
+      options: [
+        { label: 'top', value: 'top' },
+        { label: 'bottom', value: 'bottom' },
+        { label: 'left', value: 'left' },
+        { label: 'right', value: 'right' }
+      ]
+    }
+  }
+}
+</script>
+```
+
+## 事件捕捉
+`@handleClicked`可捕捉触发切换标签事件。
+```html
+<c-tabs activeIndex="2" @handleClicked="onClick">
+  <c-tab-pane label="video" disabled>
+    It's not what happens to you, but how you react to it that matters.
+  </c-tab-pane>
+  <c-tab-pane label="sun">
+    Be the type of person you want to meet.
+  </c-tab-pane>
+  <c-tab-pane label="slack">
+    Imagination is more important than knowledge. <br>
+    Knowledge is limited. <br>
+    Imagination encircles the world.
+  </c-tab-pane>
+</c-tabs>
+
+<script>
+export default {
+  methods: {
+    onClick (value) {
+      alert(`第${value}个标签，有幸被点...`)
+    }
+  }
+}
+</script>
+```
+
+## 选项卡形式标签
+在`<c-tabs>`上设置`mode="card"`，更换为选项卡模式（不支持位置变换）。
+
+```html
+<c-tabs mode="card">
+  <c-tab-pane label="九章">
+    惜诵以致愍兮，发愤以抒情。<br>
+    所作忠而言之兮，指苍天以为正。
+  </c-tab-pane>
+  <c-tab-pane label="卜居">
+    屈原既放，三年不得复见。<br>
+    竭知尽忠而蔽障于谗。<br>
+    心烦虑乱，不知所从。
+  </c-tab-pane>
+  <c-tab-pane label="招隐士">
+    桂树丛生兮山之幽，偃蹇连蜷兮枝相缭。<br>
+    山气巄嵷兮石嵯峨，溪谷崭岩兮水曾波。
+  </c-tab-pane>
+</c-tabs>
+```