タグ : Alpine
使用 Alpine.js Support Plugin 支援 Alpine
WebStorm 目前還沒有支援 Alpine，但可按裝 3rd Party 的 Alpine.js Support Plugin 支援 Alpine。
整合 Hugo 與 Alpine
Alpine 特別適合後端有自己 Template Engine 的使用場景，Hugo 雖然為 SSG，但因為使用了 Go Template，事實上與後端類似，因此也適合 Alpine。
Reading Excel on Alpine
Although we can’t read Excel files on Alpine directly, we can use the xlsx package to finish the task.
Preparing Body Object for fetch()
When using fetch() for REST POST, we can easily prepare Body Object on Alpine.
Adding Scroll to Top Button for Blog
Scroll to Top is a typical button for a blog. We can implement it by JavaScript or simply HTML / CSS.
Building Modular App with Alpine
Alpine doesn’t support ES Module completely. But we can still build a modular app with Alpine by coding style.
Loading Alpine by ES Module
Alpine is traditionally loading by CDN, but we can also initialize Alpine by ES module.
Using x-model with debounce Modifier
Sometimes we want to debounce the updating of bound input. This is useful for things like real-time search inputs that fetch new data from the server every time the search property changes.
Using x-model with number Modifier
By default, any data stored in a property via x-model is stored as a string. To force Alpine to store the value as a JavaScript number, add the .number modifier.
Using x-model with lazy Modifier
We can update the x-model when user focus aways from the input element or press enter.
Using Hugo Variables with Alpine
Not only using Hugo’s variables with Go template language, but also Alpine’s directive.
Using init() without x-init
We can also provide init() in the x-data Object, and it will be called automatically without the x-init directive.
Using x-init with $nextTick
Sometimes, we want to wait until after Alpine has completely finished rendering to execute some code. We can use $nextTick in x-init.
Using x-init to Fetch Data from API
Another use case for x-init is using fetch to call remote API to initialize the data.
Using x-init to Set Focus
Alpine’s x-init is just like Vue’s mounted hook. We can run some expressions in x-init.
Using x-html to bind HTML
x-html sets the innerHTML property of an element to the result of a given expression.
Using x-effect to Simulate x-html
x-effect is a useful directive for re-evaluating an expression when one of its dependencies change. You can think of it as a watcher where you don’t have to specify what property to watch, it will watch all properties used within it.
Using x-init to Initialize x-data
Not only can we define data in x-data directly, but also we can initialize the data in x-init.
Using x-data for Single-element Component
Sometimes we may only have a single element inside our Alpine component, and we can declare x-data directly on the single element.
Using x-data with Getter
JavaScript Getter is handy when the sole purpose of a method is to return data based on another state. Think of them like Computed Property in Vue.
Alpine Overview
Alpine is a lightweight framework for pure HTML pages. It is very small, and only 6kb is required. We can implement Alpine by TailwindCSS, Vue or Svelte style.
Using $el to Access the Current Element
Instead of using x-ref and $refs to access the current element, Alpine also provides $el for conciseness.
Using x-for with Range
If we need to simply loop n number of times, rather than iterate an Array, Alpine provides a short syntax.
Using x-for to Create Elements by Loop
Alpine’s x-for is just like Vue’s v-for. We can create elements by loop directly in HTML.
Using $nextTick to Execute Expression after DOM Updates
If we want to execute some expression after DOM updates, we can pass the function to the $nextTick magic property.
Using x-ref to Set a Name for the Element
Alpine’s x-ref is just like Vue’s v-ref. We can set a name for the DOM element.
Using x-model with Textbox
We can implment two-way data binding with <input type="text"> by x-model.
Using x-model with Checkbox
We can implement two-way data binding with <input type="checkbox"> by x-model.
Creating Search Autocomplete
Search Autocomplete is a common component for modern Web design. This can be done only by Alpine and TailwindCSS.
Using x-show to Display Tabs
Showing different content by Tabs is a common layout for modern Web design. This can be done only by Alpine and TailwindCSS.
Toggling Light & Dark Mode
Dark mode is getting more and more popular. We can toggle light and dark mode by Alpine and TailwindCSS.
Using Collapse Plugin for Accordion
Accordion is a common effect by toggling the element. We can implement it just by Apline and TailwindCSS without any package.
Using x-teleport to Control Element outside of x-data Block
Sometimes we want to control the HTML element but not in the x-data block. We can use <template> with x-teleport to teleport HTML to the block outside of x-data.
Using x-cloak to Prevent Page Flicker
If the default state of an x-show on page load is false, you may want to use x-cloak on the page to avoid Page Flicker.