vue-typical
v2.1.0
Published
Vue Animated typing in ~400 bytes 🐡 of JavaScript.
Downloads
945
Maintainers
Readme
English | 简体中文
📦 Installation
Install with yarn
yarn add vue-typical
Or you can
npm install vue-typical
Or inject the script at your page by jsdelivr CDN
<script src="https://cdn.jsdelivr.net/npm/vue-typical@latest/dist/vue-typical.umd.js"></script>
🚀 Usage
1. Component
You can import it as a custom component.
<template>
<v-typical
class="blink"
:steps="['Hello', 1000, 'Hello World !', 500, 'Hello World ! 👋', 1000]"
:loop="Infinity"
:wrapper="'h2'"
></v-typical>
</template>
<script lang="ts">
import VTypical from 'vue-typical';
export default {
components: {
VTypical,
},
};
</script>
2. Plugin API
If you want to configure default options, you can register this plugin through the use API of Vue.js.
// main.js or index.js
import VTypical from 'vue-typical';
Vue.use(VTypical, {
/* options */
});
If you use the plugin API, the VTypical
component will be registered as a global component just like when including it with the script
tag, but you won't need to re-register it through the components
property in your own components.
3. Composition API
You can also create typical animation by the composition API useTypical
.
const ref = useTypical(options);
Coming Soon ...
📑 Properties
| Prop | Required | Type | Eg. |
| --------- | -------- | ----------------------------------- | -------------------------------------- |
| steps
| True | Array<String | Number | Function> | ['Hello', 1000, () => alert('Word')]
|
| loop
| False | Number | 1
or 'Infinity'
|
| wrapper
| False | String | 'div'
|
✨ Style
Add the blink cursor effect with blink
classname.
.blink::after {
content: '|';
animation: blink 1s infinite step-start;
}
@keyframes blink {
50% {
opacity: 0;
}
}
🔢 Coming Soon
- [ ] The demo of composition API in Vue 3.0
🔨 Contribute
Install dependencies,
$ npm i
Start the dev server,
$ npm start
Build documentation,
$ npm run docs:build
Build library via father-build
,
$ npm run build
❤️ Contributors
Thanks goes to these people:
Please Feel free to enjoy and participate in open source!
⭐ Stargazers
Thanks for your star!
🔖 License
This library is based on @camwiegert/typical work and it currently is just a wrapper for vue.
Inspired by @catalinmiron/react-typical.