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

ツールバーコンポーネント
ツールバーの Props
例

ツールバーは画面の下部（または上部）に固定された領域で、ナビゲーション要素が含まれています。ツールバーにはパーツはなく、内部にプレーンなリンクがあるだけです

以下のコンポーネントが含まれています

ツールバー

名前	タイプ	デフォルト	説明
bgClass	string		ツールバーの「背景」要素に追加する追加のクラス
colors	object		Tailwind CSS のカラークラスを持つオブジェクト
colors.bgIos	string	'bg-ios-light-surface-2 dark:bg-ios-dark-surface-2'
colors.bgMaterial	string	'bg-md-light-surface-2 dark:bg-md-dark-surface-2'
colors.tabbarHighlightBgIos	string	'bg-primary'
colors.tabbarHighlightBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
innerClass	string		ツールバーの「inner」要素に追加する追加のクラス
outline	boolean	undefined	外側のヘアライン（境界線）をレンダリングします。指定しない場合は、iOSテーマで有効になります
tabbar	boolean	false	`<Tabbar>` コンポーネントを使用するのと同じように、タブバーを有効にします
tabbarIcons	boolean	false	`<Tabbar icons>` コンポーネントを使用するのと同じように、アイコン付きのタブバーを有効にします
tabbarLabels	boolean	false	`<Tabbar labels>` コンポーネントを使用するのと同じように、ラベル付きのタブバーを有効にします
top	boolean	false	上部のツールバーを有効にします。この場合、反対側に境界線とシャドウがレンダリングされます
translucent	boolean	true	iOSテーマでツールバーの背景を半透明にします（`backdrop-filter: blur`を使用）

例

Toolbar.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Toolbar,
    Link,
    Block,
    Button,
  } from 'konsta/svelte';

  let isTop = false;
</script>

<Page>
  <Navbar title="Toolbar" />

  <Toolbar
    top={isTop}
    class={`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 class="space-y-4">
    <p>
      Toolbar supports both top and bottom positions. Click the following button
      to change its position.
    </p>
    <p>
      <Button
        onClick={() => {
          isTop = !isTop;
        }}
      >
        Toggle Toolbar Position
      </Button>
    </p>
  </Block>
</Page>

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

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

ツールバーの Props

例