0.0.8 • Published 12 months ago
@substrate-system/arrows v0.0.8
arrows
Next and previous icons as web components.
Install
npm i -S @substrate-system/arrowsModules
This exposes ESM and common JS via package.json exports field.
ESM
import { SubstrateBack, SubstrateNext } from '@substrate-system/arrows'Common JS
const arrows = require('@substrate-system/arrows')pre-built
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.
copy
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.cssHTML
<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>CSS
Import CSS
import '@substrate-system/arrows/css'Or minified:
import '@substrate-system/arrows/css/min'Use
This depends on the visually-hidden CSS class. Import
@substrate-system/a11y for this:
import '@substrate-system/a11y/visually-hidden'CSS
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;
}
}
}Buttons
import { SubstrateBack, SubstrateNext } from '@substrate-system/arrows'
SubstrateBack.define()
SubstrateNext.define()
document.body.innerHTML += `
<substrate-back></substrate-back>
<substrate-next></substrate-next>
`Links
Render an a element, not a button.
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>
`