budibase/packages/bbui/src/Actions/ClickOutside.svench.svx

30 lines
906 B
Plaintext

<script>
import { View } from "svench";
import Multiselect from "../Form/Multiselect.svelte";
import DropdownMenu from "../DropdownMenu/DropdownMenu.svelte";
import Button from "../Button/Button.svelte";
import Icon from "../Icons/Icon.svelte";
const options = ["Red", "Blue", "Yellow", "Green", "Pink", "Very long color name to show text wrapping"];
let anchorLeft;
let dropdownLeft;
</script>
### Click Outside Action
This action can be used to listen for when you want to call a function whenever a user clicks outside of the element it is applied toString.
```html
<script>
import { clickOutside } from '@budibase/bbui'
const someFunction = () => {
// Some logic to close a dropdown or stop the user from doing something without saving?
}
</script>
<button use:clickOutside={someFunction} class="multiselect" bind:this={anchor}>
Clicking this opens the
</button>
```