This content originally appeared on Hussein Al Hammad and was authored by Hussein Al Hammad
When using Alpine.js the x-cloak attribute is removed from DOM elements when Alpine is initialised. As noted in the docs, this makes it useful for hiding elements until Alpine is initialised:
x-cloakattributes are removed from elements when Alpine initializes. This is useful for hiding pre-initialized DOM. It's typical to add the following global style for this to work:<style> [x-cloak] { display: none; } </style>
You may want to hide pre-initialised DOM on some screen sizes, but not others. A good example for this is the links in a site's navigation bar, which are typically hidden by default on smaller screen sizes, but are always visible on wider screens.
So instead of hiding all elements with the x-cloak attribute, we can hide only the ones whose x-cloak attribute has no value:
[x-cloak=""] { display: none; }This allows us to target elements whose x-cloak attribute has a value:
[x-cloak="some-value"] { }So now we can write CSS rules targeting elements whose x-cloak value is mobile, tablet, desktop:
/* always hidden */
[x-cloak=""] { display: none; }
/* hidden on mobile/smaller screens */
@media screen and (max-width: 768px) {
[x-cloak="mobile"] { display: none; }
}
This content originally appeared on Hussein Al Hammad and was authored by Hussein Al Hammad
Hussein Al Hammad | Sciencx (2020-04-02T00:00:00+00:00) Alpine.js: responsive x-cloak. Retrieved from https://www.scien.cx/2020/04/02/alpine-js-responsive-x-cloak/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.