@wix/design-system
Version:
@wix/design-system
57 lines (45 loc) • 1.22 kB
Markdown
## Feature Examples
### Color example
- description: <p>The color prop is used to change the pulse color.</p>
- example:
```jsx
() => {
const [ active, setActive ] = React.useState(false);
return (
<Layout>
<Cell span={8}>
<PulseAnimation active={active} color="P10" borderRadius="18px">
<Button skin="premium">Button</Button>
</PulseAnimation>
</Cell>
<Cell span={4} vertical>
<button onClick={() => setActive(!active)}>
{active ? 'Stop Animation' : 'Play Animation'}
</button>
</Cell>
</Layout>
)
}
```
### Delay example
- description: <p>The delay prop is used to set a delay before the animation execution.</p>
- example:
```jsx
() => {
const [ active, setActive ] = React.useState(false);
return (
<Layout>
<Cell span={8}>
<PulseAnimation delay="500ms" active={active} color="B10" borderRadius="18px">
<Button color="B10">Button</Button>
</PulseAnimation>
</Cell>
<Cell span={4} vertical>
<button onClick={() => setActive(!active)}>
{active ? 'Stop Animation' : 'Play Animation'}
</button>
</Cell>
</Layout>
)
}
```