Tantalum UI

NavBar 导航栏 

import {
  showToast,
  TaButton,
  TaNavBar,
  TaGroup,
  NavBarOnButtonClick
} from '@/index'

export default function ExpNavBar() {
  const onRightButtonClick: NavBarOnButtonClick = res => {
    console.log(res)

    // showDialog({
    //   title: '右侧按钮点击',
    //   showCancel: false,
    //   content: `text: '${res.item.text}'\nindex: ${res.index}`
    // })
  }

  return (
    <>
      <TaGroup title="基础用法">
        <TaNavBar title="标题" />
      </TaGroup>
      <TaGroup title="显示返回按钮">
        <TaNavBar title="标题" showBack />
      </TaGroup>
      <TaGroup title="展示首页按钮">
        <TaNavBar title="标题" showBack showHome />
      </TaGroup>
      <TaGroup title="展示右侧按钮">
        <TaNavBar
          title="标题"
          showBack
          showHome
          rightButtons={[{ icon: 'MenuOutlined', text: '菜单' }]}
        />
      </TaGroup>
      <TaGroup title="按钮带文本">
        <TaNavBar
          title="标题"
          showBack
          showHome
          rightButtons={[{ icon: 'MenuOutlined', text: '菜单' }]}
        />
        <TaNavBar
          title="标题"
          showBack
          iconOnly={false}
          rightButtons={[{ icon: 'MenuOutlined', text: '菜单' }]}
        />
      </TaGroup>
      <TaGroup title="固定顶部(配合 fixed 组件)">
        <div className="exp-navBar-fixed">上下滑动观察最顶部的导航</div>
      </TaGroup>
      <TaGroup title="事件监听">
        <TaNavBar
          title="标题双击"
          showBack
          showHome
          rightButtons={[{ icon: 'MenuOutlined', text: '菜单' }]}
          onBackClick={() => showToast('返回按钮点击')}
          onHomeClick={() => showToast('首页按钮点击')}
          onTitleDbclick={() => showToast('标题双击')}
          onRightButtonClick={onRightButtonClick}
        />
      </TaGroup>
      <TaGroup title="renderLeft/renderRight">
        <TaNavBar
          title="标题"
          rightButtons={[{ icon: 'MenuOutlined', text: '菜单' }]}
          renderLeft={() => <div className="exp-navBar-left">renderLeft</div>}
        />
        <TaNavBar
          title="标题"
          showBack
          showHome
          renderRight={() => (
            <div className="exp-navBar-right">renderRight</div>
          )}
        />
        <TaNavBar
          title="标题"
          showBack
          showHome
          renderLeft={() => (
            <div className="exp-navBar-left">
              <TaButton type="primary" icon="LeftOutlined" size="small">
                返回
              </TaButton>
            </div>
          )}
          renderRight={() => (
            <div className="exp-navBar-right">
              <TaButton type="primary" icon="MenuOutlined" size="small">
                菜单
              </TaButton>
            </div>
          )}
        />
      </TaGroup>
    </>
  )
}

Import 

import { TaNavBar } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

import type {
  NavBarButtonOption,
  NavBarOnButtonClick,
  NavBarOnTitleDbClick
} from 'tantalum-ui-mobile-react'

Props

属性类型默认值必填说明
titlestring''否标题
showBackbooleanfalse否是否展示返回按钮
showHomebooleanfalse否是否展示首页按钮
leftButtonsNavBarButtonOption[][]左侧按钮列表，优先级高于首页和返回按钮
rightButtonsNavBarButtonOption[][]右侧按钮列表
iconOnlybooleantrue否是否展示纯图标按钮
type NavBarButtonOption = {
  text: string
  icon?: IconData
  type?: StateType
}

const options: NavBarButtonOption[] = [{ icon: 'MenuOutlined', text: '菜单' }]

其中图标，使用 Icon 组件。

Events

事件描述回调函数参数TypeScript 函数
onBackClick返回按钮点击时出发payload: Payload, buttonEl: HTMLElementNavBarOnButtonClick
onHomeClick到首页按钮点击时触发payload: Payload, buttonEl: HTMLElementNavBarOnButtonClick
onTitleDbclick标题双击时触发，可配合做双击返回顶部titleEl: HTMLElementNavBarOnTitleDbClick
onLeftButtonClick左侧按钮点击时触发payload: Payload, buttonEl: HTMLElementNavBarOnButtonClick
onRightButtonClick右侧按钮点击时触发payload: Payload, buttonEl: HTMLElementNavBarOnButtonClick

Payload 

type Payload = {
  item: {
    text: string
  }
  index: number
}
参数类型描述
item.textstring点击按钮的文本
indexnumber点击按钮的索引值

Slots

左侧/右侧区域自定义（renderLeft/renderRight） 

<TaNavBar
  title="标题"
  showBack
  showHome
  renderLeft={() => (
    <div className="exp-navBar-left">
      <TaButton type="primary" icon="LeftOutlined" size="small">
        返回
      </TaButton>
    </div>
  )}
  renderRight={() => (
    <div className="exp-navBar-right">
      <TaButton type="primary" icon="MenuOutlined" size="small">
        菜单
      </TaButton>
    </div>
  )}
/>