vue 组件标签里面套组件_简单的Vue 2组件，使您可以通过移动底线来制作标签

vue 组件标签里面套组件

带有活动线的Vue选项卡 (Vue-tabs-with-active-line)

Simple Vue 2 component, that allows you to make tabs with moving bottom line.

简单的Vue 2组件，使您可以制作带有移动底线的标签。

View demo 查看演示 Default-example 默认示例 Disabled-example 禁用示例

安装 (Install)

via NPM

通过NPM

npm install vue-tabs-with-active-line --save

用法 (Usage)

Import the component

导入组件

import Tabs from 'vue-tabs-with-active-line';

Define the data for props tabs, currentTab, and method for onClick callback

定义props tabs ， currentTab和onClick回调方法的数据

export default {
  components: {
    Tabs,
  },
  data: () => ({
    tabs: [
      { title: 'Tab 1', value: 'tab1' },
      { title: 'Tab 2', value: 'tab2' },
      { title: 'Tab 3', value: 'tab3', }
    ],
    currentTab: 'tab1',
  }),
  methods: {
    handleClick(newTab) {
      this.currentTab = newTab;
    },
  },
}
</script>

here's the HTML structure generated from the data entered:

这是根据输入的数据生成HTML结构：

<nav class="tabs">
    <button class="tabs__item tabs__item_active"> Tab 1 </button> <!-- active tab -->
    <button class="tabs__item"> Tab 2 </button>
    <button class="tabs__item"> Tab 3 </button>

    <div class="tabs__active-line"></div>
  </nav>

Finally, add some styles for component elements:

最后，为组件元素添加一些样式：

• .tabs - component wrapper

  .tabs组件包装器

• .tabs__item - button

  .tabs__item按钮

• .tabs__item_active - active button

  .tabs__item_active活动按钮

• .tabs__active-line - bottom line

  .tabs__active-line底线

Be sure to add position: relative; for .tabs class

确保添加position: relative; 对于.tabs类

and position: absolute; with bottom, left, height, background-color properties for .tabs__active-line class

和position: absolute; .tabs__active-line类的bottom, left, height, background-color属性

在下面，您将找到CSS和SCSS的基本样式 (Below you'll find basic style in CSS and SCSS)

CSS EXAMPLE

CSS示例

.tabs {
  position: relative;
  margin: 0 auto;
}

.tabs__item {
  display: inline-block;
  margin: 0 5px;
  padding: 10px;
  padding-bottom: 8px;
  font-size: 16px;
  letter-spacing: 0.8px;
  color: gray;
  text-decoration: none;
  border: none;
  background-color: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s;
}

.tabs__item_active {
  color: black;
}

.tabs__item:hover {
  border-bottom: 2px solid gray;
  color: black;
}

.tabs__item:focus {
  outline: none;
  border-bottom: 2px solid gray;
  color: black;
}

.tabs__item:first-child {
  margin-left: 0;
}

.tabs__item:last-child {
  margin-right: 0;
}

.tabs__active-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: black;
  transition: transform 0.4s ease, width 0.4s ease;
}

SCSS Example

SCSS示例

.tabs {
  position: relative;
  margin: 0 auto;

  &__active-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: black;
    transition: transform 0.4s ease, width 0.4s ease;
  }

  &__item {
    display: inline-block;
    margin: 0 5px;
    padding: 10px;
    padding-bottom: 8px;
    font-size: 16px;
    letter-spacing: 0.8px;
    color: gray;
    text-decoration: none;
    border: none;
    background-color: transparent;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.25s;

    &_active {
      color: black;
    }

    &:hover {
      border-bottom: 2px solid gray;
      color: black;
    }

    &:focus {
      outline: none;
      border-bottom: 2px solid gray;
      color: black;
    }

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}

道具 (Props)

tabs (tabs)

type: Array, required: true

类型： Array ，必需： true

The array must contain objects with the following properties:

数组必须包含具有以下属性的对象：

• title - required, type string. Title of tab

  title必需，输入string 。 标签标题

• value - required, type string. Value of tab

  value -必需，键入string 。 标签的价值

• disabled - optional, type string. Disabled attribute

  disabled可选，键入string 。 禁用属性

currentTab (currentTab)

type: String, required: true.

类型： String ，必填： true 。

Required: true

必填：true

onClick (onClick)

type: Function, required: true.

类型： Function ，必需： true 。

Returns new tab value when clicked

单击时返回新的选项卡值

wrapperClass (wrapperClass)

type: String, required: false.

类型： String ，必填： false 。

Custom class for container

容器的自定义类

tabClass (tabClass)

type: String, required: false.

类型： String ，必填： false 。

Custom class for tab item

选项卡项目的自定义类

tabActiveClass (tabActiveClass)

type: String, required: false.

类型： String ，必填： false 。

Custom class for active tab item

活动标签项目的自定义类别

lineClass (lineClass)

type: String, required: false.

类型： String ，必填： false 。

Custom class for active line

活动线路的自定义类别

如何在本地运行 (How to run it locally)

1. Clone repository: git clone [email protected]:karambafe/vue-tabs-with-active-line.git

   克隆存储库： git clone [email protected] :karambafe/vue-tabs-with-active-line.git

2. Install cli-service-global: npm install -g @vue/cli-service-global Vue CLI 3 docs

   安装cli-service-global： npm install -g @vue/cli-service-global Vue CLI 3文档

3. Run any vue file with hot reload and static server: vue serve demo-src/App.vue

   使用热重载和静态服务器运行任何vue文件： vue serve demo-src/App.vue

翻译自: https://vuejsexamples.com/simple-vue-2-component-that-allows-you-to-make-tabs-with-moving-bottom-line/

vue 组件标签里面套组件