@syncfusion/react-splitbuttons
Version:
Syncfusion React SplitButton package is a feature-rich collection of UI components, including SplitButton and DropDownButton, designed for advanced button interactions in React applications.
206 lines (205 loc) • 6.56 kB
TypeScript
import { ButtonHTMLAttributes } from 'react';
import { Position, Color, Size, Variant } from '@syncfusion/react-buttons';
import { AnimationOptions } from '@syncfusion/react-base';
import * as React from 'react';
export { Color, Size, Variant, Position };
interface AnimationProps {
/**
* Specifies the animation that should happen when Popup opens.
*/
show?: AnimationOptions;
/**
* Specifies the animation that should happen when Popup closes.
*/
hide?: AnimationOptions;
}
/**
* ItemModel interface defines properties for each dropdown item.
*/
export interface ItemModel {
/**
* Defines class/multiple classes separated by a space for the item that is used to include an icon.
* Action item can include font icon and sprite image.
*
* @default -
*/
icon?: React.ReactNode;
/**
* Specifies the id for item.
*
* @default -
*/
id?: string;
/**
* Specifies separator between the items. Separator are horizontal lines used to group action items.
*
* @default false
*/
hasSeparator?: boolean;
/**
* Specifies text for item.
*
* @default -
*/
text?: string;
/**
* Specifies url for item that creates the anchor link to navigate to the url provided.
*
* @default -
*/
url?: string;
/**
* Specifies to enable or disable the item.
*
* @default false
*/
disabled?: boolean;
}
/**
* Interface representing the event arguments for item selection in dropdown components.
*/
export interface ButtonSelectEvent {
/**
* The original mouse event that triggered the selection.
* Contains information about the click event on the list item.
*/
event: React.MouseEvent<HTMLLIElement, MouseEvent>;
/**
* The data object representing the selected item.
* Contains properties like id, text, icon, and other attributes of the selected item.
*/
item: ItemModel;
}
/**
* Dropdown Button properties used to customize its behavior and appearance.
*/
export interface DropDownButtonProps {
/**
* Specifies an icon for the Dropdown Button, defined using a CSS class name for custom styling or an SVG element for rendering.
*
* @default -
*/
icon?: React.ReactNode;
/**
* Specifies the position of the icon relative to the Dropdown Button text. Options include placing the icon at the left, right, top, or bottom of the button content.
*
* @default Position.Left
*/
iconPosition?: Position;
/**
* Specifies action items with their properties to render as a popup in the Dropdown Button.
*
* @default []
*/
items?: ItemModel[];
/**
* This property defines the width of the dropdown popup for the Dropdown Button component.
* Set the width as a string or number using valid CSS units like `px`, `%`, or `rem`, or as pixels.
* The default value of `auto` allows the popup to adjust based on the content length, but a specific width can be provided for more precise control.
*
* @default auto
*/
popupWidth?: string | number;
/**
* Controls whether the popup element is created upon clicking open. When set to `true`, the popup is created on click.
*
* @default false
*/
lazyOpen?: boolean;
/**
* Specifies the target element for the Dropdown Button's popup content.
*
* @default -
*/
target?: React.RefObject<HTMLElement>;
/**
* Provides a template for displaying content within the dropdown items.
*
* @default -
*/
itemTemplate?: (item: ItemModel) => React.ReactNode;
/**
* Specifies the animation settings for opening the dropdown.
* The settings control the duration, easing, and effect of the animation applied when the dropdown opens.
*
* @default { effect: 'SlideDown', duration: 400, easing: 'ease' }
* @private
*/
animation?: AnimationProps;
/**
* Triggers while closing the Dropdown Button popup.
*
* @event onClose
*/
onClose?: (event?: React.MouseEvent) => void;
/**
* Triggers while opening the Dropdown Button popup.
*
* @event onOpen
*/
onOpen?: (event?: React.MouseEvent) => void;
/**
* Triggers while selecting action item in Dropdown Button popup.
*
* @event onSelect
*/
onSelect?: (event: ButtonSelectEvent) => void;
/**
* Specifies the color style of the Dropdown Button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Error' and 'Info'.
*
* @default Color.Primary
*/
color?: Color;
/**
* Specifies the variant style of the Dropdown Button. Options include 'Outlined', 'Filled' and 'Standard'.
*
* @default Variant.Filled
*/
variant?: Variant;
/**
* Specifies the size style of the Dropdown Button. Options include 'Small', 'Medium' and 'Large'.
*
* @default Size.Medium
*/
size?: Size;
/**
* Specifies the relative container element of the dropdown popup element.Based on the relative element, popup element will be positioned.
*
* @default 'body'
* @private
*/
relateTo?: HTMLElement | string;
}
/**
* Represents the methods of the Dropdown Button component.
*/
export interface IDropDownButton extends DropDownButtonProps {
/**
* To open/close Dropdown Button popup based on current state of the Dropdown Button.
*
* @public
* @returns {void}
*/
toggle?(): void;
/**
* This is button component element.
*
* @private
* @default -
*/
element?: HTMLElement | null;
}
type IDropDownButtonProps = IDropDownButton & ButtonHTMLAttributes<HTMLButtonElement>;
/**
* The Dropdown Button component is an interactive button that reveals a menu of actions or options when clicked, providing a dropdown interface for intuitive user interaction.
*
* ```typescript
* import { DropDownButton } from "@syncfusion/react-splitbuttons";
*
* const menuItems = [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }];
* <DropDownButton items={menuItems}>Default</DropDownButton>
* ```
*/
export declare const DropDownButton: React.ForwardRefExoticComponent<IDropDownButtonProps & React.RefAttributes<IDropDownButton>>;
declare const _default: React.NamedExoticComponent<IDropDownButton & ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<IDropDownButton>>;
export default _default;