mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
chore: lift components folder
This commit is contained in:
parent
76df51674d
commit
2200b29b92
301 changed files with 57 additions and 76 deletions
43
src/RadioButtonGroup/RadioButtonGroup.svelte
Normal file
43
src/RadioButtonGroup/RadioButtonGroup.svelte
Normal file
|
@ -0,0 +1,43 @@
|
|||
<script>
|
||||
export let selected = undefined;
|
||||
export let disabled = false;
|
||||
export let labelPosition = "right"; // "right" | "left"
|
||||
export let orientation = "horizontal"; // "horizontal" | "vertical"
|
||||
|
||||
import { createEventDispatcher, setContext } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const selectedValue = writable(selected);
|
||||
|
||||
setContext("RadioButtonGroup", {
|
||||
selectedValue,
|
||||
add: ({ checked, value }) => {
|
||||
if (checked) {
|
||||
selectedValue.set(value);
|
||||
}
|
||||
},
|
||||
update: value => {
|
||||
selectedValue.set(value);
|
||||
}
|
||||
});
|
||||
|
||||
$: selected = $selectedValue;
|
||||
$: dispatch("change", $selectedValue);
|
||||
</script>
|
||||
|
||||
<div
|
||||
class:bx--form-item={true}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<div
|
||||
class:bx--radio-button-group={true}
|
||||
class:bx--radio-button-group--vertical={orientation === 'vertical'}
|
||||
class={labelPosition && `bx--radio-button-group--label-${labelPosition}`}
|
||||
{disabled}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue