工具栏 React 组件

工具栏组件
工具栏属性
示例

工具栏是屏幕底部（或顶部）的固定区域，包含导航元素。工具栏没有任何部分，只是内部的简单链接

包含以下组件

工具栏

名称	类型	默认值	描述
bgClassName	字符串		要添加到工具栏“背景”元素的附加类
colors	对象		包含 Tailwind CSS 颜色类的对象
colors.bgIos	字符串	'bg-ios-light-surface-2 dark:bg-ios-dark-surface-2'
colors.bgMaterial	字符串	'bg-md-light-surface-2 dark:bg-md-dark-surface-2'
colors.tabbarHighlightBgIos	字符串	'bg-primary'
colors.tabbarHighlightBgMaterial	字符串	'bg-md-light-primary dark:bg-md-dark-primary'
component	字符串	'div'	组件的 HTML 元素
innerClassName	字符串		要添加到工具栏“内部”元素的附加类
outline	布尔值	未定义	渲染外部细线（边框）。如果未指定，将为 iOS 主题启用
tabbar	布尔值	false	启用标签栏，与使用 `<Tabbar>` 组件相同
tabbarIcons	布尔值	false	启用带图标的标签栏，与使用 `<Tabbar icons>` 组件相同
tabbarLabels	布尔值	false	启用带标签的标签栏，与使用 `<Tabbar labels>` 组件相同
top	布尔值	false	启用顶部工具栏，在这种情况下，它会在相反侧的阴影上渲染边框
translucent	布尔值	true	在 iOS 主题中使工具栏背景半透明（使用 `backdrop-filter: blur`）

示例

Toolbar.jsx

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Toolbar,
  Link,
  Block,
  Button,
} from 'konsta/react';

export default function ToolbarPage() {
  const [isTop, setIsTop] = useState(false);
  return (
    <Page>
      <Navbar
        title="Toolbar"
        />

      <Toolbar
        top={isTop}
        className={`left-0 ${
          isTop
            ? 'ios:top-11-safe material:top-14-safe sticky'
            : 'bottom-0 fixed'
        } w-full`}
      >
        <Link toolbar>Link 1</Link>
        <Link toolbar>Link 2</Link>
        <Link toolbar>Link 3</Link>
      </Toolbar>

      <Block strongIos outlineIos className="space-y-4">
        <p>
          Toolbar supports both top and bottom positions. Click the following
          button to change its position.
        </p>
        <p>
          <Button
            onClick={() => {
              setIsTop(!isTop);
            }}
          >
            Toggle Toolbar Position
          </Button>
        </p>
      </Block>
    </Page>
  );
}

工具栏 React 组件

工具栏组件

工具栏属性

示例