5be77359d4
move AOR to primer |
||
---|---|---|
.github/workflows | ||
examples | ||
src | ||
test | ||
.eslintignore | ||
.eslintrc.json | ||
.gitattributes | ||
.gitignore | ||
.travis.yml | ||
CODEOWNERS | ||
CODE_OF_CONDUCT.md | ||
CONTRIBUTING.md | ||
LICENSE | ||
README.md | ||
SECURITY.md | ||
karma.config.cjs | ||
package-lock.json | ||
package.json | ||
tsconfig.json |
README.md
<typing-effect> element
A custom element that shows text as if it were being typed
Installation
$ npm install @github/typing-effect-element
Usage
import '@github/typing-effect-element'
<typing-effect data-lines='["Welcome to GitHub!", "Let’s begin the adventure"]'>
<span data-target="typing-effect.content"></span>
<span data-target="typing-effect.cursor">|</span>
</typing-effect>
Accessibility
This component detects whether prefers-reduced-motion
is set on the window:
window.matchMedia('(prefers-reduced-motion)').matches === true
If this evaluates to true, any content lines provided will be appended immediately rather than being typed out with a delay.
Browser support
Browsers without native custom element support require a polyfill.
- Chrome
- Firefox
- Safari
- Microsoft Edge
Development
npm install
npm test
License
Distributed under the MIT license. See LICENSE for details.