工具栏 Svelte 组件

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

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

包含以下组件

工具栏

名称	类型	默认值	描述
bgClass	字符串		要添加到工具栏的“背景”元素上的附加类
颜色	对象		带有 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'
innerClass	字符串		要添加到工具栏的“内部”元素上的附加类
轮廓	布尔值	未定义	呈现外部细线（边框）。如果未指定，则将为 iOS 主题启用
选项卡栏	布尔值	错误	启用选项卡栏，与使用 `<Tabbar>` 组件相同
tabbarIcons	布尔值	错误	启用带有图标的选项卡栏，与使用 `<Tabbar icons>` 组件相同
tabbarLabels	布尔值	错误	启用带有标签的选项卡栏，与使用 `<Tabbar labels>` 组件相同
顶部	布尔值	错误	启用顶部工具栏，在这种情况下，它会在阴影的相对侧呈现边框
半透明	布尔值	真的	在 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 组件

工具栏组件

工具栏属性

示例