@progress/kendo-vue-layout/bottomnavigation/BottomNavigationProps.d.ts

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { BottomNavigationItemProps } from './BottomNavigationItemProps';
import { BottomNavigationEvent, BottomNavigationSelectEvent } from './models/events';
/**
 * Represents the props of the [Kendo UI for Vue BottomNavigation component]({% slug overview_bottomnavigation %}).
 */
export interface BottomNavigationProps {
    /**
     * Sets the `id` property of the root BottomNavigation element.
     */
    id?: string;
    /**
     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
     */
    dir?: string;
    /**
     * Specifies the theme color of the BottomNavigation
     * ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
     *
     * The possible values are:
    * * `base` (Default) — Applies base coloring.
    * * `primary` — Applies coloring based on the primary theme color.
     * * `secondary` — Applies coloring based on the secondary theme color.
     * * `tertiary` — Applies coloring based on the tertiary theme color.
     * * `inverse` — Applies coloring based on the inverted theme color.
     */
    themeColor?: BottomNavigationThemeColor | string;
    /**
     * The fill style of the BottomNavigation
     * ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
     *
     * The possible values are:
     * * `flat`(Default) — Sets the theme color as the text color. The background will be white.
     * * `solid` — Sets the theme color as a background color.
     */
    fillMode?: BottomNavigationFill | string;
    /**
     * @hidden
     */
    fill?: BottomNavigationFill | string;
    /**
     * Specifies the position and behavior of the BottomNavigation when the page is scrolled
     * ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
     *
     * The possible values are:
     * * `fixed`(Default) — The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
     * * `sticky` — Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between static
     * and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
     * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
     */
    positionMode?: BottomNavigationPositionMode | string;
    /**
     * Specifies how the icon and text label are positioned in each item of the BottomNavigation
     * ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
     *
     * The possible values are:
     * * `vertical`(Default) — Renders the text below the icon.
     * * `horizontal` — Renders the text and the icon on the same line.
     */
    itemFlow?: BottomNavigationItemFlow | string;
    /**
     * Sets a border to the BottomNavigation.
     */
    border?: boolean;
    /**
     * Disables the whole BottomNavigation.
     */
    disabled?: boolean;
    /**
     * The index of the selected BottomNavigationItem.
     */
    selected?: number;
    /**
     * The collection of items that will be rendered in the BottomNavigation ([see example]({% slug overview_bottomnavigation %})).
     */
    items?: Array<BottomNavigationItemProps>;
    /**
     * Overrides the default component's content responsible for visualizing a single item
     * ([see example]({% slug custom_rendering_bottomnavigation %}#toc-custom-rendering)).
     */
    item?: any;
    /**
     * Fires when a BottomNavigation item is about to be rendered
     * ([see example]({% slug custom_rendering_bottomnavigation %}#toc-item-render-property)).
     * Used to override the default appearance of the items.
     */
    itemRender?: any;
    /**
     * Fires when a BottomNavigation item is selected.
     */
    onSelect?: (event: BottomNavigationSelectEvent) => void;
    /**
     * Triggered on `onKeyDown` event.
     */
    onKeyDown?: (event: BottomNavigationEvent) => void;
}
/**
 * The fill style of the BottomNavigation
 * ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
 *
 * The possible values are:
 * * `flat`(Default) &mdash; Sets the theme color as the text color. The background will be white.
 * * `solid` &mdash; Sets the theme color as a background color.
 *
 */
export type BottomNavigationFill = 'solid' | 'flat';
/**
 * Specifies how the icon and text label are positioned in each item of the BottomNavigation
 * ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
 *
 * The possible values are:
 * * `vertical`(Default) &mdash; Renders the text below the icon.
 * * `horizontal` &mdash; Renders the text and the icon on the same line.
 */
export type BottomNavigationItemFlow = 'vertical' | 'horizontal';
/**
 * Specifies the theme color of the BottomNavigationThemeColor.
 * ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
 *
 * The possible values are:
 * * `base` (Default) &mdash; Applies base coloring.
 * * `primary` &mdash; Applies coloring based on the primary theme color.
 * * `secondary` &mdash; Applies coloring based on the secondary theme color.
 * * `tertiary` &mdash; Applies coloring based on the tertiary theme color.
 * * `inverse` &mdash; Applies coloring based on the inverted theme color.
 */
export type BottomNavigationThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'inverse';
/**
 * Specifies the position and behavior of the BottomNavigation when the page is scrolled
 * ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
 *
 * The possible values are:
 * * `fixed`(Default) &mdash; The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
 * * `sticky` &mdash; Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between
 * static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
 * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
 */
export type BottomNavigationPositionMode = 'sticky' | 'fixed';