使用方式

<link rel="stylesheet" href="/components/style/tabs.css" type="text/css" />
<script defer src="/components/js/tabs.js" type="text/javascript"></script>

<div class="st_tabs" placement="top" st-model="tabsModel1" change="tabsChange1">
  <div class="st_tabs_header">
    <div class="st_tabs_nav_wrap">
      <div class="st_tabs_nav_scroll">
        <div class="st_tabs_nav">
        <div class="st_tabs_active_bar"></div>
        <div class="st_tabs_item is_active" key="0">用户管理</div>
        <div class="st_tabs_item" key="1">配置管理</div>
        <div class="st_tabs_item" key="2">角色管理</div>
        <div class="st_tabs_item" key="3">定时任务补偿</div>
        </div>
      </div>
    </div>
  </div>
  <div class="st_tabs_content">
    <div class="st_tab_pane" key="0">用户管理</div>
    <div class="st_tab_pane" key="1">配置管理</div>
    <div class="st_tab_pane" key="2">角色管理</div>
    <div class="st_tab_pane" key="3">定时任务补偿</div>
  </div>
</div>

<div class="st_tabs" placement="left" style="height: 200px" st-model="tabsModel2" change="tabsChange2">
  <div class="st_tabs_header">
    <div class="st_tabs_nav_wrap">
      <div class="st_tabs_nav_scroll">
        <div class="st_tabs_nav">
        <div class="st_tabs_active_bar"></div>
        <div class="st_tabs_item" key="0">用户管理</div>
        <div class="st_tabs_item is_active" key="1">配置管理</div>
        <div class="st_tabs_item" key="2">角色管理</div>
        <div class="st_tabs_item" key="3">定时任务补偿</div>
        </div>
      </div>
    </div>
  </div>
  <div class="st_tabs_content">
    <div class="st_tab_pane" key="0">用户管理</div>
    <div class="st_tab_pane" key="1">配置管理</div>
    <div class="st_tab_pane" key="2">角色管理</div>
    <div class="st_tab_pane" key="3">定时任务补偿</div>
  </div>
</div>

<div class="st_tabs st_tabs_border_card" placement="top" st-model="tabsModel3" change="tabsChange3">
  <div class="st_tabs_header">
    <div class="st_tabs_nav_wrap">
      <div class="st_tabs_nav_scroll">
        <div class="st_tabs_nav">
        <div class="st_tabs_item" key="0">用户管理</div>
        <div class="st_tabs_item" key="1">配置管理</div>
        <div class="st_tabs_item is_active" key="2">角色管理</div>
        <div class="st_tabs_item" key="3">定时任务补偿</div>
        </div>
      </div>
    </div>
  </div>
  <div class="st_tabs_content">
    <div class="st_tab_pane" key="0">用户管理</div>
    <div class="st_tab_pane" key="1">配置管理</div>
    <div class="st_tab_pane" key="2">角色管理</div>
    <div class="st_tab_pane" key="3">定时任务补偿</div>
  </div>
</div>

<div
  class="st_tabs st_tabs_border_card"
  placement="left"
  style="height: 200px"
  st-model="tabsModel4"
  change="tabsChange4"
>
  <div class="st_tabs_header">
    <div class="st_tabs_nav_wrap">
      <div class="st_tabs_nav_scroll">
        <div class="st_tabs_nav">
        <div class="st_tabs_item" key="0">用户管理</div>
        <div class="st_tabs_item" key="1">配置管理</div>
        <div class="st_tabs_item" key="2">角色管理</div>
        <div class="st_tabs_item is_active" key="3">定时任务补偿</div>
        </div>
      </div>
    </div>
  </div>
  <div class="st_tabs_content">
    <div class="st_tab_pane" key="0">用户管理</div>
    <div class="st_tab_pane" key="1">配置管理</div>
    <div class="st_tab_pane" key="2">角色管理</div>
    <div class="st_tab_pane" key="3">定时任务补偿</div>
  </div>
</div>

属性

属性	说明	类型	可选值	默认值
change	选项值变化回调方法	function	-	-
placement	位置	string	top/left	-
class	卡片类型	string	st_tabs_border_card	-
key	选项标记	string	-	-