Add split button component with comprehensive functionality
- Create new SplitButtonComponent with primary action and dropdown menu - Support for three variants: filled, tonal, outlined - Three size options: small, medium, large - Icon support with configurable positioning - Configurable dropdown menu items with icons and labels - Full accessibility support with ARIA attributes and keyboard navigation - Interactive states: hover, active, disabled, loading - Responsive design using semantic design tokens - Complete demo application with multiple examples - Integration with dashboard navigation menu 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -18,6 +18,7 @@ import { ProgressDemoComponent } from './progress-demo/progress-demo.component';
|
||||
import { CardDemoComponent } from './card-demo/card-demo.component';
|
||||
import { ChipDemoComponent } from './chip-demo/chip-demo.component';
|
||||
import { AppbarDemoComponent } from './appbar-demo/appbar-demo.component';
|
||||
import { BottomNavigationDemoComponent } from './bottom-navigation-demo/bottom-navigation-demo.component';
|
||||
import { FontAwesomeDemoComponent } from './fontawesome-demo/fontawesome-demo.component';
|
||||
import { ImageContainerDemoComponent } from './image-container-demo/image-container-demo.component';
|
||||
import { CarouselDemoComponent } from './carousel-demo/carousel-demo.component';
|
||||
@@ -46,9 +47,14 @@ import { TooltipDemoComponent } from './tooltip-demo/tooltip-demo.component';
|
||||
import { AccordionDemoComponent } from './accordion-demo/accordion-demo.component';
|
||||
import { PopoverDemoComponent } from './popover-demo/popover-demo.component';
|
||||
import { AlertDemoComponent } from './alert-demo/alert-demo.component';
|
||||
import { SnackbarDemoComponent } from './snackbar-demo/snackbar-demo.component';
|
||||
import { ToastDemoComponent } from './toast-demo/toast-demo.component';
|
||||
import { TreeViewDemoComponent } from './tree-view-demo/tree-view-demo.component';
|
||||
import { TimelineDemoComponent } from './timeline-demo/timeline-demo.component';
|
||||
import { StepperDemoComponent } from './stepper-demo/stepper-demo.component';
|
||||
import { FabMenuDemoComponent } from './fab-menu-demo/fab-menu-demo.component';
|
||||
import { EnhancedTableDemoComponent } from './enhanced-table-demo/enhanced-table-demo.component';
|
||||
import { SplitButtonDemoComponent } from './split-button-demo/split-button-demo.component';
|
||||
|
||||
|
||||
@Component({
|
||||
@@ -65,6 +71,10 @@ import { TimelineDemoComponent } from './timeline-demo/timeline-demo.component';
|
||||
<ui-appbar-demo></ui-appbar-demo>
|
||||
}
|
||||
|
||||
@case ("bottom-navigation") {
|
||||
<ui-bottom-navigation-demo></ui-bottom-navigation-demo>
|
||||
}
|
||||
|
||||
@case ("avatar") {
|
||||
<ui-avatar-demo></ui-avatar-demo>
|
||||
}
|
||||
@@ -231,6 +241,10 @@ import { TimelineDemoComponent } from './timeline-demo/timeline-demo.component';
|
||||
<ui-alert-demo></ui-alert-demo>
|
||||
}
|
||||
|
||||
@case ("snackbar") {
|
||||
<ui-snackbar-demo></ui-snackbar-demo>
|
||||
}
|
||||
|
||||
@case ("toast") {
|
||||
<ui-toast-demo></ui-toast-demo>
|
||||
}
|
||||
@@ -243,6 +257,22 @@ import { TimelineDemoComponent } from './timeline-demo/timeline-demo.component';
|
||||
<ui-timeline-demo></ui-timeline-demo>
|
||||
}
|
||||
|
||||
@case ("stepper") {
|
||||
<ui-stepper-demo></ui-stepper-demo>
|
||||
}
|
||||
|
||||
@case ("fab-menu") {
|
||||
<ui-fab-menu-demo></ui-fab-menu-demo>
|
||||
}
|
||||
|
||||
@case ("enhanced-table") {
|
||||
<ui-enhanced-table-demo></ui-enhanced-table-demo>
|
||||
}
|
||||
|
||||
@case ("split-button") {
|
||||
<ui-split-button-demo></ui-split-button-demo>
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
`,
|
||||
@@ -251,14 +281,14 @@ import { TimelineDemoComponent } from './timeline-demo/timeline-demo.component';
|
||||
MenuDemoComponent, InputDemoComponent,
|
||||
LayoutDemoComponent, RadioDemoComponent, CheckboxDemoComponent,
|
||||
SearchDemoComponent, SwitchDemoComponent, ProgressDemoComponent,
|
||||
AppbarDemoComponent, FontAwesomeDemoComponent, ImageContainerDemoComponent,
|
||||
AppbarDemoComponent, BottomNavigationDemoComponent, FontAwesomeDemoComponent, ImageContainerDemoComponent,
|
||||
CarouselDemoComponent, VideoPlayerDemoComponent, ListDemoComponent,
|
||||
ModalDemoComponent, DrawerDemoComponent, DatePickerDemoComponent, TimePickerDemoComponent,
|
||||
GridSystemDemoComponent, SpacerDemoComponent, ContainerDemoComponent, PaginationDemoComponent,
|
||||
SkeletonLoaderDemoComponent, EmptyStateDemoComponent, FileUploadDemoComponent, FormFieldDemoComponent,
|
||||
AutocompleteDemoComponent, BackdropDemoComponent, OverlayContainerDemoComponent, LoadingSpinnerDemoComponent,
|
||||
ProgressCircleDemoComponent, RangeSliderDemoComponent, DividerDemoComponent, TooltipDemoComponent, AccordionDemoComponent,
|
||||
PopoverDemoComponent, AlertDemoComponent, ToastDemoComponent, TreeViewDemoComponent, TimelineDemoComponent]
|
||||
PopoverDemoComponent, AlertDemoComponent, SnackbarDemoComponent, ToastDemoComponent, TreeViewDemoComponent, TimelineDemoComponent, StepperDemoComponent, FabMenuDemoComponent, EnhancedTableDemoComponent, SplitButtonDemoComponent]
|
||||
})
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user