Melt UI みなさん、Melt UIというSvelteのヘッドレスUIライブラリをご存知でしょうか? Melt Introductionページで使い方を見てみましょう〜! 使い方 <script> import { createCollapsible, melt } from '@melt-ui/svelte' const { elements: { root, content, trigger }, states: { open } } = createCollapsible() </script> <div use:melt={$root}> <button use:melt={$trigger}>{$open ? 'Close' : 'Open'}</button> <div use:melt={$content}>Obi-Wan says: Hello there!</div>
![Melt UIの設計をみてみる - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ebbf0eb5461e32f0d9a4708fe436feb0d33814/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9TWVsdCUyMFVJJUUzJTgxJUFFJUU4JUE4JUFEJUU4JUE4JTg4JUUzJTgyJTkyJUUzJTgxJUJGJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThCJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkNtaWRkbGUmcz01MzZmOWFhNWJmZWVmMmE3NmRhZTNjMzRlZDcxOTc3Mw%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc2hhbW9raXQmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTEyMzkyNGE2NTEwZjEwYWQwMzJhNjM5N2M2NGM2ZDlh%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dba81ab6a2f90ef9bc9b7115893053b64)