Toolbar

Toolbar Props

Name	Type	Default	Description
bgClass	string		Additional class to add on Toolbar's "background" element
colors	object		Object with Tailwind CSS colors classes
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'
component	string	'div'	Component's HTML Element
innerClass	string		Additional class to add on Toolbar's "inner" element
outline	boolean	undefined	Renders outer hairlines (borders). If not specified, will be enabled for iOS theme
tabbar	boolean	false	Enables tabbar, same as using <Tabbar> component
tabbarIcons	boolean	false	Enables tabbar with icons, same as using <Tabbar icons> component
tabbarLabels	boolean	false	Enables tabbar with labels, same as using <Tabbar labels> component
top	boolean	false	Enables top toolbar, in this case it renders border on shadows on opposite sides
translucent	boolean	true	Makes Toolbar background translucent (with backdrop-filter: blur) in iOS theme

Examples

Vue

<template>
  <i-page>
    <i-navbar title="Toolbar" />

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

    <i-block strong-ios outline-ios-p class="space-y-4">
      <p>
        Toolbar supports both top and bottom positions. Click the following
        button to change its position.
      </p>
      <p>
        <i-button @click="() => (isTop = !isTop)">
          Toggle Toolbar Position
        </i-button>
      </p>
    </i-block>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iToolbar,
    iLink,
    iBlock,
    iButton,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iToolbar,
      iLink,
      iBlock,
      iButton,
    },
    setup() {
      const isTop = ref(false);

      return {
        isTop,
      };
    },
  };
</script>

React

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Toolbar,
  Link,
  Block,
  Button,
} from 'ina-ui/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>
  );
}