vue-notebook-ui

Vue component for giving html textarea a notebook/notepad feel.

Install

NPM

npm i vue-notebook-ui

Yarn

yarn add vue-notebook-ui

Samples

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