工具列 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	布林值	假	啟用標籤列，與使用 `<Tabbar>` 元件相同
tabbarIcons	布林值	假	啟用具有圖示的標籤列，與使用 `<Tabbar icons>` 元件相同
tabbarLabels	布林值	假	啟用具有標籤的標籤列，與使用 `<Tabbar labels>` 元件相同
top	布林值	假	啟用頂部工具列，在這種情況下，它會在相對側呈現邊框上的陰影
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 元件

工具列元件

工具列屬性

範例