- Notifications
You must be signed in to change notification settings - Fork6
SurveyJS Builder example with VueJS and Bootstrap-Materialhttp://surveyjs.io/Library
NotificationsYou must be signed in to change notification settings
surveyjs/surveyjs-vue-bootstrap-material
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
[![Build Status][travis-badge]][travis-badge-url]
- git clonehttps://github.com/surveyjs/surveyjs-vue-bootstrap-material.git
- cd surveyjs-vue-bootstrap-material
- npm i
- npm run dev
- openhttp://localhost:8080/ in your web browser
For detailed explanation on how VueJS things work, checkout theguide anddocs for vue-loader.
<!DOCTYPE html><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="icon"href="<%= BASE_URL %>favicon.ico"><title>surveyjs-vue-bootstrap-material</title><scriptsrc="https://unpkg.com/jquery"></script><linkrel="stylesheet"href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"><scriptsrc="https://unpkg.com/bootstrap-material-design@0.5.10/dist/js/material.js"></script><scriptsrc="https://unpkg.com/bootstrap-material-design@0.5.10/dist/js/ripples.js"></script><linkrel="stylesheet"href="https://unpkg.com/bootstrap-material-design@0.5.10/dist/css/bootstrap-material-design.css"><linkrel="stylesheet"href="https://unpkg.com/bootstrap-material-design@0.5.10/dist/css/ripples.css"></head><body><noscript><strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><divid="app"></div><!-- built files will be auto injected --></body><script>window.$.material.init();</script></html>
<template><divid="app"><imgsrc="./assets/logo.png"> <!-- If you want to show survey, uncomment the line below --> <!-- <survey :survey="survey"></survey> --> <!-- If you want to show survey editor, uncomment the line below --> <!-- <survey-editor></survey-editor> --><survey-editor></survey-editor></div></template><script>//In your VueJS App.vue or yourComponent.vue file add these lines to importimport SurveyEditor from './components/SurveyEditor'import * as SurveyVue from 'survey-vue'import 'bootstrap/dist/css/bootstrap.css';var Survey = SurveyVue.SurveySurvey.cssType = "bootstrap";//If you want to add custom widgets package//Add these importsimport * as widgets from "surveyjs-widgets";import "inputmask/dist/inputmask/phone-codes/phone.js";//And initialize widgets you are want ti usewidgets.icheck(SurveyVue);widgets.select2(SurveyVue);widgets.inputmask(SurveyVue);widgets.jquerybarrating(SurveyVue);widgets.jqueryuidatepicker(SurveyVue);widgets.nouislider(SurveyVue);widgets.select2tagbox(SurveyVue);widgets.signaturepad(SurveyVue);widgets.sortablejs(SurveyVue);widgets.ckeditor(SurveyVue);widgets.autocomplete(SurveyVue);widgets.bootstrapslider(SurveyVue);export default{name:'app',components:{ Survey, SurveyEditor},data(){//Define Survey JSON//Here is the simplest Survey with one text questionvar json={elements:[{type:"text",name:"customerName",title:"What is your name?",isRequired:true}]};//Create the model and pass it into VueSJ Survey componentvarmodel=newSurveyVue.Model(json)//You may set model properties// model.mode="display"return{survey:model}}}</script>
About
SurveyJS Builder example with VueJS and Bootstrap-Materialhttp://surveyjs.io/Library
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Packages0
No packages published
Contributors3
Uh oh!
There was an error while loading.Please reload this page.