https://taroify.com/static/js/async/route-b8fe75e4946e.92c71329fc.js

1"use strict";(self.rspackChunk_taroify_site=self.rspackChunk_taroify_site||[]).push([[7158],{4629:function(s,n,r){r.r(n);var e=r(8171),i=r(7301),o=r(9984),l=r(1736);function a(s){var n=(0,e._)({a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr"},(0,l.R)(),s.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.h1,{id:"tabbar-标签栏",children:[(0,o.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#tabbar-标签栏",children:"#"}),"Tabbar 标签栏"]}),"\n",(0,o.jsxs)(n.h3,{id:"介绍",children:[(0,o.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#介绍",children:"#"}),"介绍"]}),"\n",(0,o.jsx)(n.p,{children:"底部导航栏，用于在不同页面之间进行切换。"}),"\n",(0,o.jsxs)(n.h3,{id:"引入",children:[(0,o.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#引入",children:"#"}),"引入"]}),"\n",(0,o.jsx)(o.Fragment,{children:(0,o.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",fold:!0,height:"420",children:(0,o.jsx)(n.code,{children:(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Tabbar } "}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "@taroify/core"'})]})})})}),"\n",(0,o.jsxs)(n.h2,{id:"代码演示",children:[(0,o.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#代码演示",children:"#"}),"代码演示"]}),"\n",(0,o.jsxs)(n.h3,{id:"基础用法",children:[(0,o.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#基础用法",children:"#"}),"基础用法"]}),"\n",(0,o.jsx)(o.Fragment,{children:(0,o.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",fold:!0,height:"420",children:(0,o.jsxs)(n.code,{children:[(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Tabbar } "}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "@taroify/core"'})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { FriendsOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" HomeOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" Search"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" SettingOutlined } "}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "@taroify/icons"'})]}),"\n",(0,o.jsx)(n.span,{className:"line"}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" BasicTabbar"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"() {"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"HomeOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>标签</"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Search"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>标签</"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"FriendsOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>标签</"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"SettingOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>标签</"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    </"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  )"})}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,o.jsx)(n.span,{className:"line"})]})})}),"\n",(0,o.jsxs)(n.h3,{id:"通过标识匹配",children:[(0,o.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#通过标识匹配",children:"#"}),"通过标识匹配"]}),"\n",(0,o.jsxs)(n.p,{children:["在标签 ",(0,o.jsx)(n.code,{children:"Tabbar.TabItem"})," 指定 ",(0,o.jsx)(n.code,{children:"value"})," 属性的情况下，",(0,o.jsx)(n.code,{children:"value"})," 的值为当前标签的 ",(0,o.jsx)(n.code,{children:"value"}),"。"]}),"\n",(0,o.jsx)(o.Fragment,{children:(0,o.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",fold:!0,height:"420",children:(0,o.jsxs)(n.code,{children:[(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Tabbar } "}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "@taroify/core"'})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { FriendsOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" HomeOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" Search"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" SettingOutlined } "}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "@taroify/icons"'})]}),"\n",(0,o.jsx)(n.span,{className:"line"}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" KeyTabbar"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"}

1,children:"() {"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" defaultValue"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"1"'}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"1"'}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"HomeOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>"})]}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"        标签"})}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      </"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"2"'}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Search"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>"})]}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"        标签"})}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      </"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"3"'}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"FriendsOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>"})]}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"        标签"})}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      </"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"4"'}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"SettingOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>"})]}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"        标签"})}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      </"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    </"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  )"})}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,o.jsxs)(n.h3,{id:"徽标提示",children:[(0,o.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#徽标提示",children:"#"}),"徽标提示"]}),"\n",(0,o.jsxs)(n.p,{children:["设置 ",(0,o.jsx)(n.code,{children:"badge"})," 属性为 ",(0,o.jsx)(n.code,{children:"true"})," 后，会在图标右上角展示一个小红点；设置 ",(0,o.jsx)(n.code,{children:"badge"})," 属性为 ",(0,o.jsx)(n.code,{children:"number"})," 后，会在图标右上角展示相应的徽标。"]}),"\n",(0,o.jsx)(o.Fragment,{children:(0,o.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",fold:!0,height:"420",children:(0,o.jsxs)(n.code,{children:[(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Badge"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" Tabbar } "}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "@taroify/core"'})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { FriendsOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" HomeOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" Search"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" SettingOutlined } "}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "@taroify/icons"'})]}),"\n",(0,o.jsx)(n.span,{className:"line"}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" BadgeTabbar"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"}

1,children:"() {"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"HomeOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>标签</"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" badge"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Search"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>"})]}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"        标签"})}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      </"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" badge"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"5"'}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"FriendsOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>"})]}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"        标签"})}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      </"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" badge"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Badge"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" content"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"100"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"} "}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"max"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"99"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"} />} "}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"SettingOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>"})]}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"        标签"})}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      </"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    </"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  )"})}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,o.jsxs)(n.h3,{id:"自定义颜色",children:[(0,o.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#自å

1®šä¹‰é¢œè‰²",children:"#"}),"自定义颜色"]}),"\n",(0,o.jsx)(n.p,{children:"通过 css 设置设置选中或未选择标签的颜色。"}),"\n",(0,o.jsx)(o.Fragment,{children:(0,o.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",fold:!0,height:"420",children:(0,o.jsxs)(n.code,{children:[(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Tabbar } "}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "@taroify/core"'})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { FriendsOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" HomeOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" Search"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" SettingOutlined } "}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "@taroify/icons"'})]}),"\n",(0,o.jsx)(n.span,{className:"line"}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" TabbarWithCustomColor"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"() {"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" className"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"custom-color"'}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"HomeOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>标签</"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Search"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>标签</"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"FriendsOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>标签</"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"      <"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" icon"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"SettingOutlined"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />}>标签</"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar.TabItem"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    </"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Tabbar"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  )"})}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,o.jsx)(o.Fragment,{children:(0,o.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"scss",fold:!0,height:"420",children:(0,o.jsxs)(n.code,{children:[(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".custom-color"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  --tabbar-item-color"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" #000"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,o.jsxs)(n.span,{className:"line",children:[(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  --tabbar-item-active-color"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" #ee0a24"}),(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,o.jsx)(n.span,{className:"line",children:(0,o.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,o.jsxs)(n.h2,{id:"api",children:[(0,o.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#api",children:"#"}),"API"]}),"\n",(0,o.jsxs)(n.h3,{id:"tabbar-props",children:[(0,o.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#tabbar-props",children:"#"}),"Tabbar Props"]}),"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",(0,o.jsxs)(n.table,{children:[(0,o.jsx)(n.thead,{children:(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.th,{children:"参数"}),(0,o.jsx)(n.th,{children:"说明"}),(0,o.jsx)(n.th,{children:"类型"}),(0,o.jsx)(n.th,{children:"默认值"})]})}),(0,o.jsxs)(n.tbody,{children:[(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"defaultValue"}),(0,o.jsx)(n.td,{children:"默认选中标签的标识或索引值"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"any"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"0"})})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"value"}),(0,o.jsx)(n.td,{children:"当前选中标签的标识或索引值"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"any"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"0"})})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"bordered"}),(0,o.jsx)(n.td,{children:"是否显示外边框"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"boolean"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"false"})})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"fixed"}),(0,o.jsx)(n.td,{children:"是否固定在底部"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"boolean"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"false"})})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"safeArea"}),(0,o.jsxs)(n.td,{children:["安全区域，可选值 ",(0,o.jsx)(n.code,{children:"top"})," ",(0,o.jsx)(n.code,{children:"bottom"}),"，仅在",(0,o.jsx)(n.code,{children:"fixed=true"}),"时有效"]}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"string"})}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"placeholder"}),(0,o.jsx)(n.td,{children:"固定在底部时，是否在标签位置生成一个等高的占位元素"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"boolean"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"false"})})]})]})]}),"\n",(0,o.jsxs)(n.h3,{id:"tabbar-events",children:[(0,o.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#tabbar-events",children:"#"}),"Tabbar Events"]}),"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",(0,o.jsxs)(n.table,{children:[(0,o.jsx)(n.thead,{children:(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.th,{children:"事件名"}),(0,o.jsx)(n.th,{children:"说明"}),(0,o.jsx)(n.th,{children:"回调参数"})]})}),(0,o.jsx)(n.tbody,{children:(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"onChange"}),(0,o.jsx)(n.td,{children:"切换标签时触发"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"value: any"})})]})})]}),"\n",(0,o.jsxs)(n.h3,{id:"tabbartabitem-props",children:[(0,o.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#tabbartabitem-props",children:"#"}),"Tabbar.TabItem Props"]}),"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",(0,o.jsxs)(n.table,{children:[(0,o.jsx)(n.thead,{children:(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.th,{children:"参数"}),(0,o.jsx)(n.th,{children:"说明"}),(0,o.jsx)(n.th,{children:"类型"}),(0,o.jsx)(n.th,{children:"默认值"})]})}),(0,o.jsxs)(n.tbody,{children:[(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"value"}),(0,o.jsx)(n.td,{children:"标签值，作为匹配的标识符"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"any"})}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"icon"}),(0,o.jsxs)(n.td,{children:[(0,o.jsx)(n.a,{href:"/components/icon.html",children:"图标"}),"或",(0,o.jsx)(n.a,{href:"/components/image.html",children:"图片"})]}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"ReactNode"})}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"badge"}),(0,o.jsx)(n.td,{children:"图标上徽标的内容"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"boolean | number | string | Badge | ReactNode"})}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"children"}),(0,o.jsx)(n.td,{children:"标签名"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"ReactNode"})}),(0,o.jsx)(n.td,{children:"-"})]})]})]}),"\n",(0,o.jsxs)(n.h2,{id:"主题定制",children:[(0,o.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#主题定制",children:"#"}),"主题定制"]}),"\n",(0,o.jsxs)(n.h3,{id:"样式变量",children:[(0,o.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#样式变量",children:"#"}),"样式变量"]}),"\n",(0,o.jsxs)(n.p,{children:["组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ",(0,o.jsx)(n.a,{href:"/components/config-provider/index.html",children:"ConfigProvider"})," 组件。"]}

1),"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",(0,o.jsxs)(n.table,{children:[(0,o.jsx)(n.thead,{children:(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.th,{children:"名称"}),(0,o.jsx)(n.th,{children:"默认值"}),(0,o.jsx)(n.th,{children:"描述"})]})}),(0,o.jsxs)(n.tbody,{children:[(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"--tabbar-height"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"50px * $hd"})}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"--tabbar-z-index"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"1"})}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"--tabbar-background-color"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"var(--white)"})}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"--tabbar-item-font-size"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"var(--font-size-sm)"})}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"--tabbar-item-color"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"var(--gray-7)"})}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"--tabbar-item-line-height"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"1"})}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"--tabbar-item-icon-size"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"22px * $hd"})}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"--tabbar-item-margin-bottom"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"4px * $hd"})}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"--tabbar-item-active-color"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"var(--blue)"})}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:"--tabbar-item-active-background-color"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.em,{children:"var(--white)"})}),(0,o.jsx)(n.td,{children:"-"})]})]})]})]})}function c(){var s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=(0,e._)({},(0,l.R)(),s.components).wrapper;return n?(0,o.jsx)(n,(0,i._)((0,e._)({},s),{children:(0,o.jsx)(a,(0,e._)({},s))})):a(s)}c.__RSPRESS_PAGE_META={},c.__RSPRESS_PAGE_META["components%2Ftabbar%2Findex.md"]={toc:[{id:"介绍",text:"介绍",depth:3},{id:"引入",text:"引入",depth:3},{id:"代码演示",text:"代码演示",depth:2},{id:"基础用法",text:"基础用法",depth:3},{id:"通过标识匹配",text:"通过标识匹配",depth:3},{id:"徽标提示",text:"徽标提示",depth:3},{id:"自定义颜色",text:"自定义颜色",depth:3},{id:"api",text:"API",depth:2},{id:"tabbar-props",text:"Tabbar Props",depth:3},{id:"tabbar-events",text:"Tabbar Events",depth:3},{id:"tabbartabitem-props",text:"Tabbar.TabItem Props",depth:3},{id:"主题定制",text:"主题定制",depth:2},{id:"样式变量",text:"样式变量",depth:3}],title:"Tabbar 标签栏",headingTitle:"Tabbar 标签栏",frontmatter:{title:"Tabbar 标签栏",description:"Taroify Tabbar 标签栏组件文档，包含代码演示、API 和主题定制说明。",pageType:"doc"}},r.d(n,{default:function(){return c}})}}]);