Tabs 标签页

选项卡切换组件；其实这个模块的内容就是 Tabbar 标签栏 + 内容区域；所以就没有单独抽取为组件，转而函数 + html 模板的形式。

引入

手动引入

如果没有使用 litosui-unplugin-resolver 自动引入, 则需要手动引入

import { Tabs as LTabs } from "litos-io";
import "litos-ui/styles/tabs.css";

// 该函数会初始化所有 .l-tabs 标签页
const tabs = LTabs.init();

tabs.destroy(); // 页面关闭时, 释放

演示

基础用法

基础的、简洁的标签页。

简单登录注册

通过组件搭配: form 表单、input 输入框、button 按钮、tabbar 选项卡 等组件，实现简单的登录注册。

卡片风格

通过设置 tabbar 的 type=card 来使用卡片风格。如果需要为卡片风格的同时添加内容边框，需要添加 l-tabs-card 类

基本结构

<div class="l-tabs">
  <l-tabbar class="l-tabs__bar" name="1">
    <l-tabbar-item name="1"></l-tabbar-item>
    <l-tabbar-item name="2"></l-tabbar-item>
  </l-tabbar>
  <div class="l-tabs-main">
    <div class="l-tabs__content" l-tab="1"></div>
    <div class="l-tabs__content" l-tab="2"></div>
  </div>
</div>