Skip to content

Commit ba5a224

Browse files
NullVoxPopuliNullVoxPopuli
committed
Document anchorTo separately
1 parent f17869b commit ba5a224

File tree

2 files changed

+88
-69
lines changed

2 files changed

+88
-69
lines changed

‎docs-app/public/docs/5-floaty-bits/anchor-to.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# anchorTo
2+
3+
The `anchorTo` modifier provides a wrapper for using [Floating UI](https://floating-ui.com/), for associating a floating element to an anchor element (such as for menus, popovers, etc).
4+
5+
<Callout>
6+
7+
The usage of a 3rd-party library will be removed when [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) lands and is widely supported (This component and modifier will still exist for the purpose of wiring up the ids between anchor and target).
8+
9+
</Callout>
10+
11+
Several of Floating UI's functions and [middleware](https://floating-ui.com/docs/middleware) are used to create an experience out of the box that is useful and expected.
12+
See Floating UI's [documentation](https://floating-ui.com/docs/getting-started) for more information on any of the following included functionality.
13+
14+
## Setup
15+
16+
```bash
17+
pnpm add ember-primitives
18+
```
19+
20+
21+
## `{{anchorTo}}`
22+
23+
The main modifier for creating floating UIs with any elements.
24+
25+
Requires you to maintain a unique ID for every invocation.
26+
27+
28+
<div class="featured-demo">
29+
30+
```gjs live preview no-shadow
31+
import { anchorTo } from 'ember-primitives/floating-ui';
32+
33+
<template>
34+
<button id="reference" popovertarget="floating">Click the reference element</button>
35+
<menu popover id="floating" {{anchorTo "#reference"}}>Here is <br> floating element</menu>
36+
37+
<style>
38+
menu#floating {
39+
width: max-content;
40+
position: absolute;
41+
top: 0;
42+
left: 0;
43+
background: #222;
44+
color: white;
45+
font-weight: bold;
46+
padding: 2rem;
47+
border-radius: 4px;
48+
font-size: 90%;
49+
filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
50+
z-index: 10;
51+
}
52+
button#reference {
53+
padding: 0.5rem;
54+
border: 1px solid;
55+
display: inline-block;
56+
background: white;
57+
color: black;
58+
border-radius: 0.25rem;
59+
60+
&:hover {
61+
background: #ddd;
62+
}
63+
}
64+
</style>
65+
</template>
66+
```
67+
68+
</div>
69+
70+
Note that in this demo thare are _two_ sets of ids. One pair for the floating behavior, and another pair for the [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover) wiring. The component below handles the floating id, but to avoid needing to maintain _unique_ pairs of ids for each floating-ui you may be interested in the [Popover](/5-floaty-bits/popover.md) component (which also includes arrow support).
71+
72+
### API Reference for `{{anchorTo}}`
73+
74+
```gjs live no-shadow
75+
import { ModifierSignature } from 'kolay';
76+
77+
<template>
78+
<ModifierSignature
79+
@package="ember-primitives"
80+
@module="declarations/floating-ui/modifier"
81+
@name="Signature"
82+
/>
83+
</template>
84+
```
85+
86+

‎docs-app/public/docs/5-floaty-bits/floating-ui.md‎

Lines changed: 2 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Floating UI
22

3-
The `FloatingUI` component (and modifier) provides a wrapper for using [Floating UI](https://floating-ui.com/), for associating a floating element to an anchor element (such as for menus, popovers, etc.
3+
The `FloatingUI` component provides a wrapper for using [Floating UI](https://floating-ui.com/), for associating a floating element to an anchor element (such as for menus, popovers, etc).
44

55
<Callout>
66

@@ -17,76 +17,9 @@ See Floating UI's [documentation](https://floating-ui.com/docs/getting-started)
1717
pnpm add ember-primitives
1818
```
1919

20-
21-
## `{{anchorTo}}`
22-
23-
The main modifier for creating floating UIs with any elements.
24-
25-
Requires you to maintain a unique ID for every invocation.
26-
27-
28-
<div class="featured-demo">
29-
30-
```gjs live preview no-shadow
31-
import { anchorTo } from 'ember-primitives/floating-ui';
32-
33-
<template>
34-
<button id="reference" popovertarget="floating">Click the reference element</button>
35-
<menu popover id="floating" {{anchorTo "#reference"}}>Here is <br> floating element</menu>
36-
37-
<style>
38-
menu#floating {
39-
width: max-content;
40-
position: absolute;
41-
top: 0;
42-
left: 0;
43-
background: #222;
44-
color: white;
45-
font-weight: bold;
46-
padding: 2rem;
47-
border-radius: 4px;
48-
font-size: 90%;
49-
filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
50-
z-index: 10;
51-
}
52-
button#reference {
53-
padding: 0.5rem;
54-
border: 1px solid;
55-
display: inline-block;
56-
background: white;
57-
color: black;
58-
border-radius: 0.25rem;
59-
60-
&:hover {
61-
background: #ddd;
62-
}
63-
}
64-
</style>
65-
</template>
66-
```
67-
68-
</div>
69-
70-
Note that in this demo thare are _two_ sets of ids. One pair for the floating behavior, and another pair for the [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover) wiring. The component below handles the floating id, but to avoid needing to maintain _unique_ pairs of ids for each floating-ui you may be interested in the [Popover](/5-floaty-bits/popover.md) component (which also includes arrow support).
71-
72-
### API Reference for `{{anchorTo}}`
73-
74-
```gjs live no-shadow
75-
import { ModifierSignature } from 'kolay';
76-
77-
<template>
78-
<ModifierSignature
79-
@package="ember-primitives"
80-
@module="declarations/floating-ui/modifier"
81-
@name="Signature"
82-
/>
83-
</template>
84-
```
85-
86-
8720
## `<FloatingUI>`
8821

89-
This component takes the above modifier and abstracts away the need to manage the `id`-relationship between reference and floating elements -- since every ID on the page needs to be unique, it is useful to have this automatically managed for you.
22+
This component takes the [`archorTo` modifier](/5-floaty-bits/anchor-to.md) and abstracts away the need to manage the `id`-relationship between reference and floating elements -- since every ID on the page needs to be unique, it is useful to have this automatically managed for you.
9023

9124
This component has no DOM of its own, but provides two modifiers to attach to both reference and floating elements.
9225

0 commit comments

Comments
 (0)