text: (window.webpackJsonp=window.webpackJsonp||[]).push([[9],{200:function(e,a,t){"use strict";t.r(a);var n=t(0),s=Object(n.a)({},(function(){var e=this,a=e.$createElement,t=e._self._c||a;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"zerounip-v0-0-1"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zerounip-v0-0-1"}},[e._v("#")]),e._v(" zerounip v0.0.1")]),e._v(" "),t("p",[e._v("My Awesome unip plugin, created with unip")]),e._v(" "),t("ul",[t("li",[t("a",{attrs:{href:""}},[e._v("Documents")])]),e._v(" "),t("li",[t("a",{attrs:{href:""}},[e._v("Example/Demo")])]),e._v(" "),t("li",[t("a",{attrs:{href:""}},[e._v("Playground")])])]),e._v(" "),t("h2",{attrs:{id:"install"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#install"}},[e._v("#")]),e._v(" Install")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("npm install zerounip --save\n\nyarn add zerounip -S\n")])])]),t("h2",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage"}},[e._v("#")]),e._v(" Usage")]),e._v(" "),t("h4",{attrs:{id:"pure-javascript"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pure-javascript"}},[e._v("#")]),e._v(" Pure javascript")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("<div id=\"container\" />\n<script>\n  var container = document.getElementById('container')\n  var options = {\n    sampleConfig: 'Overwrite by plugin user',\n    onSampleEvent: function (args) {\n      console.log('onSampleEvent passed from applicaiton')\n    }\n  }\n  zerounip(container, options)\n<\/script>\n")])])]),t("h4",{attrs:{id:"vue"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vue"}},[e._v("#")]),e._v(" Vue")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v('<template>\n  <div id="app">\n    <img alt="Vue logo" src="./assets/logo.png">\n    <SveltePlugin \n    @onSampleEvent="handleClick" \n    @onSampleEventOver="handleOver" \n    :options="{\n       sampleConfig: \'passed from vue js\'\n    }" />\n  </div>\n</template>\n<script>\nimport SveltePlugin from \'../../../public/zerounip-vue.js\'\nexport default {\n  name: \'app\',\n  components: { SveltePlugin},\n  methods: {\n    handleOver () {\n      console.log(\'Vue handle mouse over vue js\')\n    },\n    handleClick () {\n      alert(\'alert from vue js\')\n    }\n  }\n}\n<\/script>\n')])])]),t("h4",{attrs:{id:"react"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#react"}},[e._v("#")]),e._v(" React")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("import React from 'react';\nimport logo from './logo.svg';\nimport './App.css';\nimport SveltePlugin from './zerounip-react.js'\nfunction App() {\n  const handleClick = () => alert('alert from react')\n  return (\n    <div className=\"App\">\n      <header className=\"App-header\">\n        <img src={logo} className=\"App-logo\" alt=\"logo\" />\n        <SveltePlugin onSvelteclick={handleClick} name=\"(attr passed from react js to svlete)\" />\n      </header>\n    </div>\n  );\n}\n\nexport default App;\n")])])])])}),[],!1,null,null,null);a.default=s.exports}}]);