Next and previous icons as accessible web components.
npm i -S @substrate-system/arrowsThis exposes ESM and common JS via package.json exports field.
import { SubstrateBack, SubstrateNext } from '@substrate-system/arrows'const arrows = require('@substrate-system/arrows')This package exposes minified JS and CSS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.
cp ./node_modules/@substrate-system/arrows/dist/index.min.js ./public/substrate-arrows.min.js
cp ./node_modules/@substrate-system/arrows/dist/style.min.css ./public/substrate-arrows.css<head>
<link rel="stylesheet" href="./substrate-arrows.css">
</head>
<body>
<substrate-back></substrate-back>
<substrate-next></substrate-next>
<!-- ... -->
<script type="module" src="./substrate-arrows.min.js"></script>
</body>import '@substrate-system/arrows/css'Or minified:
import '@substrate-system/arrows/css/min'This is implemented as an HTML web component, which means it can be easily rendered to a string, then made interactive on the client side.
Import the /ssr path in node, and use the .html function:
import {
AnchorBack,
AnchorNext,
SubstrateBack,
SubstrateNext
} from '@substrate-system/arrows/ssr'
const backLink = AnchorBack.html({ href: '/abc' })
const nextButton = SubstrateNext.html({ disabled: false })If the component has been rendered on the server, then you just need to add interactivity on the client side.
Import from the /browser path to include a "light" version of the component,
that will not render anything; it will just attach event listeners.
import { SubstrateBack, SubstrateNext } from '@substrate-system/arrows/browser'For when you want to render on the client, and also "hydrate" client-side.
Import the root path to include a web component that will both render itself, and also attach event listeners. This cannot be used in node, because it depends on browser APIs.
import { SubstrateBack, SubstrateNext } from '@substrate-system/arrows'
import { AnchorBack, AnchorNext } from '@substrate-system/arrows/links'This depends on the visually-hidden CSS class. Import
@substrate-system/a11y for this:
import '@substrate-system/a11y/visually-hidden'Disabled status is handled correctly in JS, but the :disabled attribute in CSS
doesn't work on custom elements. So target the nested button element.
/* application code */
substrate-next, substrate-back {
& button {
cursor: pointer;
&:disabled {
opacity: 0.4;
cursor: initial;
}
}
}
/* anchors */
anchor-next, anchor-back {
&.disabled {
& a {
opacity: 0.4;
}
}
}import { SubstrateBack, SubstrateNext } from '@substrate-system/arrows'
SubstrateBack.define()
SubstrateNext.define()
document.body.innerHTML += `
<substrate-back></substrate-back>
<substrate-next></substrate-next>
`Render an a element, not a button.
Setting .disabled = true, or setting the disabled attribute, on an anchor
button will remove the href attribute from the internal link tag, effectively
disabling it.
import {
AnchorBack,
AnchorNext
} from '@substrate-system/arrows/links'
AnchorBack.define()
AnchorNext.define()
document.body.innerHTML += `
<anchor-back class="test" href="/back"></anchor-back>
<anchor-next class="test" href="/next"></anchor-next>
`