mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
feat: add ButtonSet component
This commit is contained in:
parent
28e5284b77
commit
0eefde12fe
4 changed files with 12 additions and 6 deletions
|
@ -3,6 +3,7 @@
|
|||
|
||||
import Button from "./Button.svelte";
|
||||
import ButtonSkeleton from "./Button.Skeleton.svelte";
|
||||
import ButtonSet from "./ButtonSet.svelte";
|
||||
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||
|
||||
const {
|
||||
|
@ -12,7 +13,7 @@
|
|||
iconDescription,
|
||||
small,
|
||||
tooltipPosition,
|
||||
tooltipAlignment
|
||||
tooltipAlignment,
|
||||
} = $$props;
|
||||
|
||||
const regularProps = {
|
||||
|
@ -20,7 +21,7 @@
|
|||
disabled,
|
||||
size,
|
||||
iconDescription,
|
||||
small
|
||||
small,
|
||||
};
|
||||
|
||||
const iconOnlyProps = {
|
||||
|
@ -31,7 +32,7 @@
|
|||
icon: Add16,
|
||||
iconDescription,
|
||||
tooltipPosition,
|
||||
tooltipAlignment
|
||||
tooltipAlignment,
|
||||
};
|
||||
|
||||
const setProps = { disabled, small, size, iconDescription };
|
||||
|
@ -49,10 +50,11 @@
|
|||
{:else if story === 'icon-only buttons'}
|
||||
<Button {...iconOnlyProps} />
|
||||
{:else if story === 'set of buttons'}
|
||||
<div class="bx--btn-set">
|
||||
<ButtonSet>
|
||||
<Button kind="ghost" {...setProps}>Ghost button</Button>
|
||||
<Button kind="secondary" {...setProps}>Secondary button</Button>
|
||||
<Button kind="primary" {...setProps}>Primary button</Button>
|
||||
</div>
|
||||
</ButtonSet>
|
||||
{:else}
|
||||
<Button {...regularProps}>Button</Button>
|
||||
|
||||
|
|
3
src/Button/ButtonSet.svelte
Normal file
3
src/Button/ButtonSet.svelte
Normal file
|
@ -0,0 +1,3 @@
|
|||
<div class:bx--btn-set={true} {...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
|
@ -1,2 +1,3 @@
|
|||
export { default as Button } from "./Button.svelte";
|
||||
export { default as ButtonSkeleton } from "./Button.Skeleton.svelte";
|
||||
export { default as ButtonSet } from "./ButtonSet.svelte";
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
export { Accordion, AccordionItem, AccordionSkeleton } from "./Accordion";
|
||||
export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "./Breadcrumb";
|
||||
export { Button, ButtonSkeleton } from "./Button";
|
||||
export { Button, ButtonSkeleton, ButtonSet } from "./Button";
|
||||
export { Checkbox, CheckboxSkeleton } from "./Checkbox";
|
||||
export { ContentSwitcher, Switch } from "./ContentSwitcher";
|
||||
export { Copy } from "./Copy";
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue