@yik_l/tabs NPM

使用教程

import Tabs from "@yik_l/tabs";
/**
 * @description: 自定义样式的Tabs
 * @param {*} tabs 获取容器元素  必填
 * @param {*} tabsItem 获取容器子元素 必填
 * @param {*} index 激活第几个元素 默认:0
 * @param {*} gap 间隔多少px 可以写正负值  例：+1 -1  默认：0
 * @param {*} ms 激活滑动所需的秒数 默认：0.5
 * @return {*}
 */
new Tabs({
  tabs: ".tabs",
  tabsItem: ".tabs-item",
  index: 3,
  gap: (100 - 10) / 2,
  ms: 0.5,
});

实例地址：

<!--
 * @Author: LiuYan
 * @Date: 2022-11-14 20:06:32
 * @LastEditors: LiuYan
 * @LastEditTime: 2022-11-14 22:02:10
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .tabs-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        margin-right: 10px;
      }
      .tabs-active {
        width: 10px !important;
      }
    </style>
  </head>
  <body>
    <div style="padding: 10px">
      <div class="tabs">
        <div class="tabs-item">第一个</div>
        <div class="tabs-item">第二个</div>
        <div class="tabs-item">第三个</div>
        <div class="tabs-item">第四个</div>
        <div class="tabs-active"></div>
      </div>
    </div>
  </body>
  <script type="module">
    import Tabs from "/node_modules/@yik_l/tabs/index.js";
    /**
     * @description: 自定义样式的Tabs
     * @param {*} tabs 获取容器元素  必填
     * @param {*} tabsItem 获取容器子元素 必填
     * @param {*} index 激活第几个元素 默认:0
     * @param {*} gap 间隔多少px 可以写正负值  例：+1 -1  默认：0
     * @param {*} ms 激活滑动所需的秒数 默认：0.5
     * @return {*}
     */
    new Tabs({
      tabs: ".tabs",
      tabsItem: ".tabs-item",
      index: 3,
      gap: (100 - 10) / 2,
      ms: 0.5,
    });
  </script>
</html>

@infinitebrahmanuniverse/nolb-_yi @zalastax/nolb-_yi

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago

使用教程

实例 地址：

实例地址：