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 Button from "./Button.svelte";
|
||||||
import ButtonSkeleton from "./Button.Skeleton.svelte";
|
import ButtonSkeleton from "./Button.Skeleton.svelte";
|
||||||
|
import ButtonSet from "./ButtonSet.svelte";
|
||||||
import Add16 from "carbon-icons-svelte/lib/Add16";
|
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
@ -12,7 +13,7 @@
|
||||||
iconDescription,
|
iconDescription,
|
||||||
small,
|
small,
|
||||||
tooltipPosition,
|
tooltipPosition,
|
||||||
tooltipAlignment
|
tooltipAlignment,
|
||||||
} = $$props;
|
} = $$props;
|
||||||
|
|
||||||
const regularProps = {
|
const regularProps = {
|
||||||
|
@ -20,7 +21,7 @@
|
||||||
disabled,
|
disabled,
|
||||||
size,
|
size,
|
||||||
iconDescription,
|
iconDescription,
|
||||||
small
|
small,
|
||||||
};
|
};
|
||||||
|
|
||||||
const iconOnlyProps = {
|
const iconOnlyProps = {
|
||||||
|
@ -31,7 +32,7 @@
|
||||||
icon: Add16,
|
icon: Add16,
|
||||||
iconDescription,
|
iconDescription,
|
||||||
tooltipPosition,
|
tooltipPosition,
|
||||||
tooltipAlignment
|
tooltipAlignment,
|
||||||
};
|
};
|
||||||
|
|
||||||
const setProps = { disabled, small, size, iconDescription };
|
const setProps = { disabled, small, size, iconDescription };
|
||||||
|
@ -49,10 +50,11 @@
|
||||||
{:else if story === 'icon-only buttons'}
|
{:else if story === 'icon-only buttons'}
|
||||||
<Button {...iconOnlyProps} />
|
<Button {...iconOnlyProps} />
|
||||||
{:else if story === 'set of buttons'}
|
{: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="secondary" {...setProps}>Secondary button</Button>
|
||||||
<Button kind="primary" {...setProps}>Primary button</Button>
|
<Button kind="primary" {...setProps}>Primary button</Button>
|
||||||
</div>
|
</ButtonSet>
|
||||||
{:else}
|
{:else}
|
||||||
<Button {...regularProps}>Button</Button>
|
<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 Button } from "./Button.svelte";
|
||||||
export { default as ButtonSkeleton } from "./Button.Skeleton.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 { Accordion, AccordionItem, AccordionSkeleton } from "./Accordion";
|
||||||
export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "./Breadcrumb";
|
export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "./Breadcrumb";
|
||||||
export { Button, ButtonSkeleton } from "./Button";
|
export { Button, ButtonSkeleton, ButtonSet } from "./Button";
|
||||||
export { Checkbox, CheckboxSkeleton } from "./Checkbox";
|
export { Checkbox, CheckboxSkeleton } from "./Checkbox";
|
||||||
export { ContentSwitcher, Switch } from "./ContentSwitcher";
|
export { ContentSwitcher, Switch } from "./ContentSwitcher";
|
||||||
export { Copy } from "./Copy";
|
export { Copy } from "./Copy";
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue