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:
skyai_dev
2025-09-03 14:41:16 +10:00
parent bf67b7f955
commit 1aaef36763
8 changed files with 888 additions and 5 deletions

View File

@@ -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]
})