@progress/kendo-angular-toolbar
Version:
Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements
203 lines (202 loc) • 7.1 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { EventEmitter, ElementRef, NgZone } from '@angular/core';
import { ToolBarToolComponent } from './toolbar-tool.component';
import { DisplayMode } from '../display-mode';
import { ToolOptions } from '../tool-options';
import { ButtonFillMode, ButtonThemeColor, ButtonRounded } from '@progress/kendo-angular-buttons';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { ToolBarComponent } from '../toolbar.component';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
*
* Use this component to render a button inside the ToolBar.
*
* @example
* ```html
* <kendo-toolbar>
* <kendo-toolbar-button text="Button"></kendo-toolbar-button>
* </kendo-toolbar>
* ```
*
*/
export declare class ToolBarButtonComponent extends ToolBarToolComponent {
element: ElementRef;
private zone;
host: ToolBarComponent;
/**
* Specifies the button text visibility.
* Accepts a `DisplayMode` value.
* @default 'always'
*/
set showText(value: DisplayMode);
get showText(): DisplayMode;
/**
* Specifies the button icon visibility.
* Accepts a `DisplayMode` value.
* @default 'always'
*/
set showIcon(value: DisplayMode);
get showIcon(): DisplayMode;
/**
* Specifies the text of the Button
* ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
*/
set text(text: string);
get text(): string;
/**
* @hidden
*/
get size(): any;
/**
* Specifies custom inline CSS styles for the Button.
*/
style: {
[key: string]: string | number;
};
/**
* Specifies custom CSS class names to be added to the Button.
*/
className: string | Array<string> | {
[key: string]: boolean;
};
/**
* Specifies the `title` attribute of the Button.
*/
title: string;
/**
* Disables the Button when set to `true`
* ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
*/
disabled: boolean;
/**
* Provides visual styling to indicate if the Button is active
* ([see example]({% slug controltypes_toolbar %}#toc-toggle-buttons)).
* For toggleable buttons, set this to `true`.
* @default false
*/
toggleable: boolean;
/**
* @hidden
*/
set look(look: 'default' | 'flat' | 'outline');
/**
* @hidden
*/
get togglable(): boolean;
set togglable(value: boolean);
/**
* Sets the selected state of the Button.
* Use with the `toggleable` property.
* @default false
*/
selected: boolean;
/**
* Specifies the background and border styles of the Button.
* Accepts a `ButtonFillMode` value.
* @default 'solid'
*/
fillMode: ButtonFillMode;
/**
* Specifies the border radius of the Button.
* Accepts a `ButtonRounded` value.
*
* @default 'medium'
*/
rounded: ButtonRounded;
/**
* Specifies the predefined theme color of the Button.
* Accepts a `ButtonThemeColor` value.
* @default 'base'
*/
themeColor: ButtonThemeColor;
/**
* Defines the name for an existing icon in a Kendo UI theme
* ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
* The icon is rendered inside the Button by a `span.k-icon` element.
*/
set icon(icon: string);
/**
* Defines a CSS class or multiple classes to be applied to a `span` element inside the Button.
* Allows the usage of custom icons.
*/
set iconClass(iconClass: string);
/**
* Defines an SVGIcon to be rendered within the button.
* Accepts either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
*/
set svgIcon(icon: SVGIcon);
/**
* Defines a URL for an image to be rendered inside the Button.
* The URL can be relative or absolute.
*/
set imageUrl(imageUrl: string);
/**
* Fires each time the Button is clicked.
*/
click: EventEmitter<any>;
/**
* Fires when the Button's `pointerdown` event is triggered.
*/
pointerdown: EventEmitter<any>;
/**
* Fires each time the selected state of a toggleable Button is changed.
* The event argument is the new selected state (Boolean).
*/
selectedChange: EventEmitter<any>;
toolbarOptions: ToolOptions;
overflowOptions: ToolOptions;
/**
* @hidden
*/
hasBadgeContainer: boolean;
/**
* @hidden
*/
showBadge: boolean;
toolbarButtonElement: ElementRef;
sectionButtonElement: ElementRef;
private overflowButtonElement;
private _showText;
private _showIcon;
private _text;
private propertyChangeSub;
constructor(element: ElementRef, zone: NgZone, host: ToolBarComponent);
ngOnInit(): void;
ngOnDestroy(): void;
ngOnChanges(changes: any): void;
/**
* @hidden
*/
onBlur(): void;
/**
* @hidden
*/
canFocus(): boolean;
/**
* @hidden
*/
focus(ev: Event): void;
/**
* @hidden
*/
handleKey(): boolean;
/**
* @hidden
*/
handleClick(ev: Event): void;
/**
* @hidden
*/
selectedChangeHandler(state: boolean): void;
/**
* @hidden
*/
getButton(): HTMLElement;
private setTextDisplayMode;
static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarButtonComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarButtonComponent, "kendo-toolbar-button", ["kendoToolBarButton"], { "showText": { "alias": "showText"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "text": { "alias": "text"; "required": false; }; "style": { "alias": "style"; "required": false; }; "className": { "alias": "className"; "required": false; }; "title": { "alias": "title"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "look": { "alias": "look"; "required": false; }; "togglable": { "alias": "togglable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; }, { "click": "click"; "pointerdown": "pointerdown"; "selectedChange": "selectedChange"; }, never, never, true, never>;
}