1.0.5 • Published 5 years ago
vue-notebook-ui v1.0.5
vue-notebook-ui 
Vue component for giving html textarea a notebook/notepad feel.
Install
NPM
npm i vue-notebook-uiYarn
yarn add vue-notebook-uiSamples
Texture Paper Layout
Empty Lined Paper
Empty Lined Coloured Paper
Usage
main.js
import Vue from 'vue';
import NotebookUi from 'vue-notebook-ui';
Vue.use(NotebookUi);component
<template>
<div>
<notebook-ui
:customStyle="{color:`orange`, 'text-decoration': 'bold'}"
:content="content"
placeholder="This is it"
type="Texture"
color="red"
></notebook-ui>
</div>
</template>
<script>
export default {
data() {
return {
content: "This is amazing"
}
},
}
</script>Props
| Property | Type | Default | Description |
|---|---|---|---|
| type | String | EmptyLined | The type of the paper component, can be EmptyLined, EmptyLinedColored, Texture |
| content | String | Write note here | The content of notebook |
| placeholder | String | Write note here | The placeholder of the notebook |
| color | String | mediumblue | The font color of the textarea |
| fontStyle | String | "Handlee", cursive | The font-family of the notebook |
| customStyle | Object | - | The style of the notebook, overrides any style used |
Made with ❤️ by Joshua Chinemezu