action

Focus

Manipulating the focus order and intercepting certain keyboard events within a component such as Modal.

Set Up #

We offer focusTrap and autoFocus action in the script tag.

Example.svelte

<script>
	import { focusTrap, autoFocus } from '@sans-ui/core';
</script>

focusTrap allows you to implement focus-trap feature easily. autoFocus makes user’s focus onto the first interactive elment in the component that you applied autoFocus. Let’s take a look at an example with dialog element…

Example.svelte

<script>
	import { Button } from '@sans-ui/core';
	import { focusTrap } from '@sans-ui/core';

	let open = false;
	const toggle = () => {
		open = !open;
	};
</script>

<Button on:click={toggle}>
	{#if open}
		Close dialog element
	{:else}
		Show dialog element
	{/if}
</Button>

<dialog {open} use:focusTrap use:autoFocus class="bg-gray-200 px-24 py-12">
	<p class="mb-6">Greetings, one and all!</p>
	<Button variant="secondary" on:click={toggle}>Cancel</Button>
	<Button on:click={toggle}>Close</Button>
</dialog>

Focus

Set Up #

Usage #