What is @syncfusion/ej2-splitbuttons?
@syncfusion/ej2-splitbuttons is a package that provides a collection of button components such as Split Button, DropDown Button, Progress Button, and Button Group. These components are designed to enhance the user interface by providing advanced button functionalities.
What are @syncfusion/ej2-splitbuttons's main functionalities?
Split Button
The Split Button component allows you to create a button with a primary action and a secondary action that can be accessed via a dropdown menu.
const splitBtn = new ej.splitbuttons.SplitButton({ content: 'Split Button', items: [{ text: 'Option 1' }, { text: 'Option 2' }] }); splitBtn.appendTo('#splitButton');
DropDown Button
The DropDown Button component provides a button that displays a dropdown list of items when clicked.
const dropDownBtn = new ej.splitbuttons.DropDownButton({ content: 'DropDown Button', items: [{ text: 'Item 1' }, { text: 'Item 2' }] }); dropDownBtn.appendTo('#dropDownButton');
Progress Button
The Progress Button component is a button that shows a progress indicator when clicked, useful for indicating loading or processing states.
const progressBtn = new ej.splitbuttons.ProgressButton({ content: 'Progress Button', duration: 2000 }); progressBtn.appendTo('#progressButton');
Button Group
The Button Group component allows you to group multiple buttons together, providing a cohesive set of actions.
const buttonGroup = new ej.splitbuttons.ButtonGroup({ buttons: [{ content: 'Button 1' }, { content: 'Button 2' }, { content: 'Button 3' }] }); buttonGroup.appendTo('#buttonGroup');
Other packages similar to @syncfusion/ej2-splitbuttons
react-bootstrap
React-Bootstrap provides a collection of Bootstrap components built with React, including button components like Split Button and Dropdown Button. It is widely used for its integration with the Bootstrap framework and offers a similar set of functionalities with a focus on React.
material-ui
Material-UI is a popular React component library that implements Google's Material Design. It includes button components such as Split Button and Dropdown Button, offering a modern and customizable design system. It is known for its extensive customization options and comprehensive documentation.
primereact
PrimeReact is a rich set of open-source UI components for React, including advanced button components like SplitButton and DropdownButton. It is known for its wide range of components and themes, making it a versatile choice for building modern web applications.
ej2-splitbuttons
A package of Syncfusion JavaScript UI Components (Essential JS 2) DropDownButton, SplitButton, ProgressButton and ButtonGroup.
![SplitButton](https://ej2.syncfusion.com/products/images/splitbutton/readme.gif)
This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).
A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
Setup
To install SplitButtons
and its dependent packages, use the following command
npm install @syncfusion/ej2-splitbuttons
Components included
Following list of components are available in the package.
-
DropDownButton - DropDownButton
is used to toggle contextual overlays for displaying list of action items.
-
SplitButton - SplitButton
has primary and secondary button. Primary button is used to select default action and secondary button is used to toggle contextual overlays for displaying list of action items.
-
ProgressButton - ProgressButton
visualizes the progression of an operation to indicate the user that a process is happening in the background with visual representation.
-
ButtonGroup - ButtonGroup
is a graphical user interface that groups series of buttons horizontally or vertically.
Supported Frameworks
These components are available in following list of frameworks.
- Angular
- React
- VueJS
- ASP.NET Core
- ASP.NET MVC
- JavaScript (ES5)
Key Features
DropDownButton
-
Icons and Navigations - Supports text and icon on the DropDownButton and Popup items. URL can be given to Popup items that creates the anchor link to navigate to the URL provided.
-
Separator - Supports Popup items grouping by using the Separator.
-
Accessibility - Provided with built-in accessibility support that helps to access all the DropDownButton component features through the keyboard, screen readers, or other assistive technology devices.
SplitButton
-
Icons and Navigations - Supports text and icon on the SplitButton and Popup items. URL can be given to Popup items that creates the anchor link to navigate to the URL provided.
-
Separator - Supports Popup items grouping by using the Separator.
-
Accessibility - Provided with built-in accessibility support that helps to access all the SplitButton component features through the keyboard, screen readers, or other assistive technology devices.
ProgressButton
-
Types, Sizes, and Styles - Provided with different types, sizes and predefined styles of progress button.
-
Icons and Spinner - Supports icon, spinner and its positioning.
-
Animation - Provided with predefined animation and progress indicator.
-
Events - Supports event triggering at specified interval.
-
Accessibility - Provided with built-in accessibility support that helps to access all the ProgressButton component features through the keyboard, screen readers, or other assistive technology devices.
ButtonGroup
-
Types, Sizes, and Styles - Provided with different types, sizes and predefined styles of button.
-
Selection - Supports single and multiple selection behaviors.
-
Orientation - Supports horizontal and vertical orientations.
-
Nesting - Supports nesting with drop-down and split button components.
-
Accessibility - Built-in accessibility features to access all the button group using the keyboard, screen readers, or other assistive technology devices.
Support
Product support is available for through following mediums.
License
Check the license detail here.
Changelog
Check the changelog here
© Copyright 2024 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.