Skip to main content

svelte

@morfeo/svelte expose a svelte action that you can apply to your components to use morfeo.

Installation

with npm:

npm install @morfeo/web @morfeo/svelte

or yarn:

yarn add @morfeo/web @morfeo/svelte

Usage

<script>
import { morfeoStyle } from "@morfeo/svelte";
</script>

<button use:morfeoStyle={{...$$restProps, componentName: 'Button' }}>
<slot></slot>
</button>

This component can now be stylized referring to the theme with inline style.

<script>
import Button from './Button.svelte';
</script>

<div>
<Button bg="dark" borerRadius="m" px="xs" py="xxs">Click me</Button>
</div>

Or simply defining the style directly inside the theme object:

const myTheme = {
...rest,
components: {
Button: {
style: {
bg: 'dark',
borderRadius: 'm',
px: 'xs',
py: '2xs',
},
props: {
type: 'submit',
},
variants: {
primary: {
style: {
bg: 'primary',
borderWidth: 's',
borderColor: 'secondary',
},
},
submit: {
style: {
bg: 'secondary',
},
props: {
type: 'submit',
},
},
},
},
},
};
<script>
import Button from './Button.svelte';
</script>

<div>
<Button>Regular button</Button>
<Button variant="primary">Primary button</Button>
<!-- This will be rendered with the attribute type="submit" -->
<Button variant="submit">Submit button</Button>
</div>