m-tabs

m-tabs 移动端标签页选项卡切换组件

Usage no npm install needed!

<script type="module">
  import mTabs from 'https://cdn.skypack.dev/m-tabs';
</script>

README

m-tabs 选项卡/标签页

选项卡/标签页切换组件。

何时使用

TAB栏让用户可以在不同子任务、视图、模式之间切换, 它具有全局导航的作用，是全局功能的主要展示和切换区域，一个TAB标记一个核心功能，TAB之间可以快速点击切换

M-Sui Design 将选项卡分为两类：

  • Tab Bar －A.常规样式（优先选用）:它的交互方式允许左右滑动，用于一定空间内无法置入全部标签内容的情况下使用，一栏最多可承载5个标签，多于5个标签时，可以把剩余标签以列表形式收在“选择”内； －B.CapsuleTAB 胶囊样式（局限性强，建议慎用）：可用嵌入头部导航条使用
  • APP TAB:一般用于模拟原生app，

API

Tabs

参数 说明 类型 默认值
key 初始化当前Tabs的 key String
defaultActiveKey 初始化选中面板的 key，如果没有设置则默认第一个 String 第一个面板
onChange 切换面板的回调 Function 无
centered 是否为嵌入式选项卡（底色橙色） boolean false
type 页签的基本样式，可选 capsule、app 、nav String 'nav'

Tabs.TabPane

参数 说明 类型 默认值
key 初始化当前TabPane的 key String 无
tab 选项卡头显示文字 React.Element or String 无