@alpinejs/docs 3.13.1-revision.1 → 3.13.2-revision.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
package/src/en/advanced/csp.md
CHANGED
|
@@ -14,14 +14,21 @@ In order to accommodate environments where this CSP is necessary, Alpine will of
|
|
|
14
14
|
<a name="installation"></a>
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
17
|
-
The CSP build hasn’t been officially released yet. In the meantime, you may
|
|
17
|
+
The CSP build hasn’t been officially released yet. In the meantime, you may build it from source. To do this, clone the [`alpinejs/alpine`](https://github.com/alpinejs/alpine) repository and run:
|
|
18
|
+
|
|
19
|
+
```shell
|
|
20
|
+
npm install
|
|
21
|
+
npm run build
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
This will generate a `/packages/csp/dist/` directory with the built files. After copying the appropriate file into your project, you can include it either via `<script>` tag or module import:
|
|
18
25
|
|
|
19
26
|
<a name="script-tag"></a>
|
|
20
27
|
### Script tag
|
|
21
28
|
|
|
22
29
|
```alpine
|
|
23
30
|
<html>
|
|
24
|
-
<script src="
|
|
31
|
+
<script src="/path/to/cdn.js" defer></script>
|
|
25
32
|
</html>
|
|
26
33
|
```
|
|
27
34
|
|
|
@@ -29,7 +36,7 @@ The CSP build hasn’t been officially released yet. In the meantime, you may [b
|
|
|
29
36
|
### Module import
|
|
30
37
|
|
|
31
38
|
```js
|
|
32
|
-
import Alpine from '
|
|
39
|
+
import Alpine from './path/to/module.esm.js'
|
|
33
40
|
|
|
34
41
|
window.Alpine = Alpine
|
|
35
42
|
window.Alpine.start()
|
|
@@ -33,7 +33,7 @@ This is by far the simplest way to get started with Alpine. Include the followin
|
|
|
33
33
|
Notice the `@3.x.x` in the provided CDN link. This will pull the latest version of Alpine version 3. For stability in production, it's recommended that you hardcode the latest version in the CDN link.
|
|
34
34
|
|
|
35
35
|
```alpine
|
|
36
|
-
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.
|
|
36
|
+
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.2/dist/cdn.min.js"></script>
|
|
37
37
|
```
|
|
38
38
|
|
|
39
39
|
That's it! Alpine is now available for use inside your page.
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
---
|
|
2
|
+
order: 5
|
|
3
|
+
title: Anchor
|
|
4
|
+
description: Anchor an element's positioning to another element on the pageg
|
|
5
|
+
graph_image: https://alpinejs.dev/social_anchor.jpg
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Anchor Plugin
|
|
9
|
+
|
|
10
|
+
Alpine's Anchor plugin allows you easily anchor an element's positioning to another element on the page.
|
|
11
|
+
|
|
12
|
+
This functionality is useful when creating dropdown menus, popovers, dialogs, and tooltips with Alpine.
|
|
13
|
+
|
|
14
|
+
The "anchoring" functionality used in this plugin is provided by the [Floating UI](https://floating-ui.com/) project.
|
|
15
|
+
|
|
16
|
+
<a name="installation"></a>
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
You can use this plugin by either including it from a `<script>` tag or installing it via NPM:
|
|
20
|
+
|
|
21
|
+
### Via CDN
|
|
22
|
+
|
|
23
|
+
You can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.
|
|
24
|
+
|
|
25
|
+
```alpine
|
|
26
|
+
<!-- Alpine Plugins -->
|
|
27
|
+
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/anchor@3.x.x/dist/cdn.min.js"></script>
|
|
28
|
+
|
|
29
|
+
<!-- Alpine Core -->
|
|
30
|
+
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Via NPM
|
|
34
|
+
|
|
35
|
+
You can install Collapse from NPM for use inside your bundle like so:
|
|
36
|
+
|
|
37
|
+
```shell
|
|
38
|
+
npm install @alpinejs/anchor
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Then initialize it from your bundle:
|
|
42
|
+
|
|
43
|
+
```js
|
|
44
|
+
import Alpine from 'alpinejs'
|
|
45
|
+
import anchor from '@alpinejs/anchor'
|
|
46
|
+
|
|
47
|
+
Alpine.plugin(anchor)
|
|
48
|
+
|
|
49
|
+
...
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
<a name="x-anchor"></a>
|
|
53
|
+
## x-anchor
|
|
54
|
+
|
|
55
|
+
The primary API for using this plugin is the `x-anchor` directive.
|
|
56
|
+
|
|
57
|
+
To use this plugin, add the `x-anchor` directive to any element and pass it a reference to the element you want to anchor it's position to (often a button on the page).
|
|
58
|
+
|
|
59
|
+
By default, `x-anchor` will set the the element's CSS to `position: absolute` and the appropriate `top` and `left` values. If the anchored element is normally displayed below the reference element but doesn't have room on the page, it's styling will be adjusted to render above the element.
|
|
60
|
+
|
|
61
|
+
For example, here's a simple dropdown anchored to the button that toggles it:
|
|
62
|
+
|
|
63
|
+
```alpine
|
|
64
|
+
<div x-data="{ open: false }">
|
|
65
|
+
<button x-ref="button" @click="open = ! open">Toggle</button>
|
|
66
|
+
|
|
67
|
+
<div x-show="open" x-anchor="$refs.button">
|
|
68
|
+
Dropdown content
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
<!-- START_VERBATIM -->
|
|
74
|
+
<div x-data="{ open: false }" class="demo overflow-hidden">
|
|
75
|
+
<div class="flex justify-center">
|
|
76
|
+
<button x-ref="button" @click="open = ! open">Toggle</button>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<div x-show="open" x-anchor="$refs.button" class="bg-white rounded p-4 border shadow">
|
|
80
|
+
Dropdown content
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<!-- END_VERBATIM -->
|
|
84
|
+
|
|
85
|
+
<a name="positioning"></a>
|
|
86
|
+
## Positioning
|
|
87
|
+
|
|
88
|
+
`x-anchor` allows you to customize the positioning of the anchored element using the following modifiers:
|
|
89
|
+
|
|
90
|
+
* Bottom: `.bottom`, `.bottom-start`, `.bottom-end`
|
|
91
|
+
* Top: `.top`, `.top-start`, `.top-end`
|
|
92
|
+
* Left: `.left`, `.left-start`, `.left-end`
|
|
93
|
+
* Right: `.right`, `.right-start`, `.right-end`
|
|
94
|
+
|
|
95
|
+
Here is an example of using `.bottom-start` to position a dropdown below and to the right of the reference element:
|
|
96
|
+
|
|
97
|
+
```alpine
|
|
98
|
+
<div x-data="{ open: false }">
|
|
99
|
+
<button x-ref="button" @click="open = ! open">Toggle</button>
|
|
100
|
+
|
|
101
|
+
<div x-show="open" x-anchor.bottom-start="$refs.button">
|
|
102
|
+
Dropdown content
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
<!-- START_VERBATIM -->
|
|
108
|
+
<div x-data="{ open: false }" class="demo overflow-hidden">
|
|
109
|
+
<div class="flex justify-center">
|
|
110
|
+
<button x-ref="button" @click="open = ! open">Toggle</button>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<div x-show="open" x-anchor.bottom-start="$refs.button" class="bg-white rounded p-4 border shadow">
|
|
114
|
+
Dropdown content
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
<!-- END_VERBATIM -->
|
|
118
|
+
|
|
119
|
+
<a name="offset"></a>
|
|
120
|
+
## Offset
|
|
121
|
+
|
|
122
|
+
You can add an offset to your anchored element using the `.offset.[px value]` modifier like so:
|
|
123
|
+
|
|
124
|
+
```alpine
|
|
125
|
+
<div x-data="{ open: false }">
|
|
126
|
+
<button x-ref="button" @click="open = ! open">Toggle</button>
|
|
127
|
+
|
|
128
|
+
<div x-show="open" x-anchor.offset.10="$refs.button">
|
|
129
|
+
Dropdown content
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
<!-- START_VERBATIM -->
|
|
135
|
+
<div x-data="{ open: false }" class="demo overflow-hidden">
|
|
136
|
+
<div class="flex justify-center">
|
|
137
|
+
<button x-ref="button" @click="open = ! open">Toggle</button>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<div x-show="open" x-anchor.offset.10="$refs.button" class="bg-white rounded p-4 border shadow">
|
|
141
|
+
Dropdown content
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
<!-- END_VERBATIM -->
|
|
145
|
+
|
|
146
|
+
<a name="manual-styling"></a>
|
|
147
|
+
## Manual styling
|
|
148
|
+
|
|
149
|
+
By default, `x-alpine` applies the positioning styles to your element under the hood. If you'd prefer full control over styling, you can pass the `.no-style` modifer and use the `$anchor` magic to access the values inside another Alpine expression.
|
|
150
|
+
|
|
151
|
+
Below is an example of bypassing `x-anchor`'s internal styling and instead applying the styles yourself using `x-bind:style`:
|
|
152
|
+
|
|
153
|
+
```alpine
|
|
154
|
+
<div x-data="{ open: false }">
|
|
155
|
+
<button x-ref="button" @click="open = ! open">Toggle</button>
|
|
156
|
+
|
|
157
|
+
<div
|
|
158
|
+
x-show="open"
|
|
159
|
+
x-anchor.no-style="$refs.button"
|
|
160
|
+
x-bind:style="{ position: 'absolute', top: $anchor.y+'px', left: $anchor.x+'px' }"
|
|
161
|
+
>
|
|
162
|
+
Dropdown content
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
<!-- START_VERBATIM -->
|
|
168
|
+
<div x-data="{ open: false }" class="demo overflow-hidden">
|
|
169
|
+
<div class="flex justify-center">
|
|
170
|
+
<button x-ref="button" @click="open = ! open">Toggle</button>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<div
|
|
174
|
+
x-show="open"
|
|
175
|
+
x-anchor.no-style="$refs.button"
|
|
176
|
+
x-bind:style="{ position: 'absolute', top: $anchor.y+'px', left: $anchor.x+'px' }"
|
|
177
|
+
class="bg-white rounded p-4 border shadow"
|
|
178
|
+
>
|
|
179
|
+
Dropdown content
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
<!-- END_VERBATIM -->
|
|
183
|
+
|
|
184
|
+
<a name="from-id"></a>
|
|
185
|
+
## Anchor to an ID
|
|
186
|
+
|
|
187
|
+
The examples thus far have all been anchoring to other elements using Alpine refs.
|
|
188
|
+
|
|
189
|
+
Because `x-anchor` accepts a reference to any DOM element, you can use utilities like `document.getElementById()` to anchor to an element by its `id` attribute:
|
|
190
|
+
|
|
191
|
+
```alpine
|
|
192
|
+
<div x-data="{ open: false }">
|
|
193
|
+
<button id="trigger" @click="open = ! open">Toggle</button>
|
|
194
|
+
|
|
195
|
+
<div x-show="open" x-anchor="document.getElementById('#trigger')">
|
|
196
|
+
Dropdown content
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
<!-- START_VERBATIM -->
|
|
202
|
+
<div x-data="{ open: false }" class="demo overflow-hidden">
|
|
203
|
+
<div class="flex justify-center">
|
|
204
|
+
<button class="trigger" @click="open = ! open">Toggle</button>
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
<div x-show="open" x-anchor="document.querySelector('.trigger')">
|
|
209
|
+
Dropdown content
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
<!-- END_VERBATIM -->
|
|
213
|
+
|
package/src/en/plugins/morph.md
CHANGED