diff --git a/.changeset/nine-hounds-flow.md b/.changeset/nine-hounds-flow.md new file mode 100644 index 00000000..6d8b8b84 --- /dev/null +++ b/.changeset/nine-hounds-flow.md @@ -0,0 +1,5 @@ +--- +"@skeletonlabs/floating-ui-svelte": minor +--- + +feature: added the FloatingArrow component diff --git a/README.md b/README.md index e2676290..3b1bbd92 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,22 @@ npm install @skeletonlabs/floating-ui-svelte ## Usage +### Making elements "float" + +We want it to float on top of the UI though, so it doesn’t disrupt the flow of the document. Add this class to all floating elements. Note that Floating UI does not have opinions about how your elements stack on the z-axis. + +```css +.floating { + width: max-content; + position: absolute; + top: 0; + left: 0; +} + +``` + +### The Basics + Import the desired hook or component from floating-ui-svelte. [View each example](https://floating-ui-svelte.vercel.app/) for additional guidance. ```js @@ -38,8 +54,8 @@ The `useFloating` Svelte hook acts as a controller for all other Floating UI Sve const floating = useFloating({ elements }); -