diff options
Diffstat (limited to 'alpinejs/packages/docs/src/en')
| -rw-r--r-- | alpinejs/packages/docs/src/en/directives/on.md | 4 | ||||
| -rw-r--r-- | alpinejs/packages/docs/src/en/directives/show.md | 17 | ||||
| -rw-r--r-- | alpinejs/packages/docs/src/en/essentials/installation.md | 2 | ||||
| -rw-r--r-- | alpinejs/packages/docs/src/en/magics/store.md | 2 | ||||
| -rw-r--r-- | alpinejs/packages/docs/src/en/plugins/focus.md | 20 | ||||
| -rw-r--r-- | alpinejs/packages/docs/src/en/plugins/mask.md | 2 | ||||
| -rw-r--r-- | alpinejs/packages/docs/src/en/plugins/morph.md | 22 | ||||
| -rw-r--r-- | alpinejs/packages/docs/src/en/ui.md | 6 |
8 files changed, 49 insertions, 26 deletions
diff --git a/alpinejs/packages/docs/src/en/directives/on.md b/alpinejs/packages/docs/src/en/directives/on.md index 3745a56..7a65ca6 100644 --- a/alpinejs/packages/docs/src/en/directives/on.md +++ b/alpinejs/packages/docs/src/en/directives/on.md @@ -13,7 +13,7 @@ Here's an example of simple button that shows an alert when clicked. <button x-on:click="alert('Hello World!')">Say Hi</button> ``` -> `x-on` can only listen for events with lower case names, as HTML attributes are case-insensitive. Writing `x-on:CLICK` will listen for an event named `click`. If you need to listen for a custom event with a camelCase name, you can use the [`.camel` helper](#camel) to work around this limitation. Alternatively, you can use [`x-bind`](/directives/bind.md#bind-directives) to attach an `x-on` directive to an element in javascript code (where case will be preserved). +> `x-on` can only listen for events with lower case names, as HTML attributes are case-insensitive. Writing `x-on:CLICK` will listen for an event named `click`. If you need to listen for a custom event with a camelCase name, you can use the [`.camel` helper](#camel) to work around this limitation. Alternatively, you can use [`x-bind`](/directives/bind#bind-directives) to attach an `x-on` directive to an element in javascript code (where case will be preserved). <a name="shorthand-syntax"></a> ## Shorthand syntax @@ -81,7 +81,7 @@ For easy reference, here is a list of common keys you may want to listen for. | `.space` | Space | | `.ctrl` | Ctrl | | `.cmd` | Cmd | -| `.meta` | Cmd on Mac, Ctrl on Windows | +| `.meta` | Cmd on Mac, Windows key on Windows | | `.alt` | Alt | | `.up` `.down` `.left` `.right` | Up/Down/Left/Right arrows | | `.escape` | Escape | diff --git a/alpinejs/packages/docs/src/en/directives/show.md b/alpinejs/packages/docs/src/en/directives/show.md index 988a16f..cd28fcf 100644 --- a/alpinejs/packages/docs/src/en/directives/show.md +++ b/alpinejs/packages/docs/src/en/directives/show.md @@ -37,3 +37,20 @@ If you want to apply smooth transitions to the `x-show` behavior, you can use it </div> </div> ``` + +<a name="using-the-important-modifier"></a> +## Using the important modifier + +Sometimes you need to apply a little more force to actually hide an element. In cases where a CSS selector applies the `display` property with the `!important` flag, it will take precedence over the inline style set by Alpine. + +In these cases you may use the `.important` modifier to set the inline style to `display: none !important`. + +```alpine +<div x-data="{ open: false }"> + <button x-on:click="open = ! open">Toggle Dropdown</button> + + <div x-show.important="open"> + Dropdown Contents... + </div> +</div> +``` diff --git a/alpinejs/packages/docs/src/en/essentials/installation.md b/alpinejs/packages/docs/src/en/essentials/installation.md index bee805d..91a0f99 100644 --- a/alpinejs/packages/docs/src/en/essentials/installation.md +++ b/alpinejs/packages/docs/src/en/essentials/installation.md @@ -33,7 +33,7 @@ This is by far the simplest way to get started with Alpine. Include the followin 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. ```alpine -<script defer src="https://unpkg.com/alpinejs@3.10.2/dist/cdn.min.js"></script> +<script defer src="https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js"></script> ``` That's it! Alpine is now available for use inside your page. diff --git a/alpinejs/packages/docs/src/en/magics/store.md b/alpinejs/packages/docs/src/en/magics/store.md index 6610d29..946756e 100644 --- a/alpinejs/packages/docs/src/en/magics/store.md +++ b/alpinejs/packages/docs/src/en/magics/store.md @@ -6,7 +6,7 @@ title: store # $store -You can use `$store` to conveniently access global Alpine stores registered using [`Alpine.store(...)`](/magics/store). For example: +You can use `$store` to conveniently access global Alpine stores registered using [`Alpine.store(...)`](/globals/alpine-store). For example: ```alpine <button x-data @click="$store.darkMode.toggle()">Toggle Dark Mode</button> diff --git a/alpinejs/packages/docs/src/en/plugins/focus.md b/alpinejs/packages/docs/src/en/plugins/focus.md index 00ad767..6946889 100644 --- a/alpinejs/packages/docs/src/en/plugins/focus.md +++ b/alpinejs/packages/docs/src/en/plugins/focus.md @@ -280,7 +280,7 @@ For example: <!-- START_VERBATIM --> <div class="demo"> <div - x-data="{ open: false }" + x-data="{ open: false }" x-trap.noreturn="open" @click.outside="open = false" @keyup.escape.prevent.stop="open = false" @@ -345,9 +345,9 @@ Let's walk through a few examples of these utilities in use. The example below a @keydown.right="$focus.next()" @keydown.left="$focus.previous()" > - <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">First</button> - <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Second</button> - <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Third</button> + <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">First</button> + <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Second</button> + <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Third</button> </div> (Click a button, then use the arrow keys to move left and right) </div> @@ -373,9 +373,9 @@ Notice how if the last button is focused, pressing "right arrow" won't do anythi @keydown.right="$focus.wrap().next()" @keydown.left="$focus.wrap().previous()" > - <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">First</button> - <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Second</button> - <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Third</button> + <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">First</button> + <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Second</button> + <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Third</button> </div> (Click a button, then use the arrow keys to move left and right) </div> @@ -410,9 +410,9 @@ Now, let's add two buttons, one to focus the first element in the button group, @keydown.right="$focus.wrap().next()" @keydown.left="$focus.wrap().previous()" > - <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">First</button> - <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Second</button> - <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Third</button> + <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">First</button> + <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Second</button> + <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Third</button> </div> </div> <!-- END_VERBATIM --> diff --git a/alpinejs/packages/docs/src/en/plugins/mask.md b/alpinejs/packages/docs/src/en/plugins/mask.md index 60badfd..4c5d713 100644 --- a/alpinejs/packages/docs/src/en/plugins/mask.md +++ b/alpinejs/packages/docs/src/en/plugins/mask.md @@ -54,7 +54,7 @@ Alpine.plugin(mask) </div> </div> -<button :aria-expanded="expanded" @click="expanded = ! expanded" class="text-aqua-600 font-medium underline"> +<button :aria-expanded="expanded" @click="expanded = ! expanded" class="text-cyan-600 font-medium underline"> <span x-text="expanded ? 'Hide' : 'Show more'">Show</span> <span x-text="expanded ? '↑' : '↓'">↓</span> </button> </div> diff --git a/alpinejs/packages/docs/src/en/plugins/morph.md b/alpinejs/packages/docs/src/en/plugins/morph.md index 3098ca8..2ff0232 100644 --- a/alpinejs/packages/docs/src/en/plugins/morph.md +++ b/alpinejs/packages/docs/src/en/plugins/morph.md @@ -21,10 +21,10 @@ The best way to understand its purpose is with the following interactive visuali <div class="flex w-full justify-between" style="padding-bottom: 1rem"> <div class="w-1/2 px-4"> - <button @click="slide = (slide === 1) ? 13 : slide - 1" class="w-full bg-aqua-400 rounded-full text-center py-3 font-bold text-white">Previous</button> + <button @click="slide = (slide === 1) ? 13 : slide - 1" class="w-full bg-cyan-400 rounded-full text-center py-3 font-bold text-white">Previous</button> </div> <div class="w-1/2 px-4"> - <button @click="slide = (slide % 13) + 1" class="w-full bg-aqua-400 rounded-full text-center py-3 font-bold text-white">Next</button> + <button @click="slide = (slide % 13) + 1" class="w-full bg-cyan-400 rounded-full text-center py-3 font-bold text-white">Next</button> </div> </div> </div> @@ -82,8 +82,8 @@ Here's an example of using `Alpine.morph()` to update an Alpine component with n ```alpine <div x-data="{ message: 'Change me, then press the button!' }"> - <input type="text" x-model="message"> - <span x-text="message"></span> + <input type="text" x-model="message"> + <span x-text="message"></span> </div> <button>Run Morph</button> @@ -95,9 +95,9 @@ Here's an example of using `Alpine.morph()` to update an Alpine component with n Alpine.morph(el, ` <div x-data="{ message: 'Change me, then press the button!' }"> <h2>See how new elements have been added</h2> - - <input type="text" x-model="message"> - <span x-text="message"></span> + + <input type="text" x-model="message"> + <span x-text="message"></span> <h2>but the state of this component hasn't changed? Magical.</h2> </div> @@ -110,9 +110,9 @@ Here's an example of using `Alpine.morph()` to update an Alpine component with n <div class="demo"> <div x-data="{ message: 'Change me, then press the button!' }" id="morph-demo-1" class="space-y-2"> <input type="text" x-model="message" class="w-full"> - <span x-text="message"></span> + <span x-text="message"></span> </div> - + <button id="morph-button-1" class="mt-4">Run Morph</button> </div> @@ -123,8 +123,8 @@ Here's an example of using `Alpine.morph()` to update an Alpine component with n Alpine.morph(el, ` <div x-data="{ message: 'Change me, then press the button!' }" id="morph-demo-1" class="space-y-2"> <h4>See how new elements have been added</h4> - <input type="text" x-model="message" class="w-full"> - <span x-text="message"></span> + <input type="text" x-model="message" class="w-full"> + <span x-text="message"></span> <h4>but the state of this component hasn't changed? Magical.</h4> </div> `) diff --git a/alpinejs/packages/docs/src/en/ui.md b/alpinejs/packages/docs/src/en/ui.md new file mode 100644 index 0000000..14a4b16 --- /dev/null +++ b/alpinejs/packages/docs/src/en/ui.md @@ -0,0 +1,6 @@ +--- +order: 5 +title: UI +font-type: mono +type: sub-directory +--- |