nav-tab-bar
Contents
The tab bar is a UI component that contains a set of tab buttons. A tab bar must be provided inside of tabs to communicate with each tab.
Usage
- Javascript
- React
- Rindo
- Kdu
<nav-tabs>
<!-- Tab views -->
<nav-tab tab="account"></nav-tab>
<nav-tab tab="contact"></nav-tab>
<nav-tab tab="settings"></nav-tab>
<!-- Tab bar -->
<nav-tab-bar slot="bottom">
<nav-tab-button tab="account">
<nav-icon name="person"></nav-icon>
</nav-tab-button>
<nav-tab-button tab="contact">
<nav-icon name="call"></nav-icon>
</nav-tab-button>
<nav-tab-button tab="settings">
<nav-icon name="settings"></nav-icon>
</nav-tab-button>
</nav-tab-bar>
</nav-tabs>
import React from 'react';
import { NavTabs, NavTabBar, NavTabButton, NavIcon, NavContent } from '@navify/react';
import { call, person, settings } from 'navicons/icons';
export const TabBarExample: React.FC = () => (
<NavContent>
<NavTabs>
{/*-- Tab bar --*/}
<NavTabBar slot="bottom">
<NavTabButton tab="account">
<NavIcon icon={person} />
</NavTabButton>
<NavTabButton tab="contact">
<NavIcon icon={call} />
</NavTabButton>
<NavTabButton tab="settings">
<NavIcon icon={settings} />
</NavTabButton>
</NavTabBar>
</NavTabs>
</NavContent>
);
import { Component, h } from '@rindo/core';
@Component({
tag: 'tab-bar-example',
styleUrl: 'tab-bar-example.css'
})
export class TabBarExample {
render() {
return [
<nav-tabs>
{/* Tab views */}
<nav-tab tab="account" component="page-account"></nav-tab>
<nav-tab tab="contact" component="page-contact"></nav-tab>
<nav-tab tab="settings" component="page-settings"></nav-tab>
{/* Tab bar */}
<nav-tab-bar slot="bottom">
<nav-tab-button tab="account">
<nav-icon name="person"></nav-icon>
</nav-tab-button>
<nav-tab-button tab="contact">
<nav-icon name="call"></nav-icon>
</nav-tab-button>
<nav-tab-button tab="settings">
<nav-icon name="settings"></nav-icon>
</nav-tab-button>
</nav-tab-bar>
</nav-tabs>
];
}
}
<template>
<nav-tabs>
<!-- Tab bar -->
<nav-tab-bar slot="bottom">
<nav-tab-button tab="account">
<nav-icon :icon="person"></nav-icon>
</nav-tab-button>
<nav-tab-button tab="contact">
<nav-icon :icon="call"></nav-icon>
</nav-tab-button>
<nav-tab-button tab="settings">
<nav-icon :icon="settings"></nav-icon>
</nav-tab-button>
</nav-tab-bar>
</nav-tabs>
</template>
<script>
import { NavIcon, NavTabBar, NavTabButton, NavTabs } from '@navify/kdu';
import { call, person, settings } from 'navicons/icons';
import { defineComponent } from 'kdu';
export default defineComponent({
components: { NavIcon, NavTabBar, NavTabButton, NavTabs },
setup() {
return { call, person, settings }
}
});
</script>
Properties
color
Description | The color to use from your application's color palette. Default options are: "primary" , "secondary" , "tertiary" , "success" , "warning" , "danger" , "light" , "medium" , and "dark" . For more information on colors, see theming. |
Attribute | color |
Type | "danger" ο½ "dark" ο½ "light" ο½ "medium" ο½ "primary" ο½ "secondary" ο½ "success" ο½ "tertiary" ο½ "warning" ο½ string & Record<never, never> ο½ undefined |
Default | undefined |
mode
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" ο½ "md" |
Default | undefined |
selectedTab
Description | The selected tab component |
Attribute | selected-tab |
Type | string ο½ undefined |
Default | undefined |
translucent
Description | If true , the tab bar will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter . |
Attribute | translucent |
Type | boolean |
Default | false |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
Name | Description |
---|---|
--background | Background of the tab bar |
--border | Border of the tab bar |
--color | Color of the tab bar |
Slots
No slots available for this component.