Actions
Click Outside
This action allows you to execute a callback when the user clicks outside of an element.
# Example
Example.svelte
<script>
import { clickOutside } from '@gzim/svelte-actions';
let scale = 1;
const handleClickOutside = () => {
scale++;
};
const handleClick = () => {
scale = 1;
};
</script>
<section>
<button style:--scale={scale} use:clickOutside={handleClickOutside} on:click={handleClick}>
{scale === 1 ? 'Click outside' : 'Click me to reset'}
</button>
</section>
<style>
section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
border: none;
background-color: #56aaff;
cursor: pointer;
color: white;
transform: scale(var(--scale));
transition: all 0.2s ease-in-out;
}
</style>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
# Props
| Prop | Type | Description | Default Value |
|---|---|---|---|
callback | () => void | Function to be executed when a click occurs outside the specified element. This should handle the outside-click action, such as closing or hiding the element. | N/A |