ツールバー 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	文字列		ツールバーの「inner」要素に追加する追加のクラス
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 コンポーネント

ツールバーコンポーネント

ツールバープロパティ

例