-
-
Notifications
You must be signed in to change notification settings - Fork 41
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(unhead): support normalising
style
Fixes #324
- Loading branch information
Showing
5 changed files
with
149 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,79 @@ | ||
| --- | ||
| title: Class Attribute | ||
| description: Learn how to use the class attribute with Unhead. | ||
| title: Class & Style Attributes | ||
| description: Style your pages by applying classes and styles to your `<html>` and `<body>` tags. | ||
| --- | ||
|
|
||
| When using the `htmlAttrs` or `bodyAttrs` options, you can use the `class` attribute to add classes to the `html` or `body` elements. | ||
| When you need to style your page by adding classes or styles to the `<html>` or `<body>`, Unhead makes it easy by | ||
| providing object and array support for the `class` and `style` attributes. | ||
|
|
||
| ```ts | ||
| ## Static Classes & Styles | ||
|
|
||
| If your classes or styles aren't going to change, you can provide them as a string. | ||
|
|
||
| ::code-block | ||
|
|
||
| ```ts [Html Attrs] | ||
| useHead({ | ||
| htmlAttrs: { | ||
| class: 'my-class', | ||
| class: 'my-class my-other-class', | ||
| style: 'background-color: red; color: white;' | ||
| } | ||
| }) | ||
| ``` | ||
|
|
||
| For improved reactivity and merging support, you can provide the class as an object or an array. | ||
| ```ts [Body Attrs] | ||
| useHead({ | ||
| bodyAttrs: { | ||
| class: 'my-class my-other-class', | ||
| style: 'background-color: red; color: white;' | ||
| } | ||
| }) | ||
| ``` | ||
| :: | ||
|
|
||
| ## Class Object | ||
| Tip: If you're server-side rendering and applying | ||
| it to your default layout, you can use [useServerHead](/api/useServerHead) for a minor performance improvement. | ||
|
|
||
| When providing class as an object, the key should be the class and the value will be whether the class should be added or not. | ||
| ### Array Classes & Styles | ||
|
|
||
| ```ts | ||
| const darkMode = false | ||
| Using manual separators for classes and styles can be a bit cumbersome, so Unhead allows you to use arrays for both. | ||
|
|
||
| ```ts | ||
| useHead({ | ||
| htmlAttrs: { | ||
| class: { | ||
| // will be rendered | ||
| dark: darkMode, | ||
| // will not be rendered | ||
| light: !darkMode, | ||
| } | ||
| class: [ | ||
| 'my-class', | ||
| 'my-other-class' | ||
| ], | ||
| style: [ | ||
| 'background-color: red', | ||
| 'color: white' | ||
| ], | ||
| } | ||
| }) | ||
| ``` | ||
|
|
||
| ## Class Array | ||
| ## Dynamic Classes & Styles | ||
|
|
||
| For improved reactivity and merging support, you can provide the class as an object or an array. | ||
|
|
||
| When providing class as an object, the key should be the class and the value will be whether the class should be added or not. | ||
|
|
||
| ```ts | ||
| const darkMode = ref(false) | ||
|
|
||
| useHead({ | ||
| htmlAttrs: { | ||
| class: ['my-class', 'my-other-class'], | ||
| class: { | ||
| // will be rendered | ||
| dark: () => darkMode, | ||
| // will not be rendered | ||
| light: () => !darkMode, | ||
| }, | ||
| style: { | ||
| // will not render when darkMode is false | ||
| 'background-color': () => darkMode ? 'rgba(0, 0, 0, 0.9)' : false, | ||
| } | ||
| } | ||
| }) | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { describe, it } from 'vitest' | ||
| import { createHead, setHeadInjectionHandler, useHead } from '@unhead/vue' | ||
| import { computed, ref } from 'vue' | ||
| import { renderDOMHead } from '@unhead/dom' | ||
| import { useDom } from '../../fixtures' | ||
|
|
||
| describe('vue dom styles', () => { | ||
| it('empty style', async () => { | ||
| const dom = useDom() | ||
|
|
||
| const head = createHead({ document: dom.window.document }) | ||
| setHeadInjectionHandler(() => head) | ||
|
|
||
| const isNavActive = ref(false) | ||
|
|
||
| useHead({ | ||
| bodyAttrs: { | ||
| style: computed(() => { | ||
| return isNavActive.value ? 'background-color: red' : '' | ||
| }), | ||
| }, | ||
| }) | ||
|
|
||
| await renderDOMHead(head, { document: dom.window.document }) | ||
| expect(dom.window.document.body.getAttribute('style')).toEqual(null) | ||
| isNavActive.value = true | ||
|
|
||
| // wait 100ms | ||
| await new Promise(resolve => setTimeout(resolve, 100)) | ||
| await renderDOMHead(head, { document: dom.window.document }) | ||
| expect(dom.window.document.body.getAttribute('style')).toEqual('background-color: red;') | ||
| }) | ||
| it('array style', async() => { | ||
| const dom = useDom() | ||
|
|
||
| const head = createHead({ document: dom.window.document }) | ||
| setHeadInjectionHandler(() => head) | ||
|
|
||
| useHead({ | ||
| bodyAttrs: { | ||
| style: [ | ||
| 'background-color: red', | ||
| 'color: white', | ||
| ], | ||
| }, | ||
| }) | ||
|
|
||
| await renderDOMHead(head, { document: dom.window.document }) | ||
|
|
||
| expect(dom.window.document.body.getAttribute('style')).toEqual(`background-color: red; color: white;`) | ||
| }) | ||
| it('object style', async () => { | ||
| const dom = useDom() | ||
|
|
||
| const head = createHead({ document: dom.window.document }) | ||
| setHeadInjectionHandler(() => head) | ||
|
|
||
| const isNavActive = ref(false) | ||
|
|
||
| useHead({ | ||
| bodyAttrs: { | ||
| style: { | ||
| 'background-color': () => isNavActive.value ? 'red' : '', | ||
| }, | ||
| }, | ||
| }) | ||
|
|
||
| await renderDOMHead(head, { document: dom.window.document }) | ||
| expect(dom.window.document.body.getAttribute('style')).toEqual(null) | ||
|
|
||
| isNavActive.value = true | ||
|
|
||
| // wait 100ms | ||
| await new Promise(resolve => setTimeout(resolve, 100)) | ||
| await renderDOMHead(head, { document: dom.window.document }) | ||
| expect(dom.window.document.body.getAttribute('style')).toEqual('background-color: red;') | ||
| }) | ||
| }) |