0.1.5 • Published 3 years ago
notify-zh v0.1.5
Notify zh
This project was bootstrapped with TSDX.
Es una pequeña libreria para el FrontEnd. Esta libreria tiene un peso de 1.4 Kb.
Puede ser usada en paginas estaticas como en frameworks (React, Vue js, angular)
Instalación
yarn add notify-zh or npm install notify-zh
Uso
React js
import React, {UseEffect} from 'React'
import Notify from 'notify-zh'
const MyComponent = () => {
useEffect(() => {
Notify.success({
message: 'Success',
option: {
time: 5000
}
})
}, [])
return (
<div>
<button
onClick={() =>
Notify.success({
message: 'Success',
option: {
time: 5000,
icon: {
el: `<span style="background: #ddd; padding: 9px; border-radius: 50%">
<i>!</i>
</span>`
}
}
})
}
>
Success
</button>
</div>
)
}
Vue js
import Vue from "vue";
import Notify from "notify-zh";
import App from "./App.vue";
Vue.config.productionTip = false;
const MyPlugin = {
install() {
Vue.notify = Notify;
Vue.prototype.$notify = Notify;
}
};
Vue.use(MyPlugin);
new Vue({
render: h => h(App)
}).$mount("#app");
### component
<template>
<div>
<button @click="runError">Error</button>
</div>
</template>
<script>
export default {
name: "Component1",
methods: {
runError() {
this.$notify.error({
message: 'Error',
option: {
time: 5000,
icon: {
el: `<span style="background: #ddd; padding: 9px; border-radius: 50%">
<i>!</i>
</span>`
}
}
});
}
}
}
</script>
config
Notify.config({
backgrounds: {
warning: 'yellow',
error: 'blue',
success: 'blue'
},
width: '100%',
maxWidth: '600px'
})
0.1.5
3 years ago
0.1.4
3 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1-beta
4 years ago
0.1.0-beta
4 years ago
0.1.0
4 years ago