heading-x
/
0.0.11
heading-x 0.0.11
Install from the command line:
Learn more about npm packages
$ npm install @limbo-works/heading-x@0.0.11
Install via package.json:
"@limbo-works/heading-x": "0.0.11"
About this version
Vue components for making headings and heading scopes for inserting the right tags and levels. The general concept is to be able to make components agnostic towards their nesting levels and use the right headings no matter where they are placed.
yarn add @limbo-works/heading-xMake the component globally usable by extending the layer in nuxt.config.js.
export default defineNuxtConfig({
extends: [
'@limbo-works/heading-x',
...
],
...
});Then you can use the HeadingX and HeadingScope components anywhere within that solution:
<!-- As written in Vue -->
<HeadingX>Hello World</HeadingX>
<HeadingScope tag="article">
<p>
Once upon a time, we said hello to the world.
</p>
<HeadingX>But then...</HeadingX>
<HeadingScope level="4">
<p>
...we said hello to the world again.
</p>
<HeadingX level="1">And again...</HeadingX>
<HeadingScope level="-1">
<p>...and again.</p>
</HeadingScope>
</HeadingScope>
</HeadingScope>
<!-- As it may appear in the dom -->
<h1>Hello World</h1>
<article>
<p> Once upon a time, we said hello to the world.</p>
<h2>But then...</h2>
<p> ...we said hello to the world again.</p>
<h1>And again...</h1>
<p>...and again.</p>
</article>The same props are available for both HeadingX and HeadingScope.
| Prop | Description | Default value | Data type |
|---|---|---|---|
| tag | Per default, HeadingX will be rendered with the h-tag fitting its calculated heading level. If a tag is supplied it will be used instead. If it's a h-tag it will be used as-is, but any other tag will be supplied with role="heading" and a fitting aria-level.HeadingScope will be tagless by default and will just render its content directly, but if a tag is supplied it will be used. |
undefined | String |
| level | Setting the level for HeadingX will directly set the heading level, ie. a level of 1 will be h1, 2 h2, and so on. If not defined it will be calculated based on the upper HeadingScopes.Setting a level for HeadingScope will set the heading scope level, ie. setting a level of 1, will make nested HeadingXs render as h2s (ie., the next headings after a h1), and so on. If not defined it will be calculated based on the upper HeadingScopes.For both components you may prefix your number with "+" or "-" to set the value relatively to the calculated level. A value of "+1" on a HeadingX that would normally become a h2 will, for example, become a h3 instead. |
undefined | Number|String |
| html | Due to a bug with Vue3 using v-html on an element that's using <Component :is> doesn't work, so instead we have a html prop for the same functionality. Shouldn't be used at the same time as the text prop or a slot. |
undefined | String |
| text | Due to a bug with Vue3 using v-text on an element that's using <Component :is> doesn't work, so instead we have a text prop for the same functionality. Shouldn't be used at the same time as the html prop or a slot. |
Slot props only goes for HeadingScope.
| Prop | Description |
|---|---|
| headingScopeLevel | Number representing the current scope. |
The same value is also provided by HeadingScope and can be used like: const headingScopeLevel = inject('headingScopeLevel', 1);
