zex-vue-fullpage-next
v1.0.0-rc.1
Published
a javascript library for fullpage powerd by zex
Downloads
6
Maintainers
Readme
zex-vue-fullpage-next
A Vue-next library for fullpage.
Installation
In a browser:
<script src="zex-vue-fullpage-next.js"></script>
Using npm:
$ npm install zex-vue-fullpage-next
Note: add --save
if you are using npm < 5.0.0
How to use:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.section {
width: 100%;
height: 100%;
}
.section .fp-tableCell {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<vue-fullpage :options="options">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
</vue-fullpage>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
<script src="../dist/zex-vue-fullpage-next.js"></script>
<script>
Vue.createApp({
setup() {
return {
options: {
menu: '#menu',
anchors: ['page1', 'page2', 'page3'],
sectionsColor: ['#41b883', '#ff5f45', '#0798ec'],
},
}
},
})
.use(VueFullpage)
.mount('#app')
</script>
</body>
</html>