mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
feat(button): add stacked prop to ButtonSet
If set to true, buttons will be aligned vertically
This commit is contained in:
parent
5f62cdeb82
commit
c8e0a59474
2 changed files with 15 additions and 3 deletions
|
@ -14,6 +14,7 @@
|
|||
small,
|
||||
tooltipPosition,
|
||||
tooltipAlignment,
|
||||
stacked,
|
||||
} = $$props;
|
||||
|
||||
const regularProps = {
|
||||
|
@ -35,7 +36,7 @@
|
|||
tooltipAlignment,
|
||||
};
|
||||
|
||||
const setProps = { disabled, small, size, iconDescription };
|
||||
const setProps = { stacked, disabled, small, size, iconDescription };
|
||||
</script>
|
||||
|
||||
<div>
|
||||
|
@ -50,7 +51,7 @@
|
|||
{:else if story === 'icon-only buttons'}
|
||||
<Button {...iconOnlyProps} />
|
||||
{:else if story === 'set of buttons'}
|
||||
<ButtonSet>
|
||||
<ButtonSet stacked="{setProps.stacked}">
|
||||
<Button kind="ghost" {...setProps}>Ghost button</Button>
|
||||
<Button kind="secondary" {...setProps}>Secondary button</Button>
|
||||
<Button kind="primary" {...setProps}>Primary button</Button>
|
||||
|
|
|
@ -1,3 +1,14 @@
|
|||
<div class:bx--btn-set="{true}" {...$$restProps}>
|
||||
<script>
|
||||
/**
|
||||
* Set to `true` to stack the buttons vertically
|
||||
* @type {boolean} [stacked=false]
|
||||
*/
|
||||
export let stacked = false;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class:bx--btn-set="{true}"
|
||||
class:bx--btn-set--stacked="{stacked}"
|
||||
{...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue