Init project
This commit is contained in:
alirezakarari
@@ -0,0 +1,53 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: i18n.vue
|
||||
Description: I18n demo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<div id="page-i18n">
|
||||
<vx-card title="Change Locale">
|
||||
<span>Your Current Locale: <strong>{{ this.$i18n.locale }}</strong></span>
|
||||
<div class="flex flex-col">
|
||||
<vs-radio v-model="locale" vs-value="en" class="mt-3">
|
||||
<span class="mr-2">English</span>
|
||||
</vs-radio>
|
||||
|
||||
<vs-radio v-model="locale" vs-value="fr" class="mt-3">
|
||||
<span class="mr-2">French</span>
|
||||
</vs-radio>
|
||||
|
||||
<vs-radio v-model="locale" vs-value="de" class="mt-3">
|
||||
<span class="mr-2">German</span>
|
||||
</vs-radio>
|
||||
|
||||
<vs-radio v-model="locale" vs-value="pt" class="mt-3">
|
||||
<span class="mr-2">Portuguese</span>
|
||||
</vs-radio>
|
||||
</div>
|
||||
|
||||
<vx-card :title="$t('demoTitle')" class="mt-base" no-shadow card-border>
|
||||
<p>{{ $t("demoText") }}</p>
|
||||
</vx-card>
|
||||
</vx-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data () {
|
||||
return {
|
||||
locale: this.$i18n.locale
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
locale (val) {
|
||||
this.$i18n.locale = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div id="access-conttrol-editor">
|
||||
<vx-card>
|
||||
|
||||
<p>Your current role is <strong>{{ $acl.get[0] }}</strong>.</p>
|
||||
<div class="demo-alignment mb-base">
|
||||
<vs-radio v-model="userRole" vs-value="editor">Editor</vs-radio>
|
||||
<vs-radio v-model="userRole" vs-value="admin">Admin</vs-radio>
|
||||
</div>
|
||||
|
||||
<vx-card title="Buttons" no-shadow card-border code-toggler>
|
||||
<vs-button v-show="$acl.check('editor')" class="mr-4 mb-2">Editor And Admin</vs-button>
|
||||
<vs-button v-show="$acl.check('admin')">Only Admin</vs-button>
|
||||
<template slot="codeContainer">
|
||||
<vs-button v-show="$acl.check('editor')" class="mr-4">Editor And Admin</vs-button>
|
||||
<vs-button v-show="$acl.check('admin')">Only Admin</vs-button>
|
||||
</template>
|
||||
</vx-card>
|
||||
|
||||
<vx-card title="Collapse" class="mt-base" no-shadow card-border code-toggler>
|
||||
|
||||
<div slot="no-body">
|
||||
<vs-collapse>
|
||||
|
||||
<vs-collapse-item>
|
||||
|
||||
<div slot="header">Article 1</div>
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus eros tortor, non fringilla lectus cursus et. Fusce vel nisi ante. Aliquam sit amet lectus pharetra, luctus mi sed, aliquet felis. Mauris a tortor viverra, ornare tellus in, consectetur leo.
|
||||
<br><br>
|
||||
Etiam nec nunc nec nisl luctus tincidunt efficitur vitae elit. Vestibulum iaculis nibh commodo neque ultrices lobortis. Cras magna massa, pretium vitae mattis varius, pharetra nec massa. Aliquam ac ex enim. Quisque consequat dui libero, vel blandit lorem porttitor sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sed lobortis nisl, quis eleifend metus.
|
||||
</vs-collapse-item>
|
||||
|
||||
<vs-collapse-item>
|
||||
|
||||
<div slot="header">Article 2</div>
|
||||
|
||||
Nunc auctor et leo vitae suscipit. Nullam aliquet purus scelerisque enim hendrerit tristique. Maecenas tincidunt dui arcu, a aliquet nisl venenatis vitae. Praesent mauris ligula, porta at maximus ac, rutrum vitae sapien. Donec a sapien id erat dapibus dignissim sodales in est. Donec gravida dapibus sapien at sollicitudin. Maecenas iaculis quam ex,
|
||||
<br><br>
|
||||
eu aliquam erat sagittis eget. Suspendisse mollis felis nec ipsum vehicula, at posuere libero viverra. Nam hendrerit dapibus eleifend. Aliquam elit nulla, tincidunt pellentesque enim mollis, consectetur placerat enim. Integer condimentum tristique ante et ullamcorper. Mauris placerat pretium ex. Nam aliquam sed tortor sit amet
|
||||
<br><br>
|
||||
efficitur. Mauris quis faucibus nulla. Pellentesque egestas non ipsum vel maximus.
|
||||
</vs-collapse-item>
|
||||
|
||||
<vs-collapse-item v-show="$acl.check('admin')">
|
||||
|
||||
<div slot="header">Article 3 - Only Admin</div>
|
||||
|
||||
Suspendisse aliquet condimentum diam, sed aliquam nisl dapibus et. Aliquam euismod ullamcorper dolor eu
|
||||
</vs-collapse-item>
|
||||
|
||||
<vs-collapse-item>
|
||||
|
||||
<div slot="header">Article 4</div>
|
||||
|
||||
Suspendisse aliquet condimentum diam, sed aliquam nisl dapibus et. Aliquam euismod ullamcorper dolor eu imperdiet. Nullam eget odio at magna gravida suscipit sed vestibulum odio. Maecenas porta elit vel lectus molestie, eget aliquam enim feugiat. Vivamus nec faucibus nisl. Nunc venenatis tempus finibus.
|
||||
</vs-collapse-item>
|
||||
</vs-collapse>
|
||||
<template slot="codeContainer">
|
||||
<vs-collapse>
|
||||
<vs-collapse-item>
|
||||
<div slot="header">
|
||||
Article 1
|
||||
</div>
|
||||
Lorem....metus.
|
||||
</vs-collapse-item>
|
||||
<vs-collapse-item>
|
||||
<div slot="header">
|
||||
Article 2
|
||||
</div>
|
||||
Nunc....maximus.
|
||||
</vs-collapse-item>
|
||||
<vs-collapse-item v-show="$acl.check('admin')">
|
||||
<div slot="header">
|
||||
Article 3 - Only Admin
|
||||
</div>
|
||||
Suspendisse....eu
|
||||
</vs-collapse-item>
|
||||
<vs-collapse-item>
|
||||
<div slot="header">
|
||||
Article 4
|
||||
</div>
|
||||
Suspendisse....finibus.
|
||||
</vs-collapse-item>
|
||||
</vs-collapse>
|
||||
</template>
|
||||
</div>
|
||||
</vx-card>
|
||||
|
||||
<vx-card title="Route Protection" no-shadow card-border code-toggler class="mt-base">
|
||||
<p>You can add <strong>route protection</strong> using vue-acl. Only admin can visit eCommerce Dashboard.</p>
|
||||
<vs-button to="/dashboard/ecommerce" class="mt-4" :color="$acl.check('admin') ? 'primary' : 'danger'">visit</vs-button>
|
||||
</vx-card>
|
||||
</vx-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data () {
|
||||
return {
|
||||
userRole: this.$acl.get[0]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
userRole (val) {
|
||||
this.$store.dispatch('updateUserRole', {aclChangeRole: this.$acl.change, userRole: val})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,338 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Autocomplete.vue
|
||||
Description: Autocomplete demo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<div id="page-autocomplete-demo">
|
||||
|
||||
<!-- BASIC AUTOCOMPLETE -->
|
||||
<vx-card title="Basic Autocomplete" code-toggler>
|
||||
<vue-simple-suggest
|
||||
v-model="chosen"
|
||||
:list="simpleSuggestionList"
|
||||
:filter-by-query="true">
|
||||
</vue-simple-suggest>
|
||||
|
||||
<p class="mt-4">Chosen element: {{ chosen }}</p>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<vue-simple-suggest
|
||||
v-model="chosen"
|
||||
:list="simpleSuggestionList"
|
||||
:filter-by-query="true">
|
||||
<!-- Filter by input text to only show the matching results -->
|
||||
</vue-simple-suggest>
|
||||
|
||||
<p class="mt-4">Chosen element: {{ chosen }}</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosen: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
simpleSuggestionList() {
|
||||
return [
|
||||
'Vue.js',
|
||||
'React.js',
|
||||
'Angular.js'
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/scss/vuexy/extraComponents/autocomplete.scss";
|
||||
</style>
|
||||
</template>
|
||||
</vx-card>
|
||||
<!-- /BASIC AUTOCOMPLETE -->
|
||||
|
||||
|
||||
<!-- AJAX BASED AUTOCOMPLETE -->
|
||||
<vx-card title="Ajax Based Autocomplete" code-toggler>
|
||||
<vue-simple-suggest pattern="\w+"
|
||||
v-model="model"
|
||||
:list="getList"
|
||||
:max-suggestions="10"
|
||||
:min-length="3"
|
||||
:debounce="200"
|
||||
:filter-by-query="false"
|
||||
:prevent-submit="true"
|
||||
:controls="{
|
||||
selectionUp: [38, 33],
|
||||
selectionDown: [40, 34],
|
||||
select: [13, 36],
|
||||
hideList: [27, 35]
|
||||
}"
|
||||
:mode="mode"
|
||||
:nullable-select="true"
|
||||
ref="suggestComponent"
|
||||
placeholder="Search information..."
|
||||
value-attribute="id"
|
||||
display-attribute="text"
|
||||
@select="onSuggestSelect">
|
||||
|
||||
<div class="g">
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<template slot="misc-item-above" slot-scope="{ suggestions, query }">
|
||||
<div class="misc-item">
|
||||
<span>You're searching for '{{ query }}'.</span>
|
||||
</div>
|
||||
|
||||
<template v-if="suggestions.length > 0">
|
||||
<div class="misc-item">
|
||||
<span>{{ suggestions.length }} suggestions are shown...</span>
|
||||
</div>
|
||||
<hr>
|
||||
</template>
|
||||
|
||||
<div class="misc-item" v-else-if="!loading">
|
||||
<span>No results</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div slot="suggestion-item" slot-scope="scope" :title="scope.suggestion.description">
|
||||
<div class="text">
|
||||
<span v-html="boldenSuggestion(scope)"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="misc-item" slot="misc-item-below" slot-scope="{ suggestions }" v-if="loading">
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
</vue-simple-suggest>
|
||||
|
||||
<p class="mt-3">Selected element ({{ typeof selected }}): <pre class="selected hljs"><span v-html="selected"></span></pre></p>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<vue-simple-suggest
|
||||
pattern="\w+"
|
||||
v-model="model"
|
||||
:list="getList"
|
||||
:max-suggestions="10"
|
||||
:min-length="3"
|
||||
:debounce="200"
|
||||
:filter-by-query="false"
|
||||
:prevent-submit="true"
|
||||
:controls="{
|
||||
selectionUp: [38, 33],
|
||||
selectionDown: [40, 34],
|
||||
select: [13, 36],
|
||||
hideList: [27, 35]
|
||||
}"
|
||||
:mode="mode"
|
||||
:nullable-select="true"
|
||||
ref="suggestComponent"
|
||||
placeholder="Search information..."
|
||||
value-attribute="id"
|
||||
display-attribute="text"
|
||||
@select="onSuggestSelect">
|
||||
|
||||
<div class="g">
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<template slot="misc-item-above" slot-scope="{ suggestions, query }">
|
||||
<div class="misc-item">
|
||||
<span>You're searching for '{{ "\{\{ query \}\}" }}'.</span>
|
||||
</div>
|
||||
|
||||
<template v-if="suggestions.length > 0">
|
||||
<div class="misc-item">
|
||||
<span>{{ "\{\{ suggestions.length \}\}" }} suggestions are shown...</span>
|
||||
</div>
|
||||
<hr>
|
||||
</template>
|
||||
|
||||
<div class="misc-item" v-else-if="!loading">
|
||||
<span>No results</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div slot="suggestion-item" slot-scope="scope" :title="scope.suggestion.description">
|
||||
<div class="text">
|
||||
<span v-html="boldenSuggestion(scope)"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="misc-item" slot="misc-item-below" slot-scope="{ suggestions }" v-if="loading">
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
</vue-simple-suggest>
|
||||
|
||||
<p class="mt-3">Selected element ({{ "\{\{ typeof selected \}\}" }}): <pre class="selected hljs"><span v-html="selected"></span></pre></p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
model: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList (inputValue) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let url = `https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&namespace=*&search=${inputValue}&limit=10&namespace=0&format=json`
|
||||
fetch(url).then(response => {
|
||||
if (!response.ok) {
|
||||
reject()
|
||||
}
|
||||
response.json().then(json => {
|
||||
json.shift();
|
||||
let result = []
|
||||
const fields = ['text', 'description', 'link']
|
||||
json.forEach((part, i) => {
|
||||
part.forEach((el, j) => {
|
||||
if (!result[j]) {
|
||||
result.push({
|
||||
id: j+1
|
||||
})
|
||||
}
|
||||
result[j][fields[i]] = el
|
||||
})
|
||||
})
|
||||
resolve(result)
|
||||
// resolve([...(json.items || [])])
|
||||
}).catch(e => {
|
||||
reject(e)
|
||||
})
|
||||
}).catch(error => {
|
||||
this.loading = false
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
onSuggestSelect (suggest) {
|
||||
this.selected = suggest
|
||||
},
|
||||
boldenSuggestion(scope) {
|
||||
if (!scope) return scope;
|
||||
const { suggestion, query } = scope;
|
||||
let result = this.$refs.suggestComponent.displayProperty(suggestion);
|
||||
if (!query) return result;
|
||||
const texts = query.split(/[\s-_/\\|.]/gm).filter(t => !!t) || [''];
|
||||
return result.replace(new RegExp('(.*?)(' + texts.join('|') + ')(.*?)','gi'), '$1<b>$2</b>$3');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
<!-- /AJAX BASED AUTOCOMPLETE -->
|
||||
|
||||
|
||||
<!-- MODE -->
|
||||
<vx-card title="Mode">
|
||||
<p class="mb-3">Determines the event, that triggers <code>v-model</code>. Can be one of <code>'input'</code> (default) or <code>'select'</code>.</p>
|
||||
|
||||
<p class="mb-3">For example, if <code>'input'</code> is chosen - then v-model will update the value each time an <code>input</code> event is fired, setting the input's string.</p>
|
||||
|
||||
<p class="mb-3">Same is for <code>'select'</code> - v-model changes only when something is selected from the list, setting the selected value (string, object or whatever) to its argument.</p>
|
||||
|
||||
<p class="mb-3">A proper use-case for it being when one wants to use the component only for selection binding and custom input for text binding:</p>
|
||||
|
||||
<prism language="markup" class="rounded-lg">
|
||||
<vue-simple-suggest v-model="selected" mode="select">
|
||||
<input v-model="text">
|
||||
</vue-simple-suggest>
|
||||
</prism>
|
||||
</vx-card>
|
||||
<!-- /MODE -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueSimpleSuggest from 'vue-simple-suggest'
|
||||
import 'vue-simple-suggest/dist/styles.css'
|
||||
|
||||
import Prism from 'vue-prism-component'
|
||||
|
||||
export default {
|
||||
name: 'Autocomplete',
|
||||
data () {
|
||||
return {
|
||||
chosen: '',
|
||||
selected: null,
|
||||
model: null,
|
||||
mode: 'input',
|
||||
loading: false,
|
||||
log: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
simpleSuggestionList () {
|
||||
return [
|
||||
'Vue.js',
|
||||
'React.js',
|
||||
'Angular.js'
|
||||
]
|
||||
},
|
||||
onSuggestSelect (suggest) {
|
||||
this.selected = suggest
|
||||
},
|
||||
boldenSuggestion (scope) {
|
||||
if (!scope) return scope
|
||||
const { suggestion, query } = scope
|
||||
const result = this.$refs.suggestComponent.displayProperty(suggestion)
|
||||
if (!query) return result
|
||||
const texts = query.split(/[\s-_/\\|.]/gm).filter(t => !!t) || ['']
|
||||
return result.replace(new RegExp(`(.*?)(${ texts.join('|') })(.*?)`, 'gi'), '$1<b>$2</b>$3')
|
||||
},
|
||||
getList (inputValue) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const url = `https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&namespace=*&search=${inputValue}&limit=10&namespace=0&format=json`
|
||||
fetch(url).then(response => {
|
||||
if (!response.ok) {
|
||||
reject()
|
||||
}
|
||||
response.json().then(json => {
|
||||
json.shift()
|
||||
const result = []
|
||||
const fields = ['text', 'description', 'link']
|
||||
json.forEach((part, i) => {
|
||||
part.forEach((el, j) => {
|
||||
if (!result[j]) {
|
||||
result.push({
|
||||
id: j + 1
|
||||
})
|
||||
}
|
||||
result[j][fields[i]] = el
|
||||
})
|
||||
})
|
||||
resolve(result)
|
||||
}).catch(e => {
|
||||
reject(e)
|
||||
})
|
||||
}).catch(error => {
|
||||
this.loading = false
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VueSimpleSuggest,
|
||||
Prism
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/scss/vuexy/extraComponents/autocomplete.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Carousel.vue
|
||||
Description: Carousel demo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<div id="extra-component-vue-awesome-swiper-demo">
|
||||
<carousel-default />
|
||||
<carousel-navigation />
|
||||
<carousel-pagination />
|
||||
<carousel-progress />
|
||||
<carousel-multiple-slides-per-view />
|
||||
<carousel-multi-row-slides-layout />
|
||||
<carousel-effect-fade />
|
||||
<carousel-3d-effect />
|
||||
<carousel-3d-coverflow-effect />
|
||||
<carousel-autoplay />
|
||||
<carousel-gallery />
|
||||
<carousel-parallax />
|
||||
<carousel-lazy-loading />
|
||||
<carousel-responsive-breakpoints />
|
||||
<carousel-virtual-slides />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CarouselDefault from './CarouselDefault.vue'
|
||||
import CarouselNavigation from './CarouselNavigation.vue'
|
||||
import CarouselPagination from './CarouselPagination.vue'
|
||||
import CarouselProgress from './CarouselProgress.vue'
|
||||
import CarouselMultipleSlidesPerView from './CarouselMultipleSlidesPerView.vue'
|
||||
import CarouselMultiRowSlidesLayout from './CarouselMultiRowSlidesLayout.vue'
|
||||
import CarouselEffectFade from './CarouselEffectFade.vue'
|
||||
import Carousel3dEffect from './Carousel3dEffect.vue'
|
||||
import Carousel3dCoverflowEffect from './Carousel3dCoverflowEffect.vue'
|
||||
import CarouselAutoplay from './CarouselAutoplay.vue'
|
||||
import CarouselGallery from './CarouselGallery.vue'
|
||||
import CarouselParallax from './CarouselParallax.vue'
|
||||
import CarouselLazyLoading from './CarouselLazyLoading.vue'
|
||||
import CarouselResponsiveBreakpoints from './CarouselResponsiveBreakpoints.vue'
|
||||
import CarouselVirtualSlides from './CarouselVirtualSlides.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CarouselDefault,
|
||||
CarouselNavigation,
|
||||
CarouselPagination,
|
||||
CarouselProgress,
|
||||
CarouselMultipleSlidesPerView,
|
||||
CarouselMultiRowSlidesLayout,
|
||||
CarouselEffectFade,
|
||||
Carousel3dEffect,
|
||||
Carousel3dCoverflowEffect,
|
||||
CarouselAutoplay,
|
||||
CarouselGallery,
|
||||
CarouselParallax,
|
||||
CarouselLazyLoading,
|
||||
CarouselResponsiveBreakpoints,
|
||||
CarouselVirtualSlides
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Carousel3dCoverflowEffect.vue
|
||||
Description: Carousel with 3D Coverflow effect
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="3d Effect Coverflow Effect" class="carousel-example" code-toggler>
|
||||
<div class="swiper-inner">
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-39.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-35.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-37.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-38.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-33.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-40.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-32.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div class="carousel-example">
|
||||
<div class="swiper-inner">
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-39.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-35.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-37.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-38.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-33.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-40.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-32.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
effect: 'cube',
|
||||
grabCursor: true,
|
||||
cubeEffect: {
|
||||
shadow: true,
|
||||
slideShadows: true,
|
||||
shadowOffset: 20,
|
||||
shadowScale: 0.94
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.swiper-inner {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 330px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
width: 300px !important;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -150px;
|
||||
margin-top: -150px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
swiperOption: {
|
||||
effect: 'coverflow',
|
||||
grabCursor: true,
|
||||
centeredSlides: true,
|
||||
slidesPerView: 'auto',
|
||||
coverflowEffect: {
|
||||
rotate: 50,
|
||||
stretch: 0,
|
||||
depth: 100,
|
||||
modifier: 1,
|
||||
slideShadows: true
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.swiper-inner {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.swiper-slide {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,180 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Carousel3dEffect.vue
|
||||
Description: Carousel with 3D effect
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="3d Effect" class="carousel-example" code-toggler>
|
||||
<div class="swiper-inner">
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-21.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-23.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-27.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-29.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-30.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-37.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-39.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div class="carousel-example">
|
||||
<div class="swiper-inner">
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-21.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-23.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-27.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-29.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-30.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-37.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-39.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
effect: 'cube',
|
||||
grabCursor: true,
|
||||
cubeEffect: {
|
||||
shadow: true,
|
||||
slideShadows: true,
|
||||
shadowOffset: 20,
|
||||
shadowScale: 0.94
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.swiper-inner {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 330px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
width: 300px !important;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -150px;
|
||||
margin-top: -150px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
swiperOption: {
|
||||
effect: 'cube',
|
||||
grabCursor: true,
|
||||
cubeEffect: {
|
||||
shadow: true,
|
||||
slideShadows: true,
|
||||
shadowOffset: 20,
|
||||
shadowScale: 0.94
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.swiper-inner {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 330px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
width: 300px !important;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -150px;
|
||||
margin-top: -150px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: CarouselAutplay.vue
|
||||
Description: Carousel with Autplay
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Autoplay" class="carousel-example" code-toggler>
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-16.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-13.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-4.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-2.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
|
||||
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
|
||||
</swiper>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div class="carousel-example">
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-16.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-13.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-4.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-2.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
<div class="swiper-button-prev" slot="button-prev"></div>
|
||||
<div class="swiper-button-next" slot="button-next"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
spaceBetween: 30,
|
||||
centeredSlides: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
swiperOption: {
|
||||
spaceBetween: 30,
|
||||
centeredSlides: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: CarouselDefault.vue
|
||||
Description: Default Carousel demo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Default" class="carousel-example" code-toggler>
|
||||
<!-- swiper -->
|
||||
<swiper :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-18.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-15.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-10.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-16.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div class="carousel-example">
|
||||
<swiper :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-18.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-15.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-10.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-16.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,110 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: CarouselEffectFade.vue
|
||||
Description: Carousel with fade effect
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Fade Effect" class="carousel-example" code-toggler>
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-16.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-10.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-15.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-18.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
|
||||
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
|
||||
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
|
||||
</swiper>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-18.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-15.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-10.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-16.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
|
||||
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
|
||||
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
|
||||
</swiper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
spaceBetween: 30,
|
||||
effect: 'fade',
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
swiperOption: {
|
||||
spaceBetween: 30,
|
||||
effect: 'fade',
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,214 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: CarouselGallery.vue
|
||||
Description: Gallery Carousel demo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Gallery" class="carousel-example-gallery" code-toggler>
|
||||
<div>
|
||||
<!-- swiper1 -->
|
||||
<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl + ' gallery'">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-10.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-16.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-15.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-13.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
|
||||
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
|
||||
</swiper>
|
||||
|
||||
<!-- swiper2 Thumbs -->
|
||||
<swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs" :dir="$vs.rtl ? 'rtl gallery' : 'ltr gallery'" :key="$vs.rtl + ' thumbs'">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-10.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-16.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-15.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-13.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div style="height: 500px">
|
||||
|
||||
<!-- swiper1 -->
|
||||
<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-10.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-16.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-15.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-13.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
|
||||
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
|
||||
</swiper>
|
||||
|
||||
<!-- swiper2 Thumbs -->
|
||||
<swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-10.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-16.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-15.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-13.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperOptionTop: {
|
||||
spaceBetween: 10,
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
},
|
||||
swiperOptionThumbs: {
|
||||
spaceBetween: 10,
|
||||
centeredSlides: true,
|
||||
slidesPerView: 'auto',
|
||||
touchRatio: 0.2,
|
||||
slideToClickedSlide: true
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const swiperTop = this.$refs.swiperTop.swiper
|
||||
const swiperThumbs = this.$refs.swiperThumbs.swiper
|
||||
swiperTop.controller.control = swiperThumbs
|
||||
swiperThumbs.controller.control = swiperTop
|
||||
})
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper-container {
|
||||
background-color: #000;
|
||||
}
|
||||
.gallery-top {
|
||||
height: 80%!important;
|
||||
width: 100%;
|
||||
}
|
||||
.gallery-thumbs {
|
||||
height: 20%!important;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.gallery-thumbs .swiper-slide {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.gallery-thumbs .swiper-slide-active {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
swiperOptionTop: {
|
||||
spaceBetween: 10,
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
},
|
||||
swiperOptionThumbs: {
|
||||
spaceBetween: 10,
|
||||
centeredSlides: true,
|
||||
slidesPerView: 'auto',
|
||||
touchRatio: 0.2,
|
||||
slideToClickedSlide: true
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
const swiperTop = this.$refs.swiperTop.swiper
|
||||
const swiperThumbs = this.$refs.swiperThumbs.swiper
|
||||
swiperTop.controller.control = swiperThumbs
|
||||
swiperThumbs.controller.control = swiperTop
|
||||
})
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper-container {
|
||||
background-color: #000;
|
||||
}
|
||||
.gallery-top {
|
||||
height: 80%!important;
|
||||
width: 100%;
|
||||
}
|
||||
.gallery-thumbs {
|
||||
height: 20%!important;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.gallery-thumbs .swiper-slide {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.gallery-thumbs .swiper-slide-active {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,157 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: CarouselLazyLoading.vue
|
||||
Description: Carousel with lazy loading
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Lazy Loading" class="carousel-example" code-toggler>
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
|
||||
<swiper-slide v-for="slide in slides" :key="slide.img">
|
||||
<img :data-src="slide.img" class="swiper-lazy">
|
||||
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
|
||||
</swiper-slide>
|
||||
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
|
||||
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
|
||||
</swiper>
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
|
||||
<swiper-slide v-for="slide in slides" :key="slide.img">
|
||||
<img :data-src="slide.img" class="swiper-lazy">
|
||||
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
|
||||
</swiper-slide>
|
||||
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
|
||||
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
|
||||
</swiper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
// Enable lazy loading
|
||||
lazy: true,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
},
|
||||
slides: [
|
||||
{ img: require('@/assets/images/pages/carousel/banner-13.jpg') },
|
||||
{ img: require('@/assets/images/pages/carousel/banner-7.jpg') },
|
||||
{ img: require('@/assets/images/pages/carousel/banner-10.jpg') },
|
||||
{ img: require('@/assets/images/pages/carousel/banner-16.jpg') },
|
||||
{ img: require('@/assets/images/pages/carousel/banner-20.jpg') },
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #444 !important;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
/*max-height: 100%;*/
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-moz-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
swiperOption: {
|
||||
// Enable lazy loading
|
||||
lazy: true,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
},
|
||||
slides: [
|
||||
{ img: require('@/assets/images/pages/carousel/banner-13.jpg') },
|
||||
{ img: require('@/assets/images/pages/carousel/banner-7.jpg') },
|
||||
{ img: require('@/assets/images/pages/carousel/banner-10.jpg') },
|
||||
{ img: require('@/assets/images/pages/carousel/banner-16.jpg') },
|
||||
{ img: require('@/assets/images/pages/carousel/banner-20.jpg') }
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #444 !important;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
/*max-height: 100%;*/
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-moz-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,185 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: CarouselMultiRowSlidesLayout.vue
|
||||
Description: Carousel with multiple row layout
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Multi Row Slides Layout" class="carousel-example" code-toggler>
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-31.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-32.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-33.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-34.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-35.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-23.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-37.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-38.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-39.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-40.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
</swiper>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div class="carousel-example">
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-31.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-32.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-33.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-34.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-35.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-23.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-37.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-38.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-39.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-40.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
slidesPerView: 3,
|
||||
slidesPerColumn: 2,
|
||||
spaceBetween: 30,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
breakpoints: {
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 40
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 30
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.carousel-example .swiper-container .swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 38px;
|
||||
font-weight: 700;
|
||||
background-color: #eee;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
min-height: 300px;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
swiperOption: {
|
||||
slidesPerView: 3,
|
||||
slidesPerColumn: 2,
|
||||
spaceBetween: 30,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
breakpoints: {
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 40
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 30
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,135 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: CarouselMultipleSlidesPerView.vue
|
||||
Description: Carousel with multiple slides
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Multiple Slides Per View" class="carousel-example" code-toggler>
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-21.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-22.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-23.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-29.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-30.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
</swiper>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div class="carousel-example">
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-21.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-22.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-23.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-29.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-30.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
breakpoints: {
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 40
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 30
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
swiperOption: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
breakpoints: {
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 40
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 30
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: CarouselNavigation.vue
|
||||
Description: Carousel with navigations
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Navigations" class="carousel-example" code-toggler>
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-13.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-7.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-11.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-1.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
|
||||
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
|
||||
</swiper>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div class="carousel-example">
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-13.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-7.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-11.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-1.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-button-prev" slot="button-prev"></div>
|
||||
<div class="swiper-button-next" slot="button-next"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default{
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default{
|
||||
data () {
|
||||
return {
|
||||
swiperOption: {
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,96 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: CarouselPagination.vue
|
||||
Description: Carousel with pagination
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Pagination" class="carousel-example" code-toggler>
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-16.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-19.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-5.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-9.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
</swiper>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div class="carousel-example" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper :options="swiperOption">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-16.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-19.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-5.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-9.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
pagination: {
|
||||
el: '.swiper-pagination'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
swiperOption: {
|
||||
pagination: {
|
||||
el: '.swiper-pagination'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,210 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: CarouselParallax.vue
|
||||
Description: Parallax Carousel demo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Parallax" class="carousel-example" code-toggler>
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<div class="parallax-bg" slot="parallax-bg" data-swiper-parallax="-23%"></div>
|
||||
<swiper-slide>
|
||||
<div class="title" data-swiper-parallax="-100">Slide 1</div>
|
||||
<div class="subtitle font-semibold" data-swiper-parallax="-200">Subtitle</div>
|
||||
<div class="text" data-swiper-parallax="-300">
|
||||
<p class="font-medium">Jelly chocolate cupcake chocolate bar caramels chupa chups chupa chups ice cream tiramisu. Oat cake muffin pastry marzipan sweet jujubes powder cupcake carrot cake. Caramels candy pastry marzipan pudding. Sugar plum carrot cake topping cookie.</p>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<div class="title" data-swiper-parallax="-100">Slide 2</div>
|
||||
<div class="subtitle font-semibold" data-swiper-parallax="-200">Subtitle</div>
|
||||
<div class="text" data-swiper-parallax="-300">
|
||||
<p class="font-medium">Sweet oat cake marzipan jelly brownie ice cream bear claw marshmallow jelly beans. Halvah dessert caramels toffee sweet cake tiramisu. Chocolate bar marshmallow topping biscuit gummies chocolate cake candy liquorice.</p>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<div class="title" data-swiper-parallax="-100">Slide 3</div>
|
||||
<div class="subtitle font-semibold" data-swiper-parallax="-200">Subtitle</div>
|
||||
<div class="text" data-swiper-parallax="-300">
|
||||
<p class="font-medium">Powder jelly bonbon liquorice candy canes jujubes fruitcake cotton candy macaroon. Croissant jelly-o tootsie roll halvah. Topping lollipop pastry. Fruitcake powder cupcake apple pie chocolate bar wafer. brownie macaroon dragée chocolate bar candy.</p>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
|
||||
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
|
||||
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
|
||||
</swiper>
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div class="carousel-example">
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<div class="parallax-bg" slot="parallax-bg" data-swiper-parallax="-23%"></div>
|
||||
<swiper-slide>
|
||||
<div class="title" data-swiper-parallax="-100">Slide 1</div>
|
||||
<div class="subtitle font-semibold" data-swiper-parallax="-200">Subtitle</div>
|
||||
<div class="text" data-swiper-parallax="-300">
|
||||
<p class="font-medium">Jelly chocolate cupcake chocolate bar caramels chupa chups chupa chups ice cream tiramisu. Oat cake muffin pastry marzipan sweet jujubes powder cupcake carrot cake. Caramels candy pastry marzipan pudding. Sugar plum carrot cake topping cookie.</p>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<div class="title" data-swiper-parallax="-100">Slide 2</div>
|
||||
<div class="subtitle font-semibold" data-swiper-parallax="-200">Subtitle</div>
|
||||
<div class="text" data-swiper-parallax="-300">
|
||||
<p class="font-medium">Sweet oat cake marzipan jelly brownie ice cream bear claw marshmallow jelly beans. Halvah dessert caramels toffee sweet cake tiramisu. Chocolate bar marshmallow topping biscuit gummies chocolate cake candy liquorice.</p>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<div class="title" data-swiper-parallax="-100">Slide 3</div>
|
||||
<div class="subtitle font-semibold" data-swiper-parallax="-200">Subtitle</div>
|
||||
<div class="text" data-swiper-parallax="-300">
|
||||
<p class="font-medium">Powder jelly bonbon liquorice candy canes jujubes fruitcake cotton candy macaroon. Croissant jelly-o tootsie roll halvah. Topping lollipop pastry. Fruitcake powder cupcake apple pie chocolate bar wafer. brownie macaroon dragée chocolate bar candy.</p>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
|
||||
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
|
||||
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
speed: 600,
|
||||
parallax: true,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.swiper-slide {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 60px;
|
||||
background-color: transparent !important;
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
.parallax-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 130%;
|
||||
height: 100%;
|
||||
-webkit-background-size: cover;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-image: url('../../../../assets/images/slider/04.jpg')
|
||||
}
|
||||
|
||||
.swiper-slide .title {
|
||||
font-size: 41px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.swiper-slide .subtitle {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.swiper-slide .text {
|
||||
font-size: 14px;
|
||||
max-width: 400px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
swiperOption: {
|
||||
speed: 600,
|
||||
parallax: true,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.swiper-slide {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 60px;
|
||||
background-color: transparent !important;
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
.parallax-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 130%;
|
||||
height: 100%;
|
||||
-webkit-background-size: cover;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-image: url('../../../../assets/images/pages/carousel/banner-4.jpg');
|
||||
}
|
||||
|
||||
.swiper-slide .title {
|
||||
font-size: 41px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.swiper-slide .subtitle {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.swiper-slide .text {
|
||||
font-size: 14px;
|
||||
max-width: 400px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: CarouselProgress.vue
|
||||
Description: Carousel with progress
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Progress" class="carousel-example" code-toggler>
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-10.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-7.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-9.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-11.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
|
||||
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
|
||||
</swiper>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div class="carousel-example">
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-10.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-7.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-9.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-11.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
<div class="swiper-button-prev" slot="button-prev"></div>
|
||||
<div class="swiper-button-next" slot="button-next"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
type: 'progressbar'
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
swiperOption: {
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
type: 'progressbar'
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,167 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: CarouselResponsiveBreakpoints.vue
|
||||
Description: Carousel with responsive breakpoints
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Responsive Breakpoints" class="carousel-example" code-toggler>
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-31.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-32.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-33.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-29.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-35.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-23.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-37.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-38.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-39.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-40.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
</swiper>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div class="carousel-example">
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-31.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-32.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-33.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-29.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-35.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-23.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-37.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-38.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-39.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img class="responsive" src="@/assets/images/pages/carousel/banner-40.jpg" alt="banner">
|
||||
</swiper-slide>
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
slidesPerView: 5,
|
||||
spaceBetween: 50,
|
||||
// init: false,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
breakpoints: {
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 40
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 30
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
swiperOption: {
|
||||
slidesPerView: 5,
|
||||
spaceBetween: 50,
|
||||
// init: false,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true
|
||||
},
|
||||
breakpoints: {
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 40
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 30
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,206 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: CarouselVirtualSlides.vue
|
||||
Description: Carousel with virtual slides
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Virtual Slides" class="carousel-example" code-toggler>
|
||||
<div class="mb-4">
|
||||
<vs-button class="mr-4 mb-4" @click.native="toSlide(0)">To Slide 1</vs-button>
|
||||
<vs-button class="mr-4 mb-4" @click.native="toSlide(249)">To Slide 250</vs-button>
|
||||
<vs-button class="mr-4 mb-4" @click.native="toSlide(499)">To Slide 500</vs-button>
|
||||
</div>
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" ref="mySwiper" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
<div class="swiper-button-prev" slot="button-prev"></div>
|
||||
<div class="swiper-button-next" slot="button-next"></div>
|
||||
</swiper>
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div class="carousel-example">
|
||||
<div class="mb-base">
|
||||
<vs-button class="mr-4 mb-4" @click.native="toSlide(0)">To Slide 1</vs-button>
|
||||
<vs-button class="mr-4 mb-4" @click.native="toSlide(249)">To Slide 250</vs-button>
|
||||
<vs-button class="mr-4 mb-4" @click.native="toSlide(499)">To Slide 500</vs-button>
|
||||
</div>
|
||||
<!-- swiper -->
|
||||
<swiper :options="swiperOption" ref="mySwiper" :dir="$vs.rtl ? 'rtl' : 'ltr'" :key="$vs.rtl">
|
||||
<div class="swiper-pagination" slot="pagination"></div>
|
||||
<div class="swiper-button-prev" slot="button-prev"></div>
|
||||
<div class="swiper-button-next" slot="button-next"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
slidesPerView: 3,
|
||||
centeredSlides: true,
|
||||
spaceBetween: 30,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
type: 'fraction'
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
},
|
||||
virtual: {
|
||||
slides: (function () {
|
||||
const slides = [];
|
||||
for (let i = 0; i < 600; i += 1) {
|
||||
slides.push('Slide ' + (i + 1))
|
||||
}
|
||||
return slides
|
||||
}())
|
||||
},
|
||||
breakpoints: {
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 40
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 30
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toSlide(i) {
|
||||
this.$refs.mySwiper.swiper.slideTo(i, 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper-container {
|
||||
::v-deep .swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 38px;
|
||||
font-weight: 700;
|
||||
background-color: #eee;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
min-height: 300px;
|
||||
|
||||
.theme-dark & {
|
||||
background-color: #242a47;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.min.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
swiperOption: {
|
||||
slidesPerView: 3,
|
||||
centeredSlides: true,
|
||||
spaceBetween: 30,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
type: 'fraction'
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
},
|
||||
virtual: {
|
||||
slides: (function () {
|
||||
const slides = []
|
||||
for (let i = 0; i < 600; i += 1) {
|
||||
slides.push(`Slide ${ i + 1}`)
|
||||
}
|
||||
return slides
|
||||
}())
|
||||
},
|
||||
breakpoints: {
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 40
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 30
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toSlide (i) {
|
||||
this.$refs.mySwiper.swiper.slideTo(i, 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper-container {
|
||||
::v-deep .swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 38px;
|
||||
font-weight: 700;
|
||||
background-color: #eee;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
min-height: 300px;
|
||||
|
||||
.theme-dark & {
|
||||
background-color: #242a47;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Clipboard.vue
|
||||
Description: Clipboard demo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<div id="page-clipboard-demo">
|
||||
<clipboard-directive></clipboard-directive>
|
||||
<clipboard-without-directive></clipboard-without-directive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ClipboardDirective from './ClipboardDirective.vue'
|
||||
import ClipboardWithoutDirective from './ClipboardWithoutDirective.vue'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
ClipboardDirective,
|
||||
ClipboardWithoutDirective
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: ClipboardDirective.vue
|
||||
Description: Clipboard demo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<vx-card title="Using Directive" subtitle="Use directive on button to copy text" code-toggler>
|
||||
<vs-input v-model="text" class="inline-flex mb-2 mr-2" />
|
||||
<vs-button
|
||||
v-clipboard:copy="text"
|
||||
v-clipboard:success="onCopy"
|
||||
v-clipboard:error="onError">
|
||||
Copy
|
||||
</vs-button>
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<vs-input v-model="text" class="inline-flex" />
|
||||
<vs-button
|
||||
v-clipboard:copy="text"
|
||||
v-clipboard:success="onCopy"
|
||||
v-clipboard:error="onError">
|
||||
Copy
|
||||
</vs-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text: 'Copy Me!',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCopy() {
|
||||
this.$vs.notify({
|
||||
title: 'Success',
|
||||
text: 'Text copied successfully',
|
||||
color: 'success',
|
||||
iconPack: 'feather',
|
||||
position: 'top-center',
|
||||
icon: 'icon-check-circle'
|
||||
})
|
||||
},
|
||||
onError() {
|
||||
this.$vs.notify({
|
||||
title: 'Failed',
|
||||
text: 'Error in copying text',
|
||||
color: 'danger',
|
||||
iconPack: 'feather',
|
||||
position: 'top-center',
|
||||
icon: 'icon-alert-circle'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
text: 'Copy Me'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCopy () {
|
||||
this.$vs.notify({
|
||||
title: 'Success',
|
||||
text: 'Text copied successfully',
|
||||
color: 'success',
|
||||
iconPack: 'feather',
|
||||
position: 'top-center',
|
||||
icon:'icon-check-circle'
|
||||
})
|
||||
},
|
||||
onError () {
|
||||
this.$vs.notify({
|
||||
title: 'Failed',
|
||||
text: 'Error in copying text',
|
||||
color: 'danger',
|
||||
iconPack: 'feather',
|
||||
position: 'top-center',
|
||||
icon:'icon-alert-circle'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: ClipboardWithoutDirective.vue
|
||||
Description: Clipboard demo without directive
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<vx-card title="Without directive" subtitle="You can copy text without a specific button. Use $copyText to copy text when event got fired." code-toggler>
|
||||
<vs-input v-model="text2" class="inline-flex mb-2 mr-2" />
|
||||
<vs-button @click="copyText">Copy</vs-button>
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<vs-input v-model="text2" class="inline-flex" />
|
||||
<vs-button @click="copyText">Copy</vs-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text2: 'Copy Me Without Directive',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
copyText() {
|
||||
const thisIns = this;
|
||||
this.$copyText(this.text2).then(function() {
|
||||
thisIns.$vs.notify({
|
||||
title: 'Success',
|
||||
text: 'Text copied successfully',
|
||||
color: 'success',
|
||||
iconPack: 'feather',
|
||||
position: 'top-center',
|
||||
icon: 'icon-check-circle'
|
||||
})
|
||||
}, function() {
|
||||
thisIns.$vs.notify({
|
||||
title: 'Failed',
|
||||
text: 'Error in copying text',
|
||||
color: 'danger',
|
||||
iconPack: 'feather',
|
||||
position: 'top-center',
|
||||
icon: 'icon-alert-circle'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
text2: 'Copy Me Without Directive'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
copyText () {
|
||||
const thisIns = this
|
||||
this.$copyText(this.text2).then(function () {
|
||||
thisIns.$vs.notify({
|
||||
title: 'Success',
|
||||
text: 'Text copied successfully',
|
||||
color: 'success',
|
||||
iconPack: 'feather',
|
||||
position: 'top-center',
|
||||
icon: 'icon-check-circle'
|
||||
})
|
||||
}, function () {
|
||||
thisIns.$vs.notify({
|
||||
title: 'Failed',
|
||||
text: 'Error in copying text',
|
||||
color: 'danger',
|
||||
iconPack: 'feather',
|
||||
position: 'top-center',
|
||||
icon: 'icon-alert-circle'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: ContextMenu.vue
|
||||
Description: Context menu Demo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<div id="context-menu-demo">
|
||||
<context-menu-simple />
|
||||
<context-menu-click-not-close />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContextMenuSimple from './ContextMenuSimple.vue'
|
||||
import ContextMenuClickNotClose from './ContextMenuClickNotClose.vue'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
ContextMenuSimple,
|
||||
ContextMenuClickNotClose
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,127 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: ContextMenuClickNotClose.vue
|
||||
Description: Click not close on click of context item
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<vx-card title="Click Not Close" code-toggler>
|
||||
<vs-button @contextmenu.prevent="$refs.menu.open">Right click on me - Do not close</vs-button>
|
||||
<vue-context ref="menu" :closeOnClick="false">
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Next')" class="flex items-center text-sm">
|
||||
<feather-icon :icon="$vs.rtl ? 'ChevronLeftIcon' : 'ChevronRightIcon'" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Previous')" class="flex items-center text-sm">
|
||||
<feather-icon :icon="$vs.rtl ? 'ChevronRightIcon' : 'ChevronLeftIcon'" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Increase')" class="flex items-center text-sm">
|
||||
<feather-icon icon="PlusIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Increase</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Decrease')" class="flex items-center text-sm">
|
||||
<feather-icon icon="MinusIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Decrease</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Random')" class="flex items-center text-sm">
|
||||
<feather-icon icon="ShuffleIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Random</span>
|
||||
</a>
|
||||
</li>
|
||||
</vue-context>
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<vs-button @contextmenu.prevent="$refs.menu.open">Right click on me - Do not close</vs-button>
|
||||
<vue-context ref="menu" :closeOnClick="false">
|
||||
<ul class="bordered-items p-0">
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Next')" class="flex items-center text-sm">
|
||||
<feather-icon icon="ChevronRightIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Previous')" class="flex items-center text-sm">
|
||||
<feather-icon icon="ChevronLeftIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Increase')" class="flex items-center text-sm">
|
||||
<feather-icon icon="PlusIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Increase</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Decrease')" class="flex items-center text-sm">
|
||||
<feather-icon icon="MinusIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Decrease</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Random')" class="flex items-center text-sm">
|
||||
<feather-icon icon="ShuffleIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Random</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-context>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueContext } from 'vue-context';
|
||||
|
||||
export default{
|
||||
components: {
|
||||
VueContext
|
||||
},
|
||||
methods: {
|
||||
optionClicked(text) {
|
||||
this.$vs.notify({
|
||||
title:'Action Clicked',
|
||||
text: text,
|
||||
icon: 'feather',
|
||||
iconPack: 'icon-alert-circle',
|
||||
color:'primary'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueContext } from 'vue-context'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
VueContext
|
||||
},
|
||||
methods: {
|
||||
optionClicked (text) {
|
||||
this.$vs.notify({
|
||||
title:'Action Clicked',
|
||||
text,
|
||||
icon: 'feather',
|
||||
iconPack: 'icon-alert-circle',
|
||||
color:'primary'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,125 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: ContextMenuSimple.vue
|
||||
Description: Simple context menu Demo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<vx-card title="Simple" code-toggler>
|
||||
<vs-button @contextmenu.prevent="$refs.menu.open">Right click on me</vs-button>
|
||||
<vue-context ref="menu">
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('New')" class="flex items-center text-sm">
|
||||
<feather-icon icon="PlusIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">New</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Open')" class="flex items-center text-sm">
|
||||
<feather-icon icon="FileIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Open</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Save')" class="flex items-center text-sm">
|
||||
<feather-icon icon="SaveIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Save</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('As')" class="flex items-center text-sm">
|
||||
<feather-icon icon="SaveIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Save As</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Close')" class="flex items-center text-sm">
|
||||
<feather-icon icon="XIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Close</span>
|
||||
</a>
|
||||
</li>
|
||||
</vue-context>
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<vs-button @contextmenu.prevent="$refs.menu.open">Right click on me</vs-button>
|
||||
<vue-context ref="menu">
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('New')" class="flex items-center text-sm">
|
||||
<feather-icon icon="PlusIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">New</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Open')" class="flex items-center text-sm">
|
||||
<feather-icon icon="FileIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Open</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Save')" class="flex items-center text-sm">
|
||||
<feather-icon icon="SaveIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Save</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('As')" class="flex items-center text-sm">
|
||||
<feather-icon icon="SaveIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Save As</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" @click="optionClicked('Close')" class="flex items-center text-sm">
|
||||
<feather-icon icon="XIcon" svgClasses="w-5 h-5" />
|
||||
<span class="ml-2">Close</span>
|
||||
</a>
|
||||
</li>
|
||||
</vue-context>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueContext } from 'vue-context';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VueContext
|
||||
},
|
||||
methods: {
|
||||
optionClicked(text) {
|
||||
this.$vs.notify({
|
||||
title: 'Action Clicked',
|
||||
text: text,
|
||||
icon: 'feather',
|
||||
iconPack: 'icon-alert-circle',
|
||||
color: 'primary'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueContext } from 'vue-context'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
VueContext
|
||||
},
|
||||
methods: {
|
||||
optionClicked (text) {
|
||||
this.$vs.notify({
|
||||
title:'Action Clicked',
|
||||
text,
|
||||
icon: 'feather',
|
||||
iconPack: 'icon-alert-circle',
|
||||
color:'primary'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,101 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Datepicker.vue
|
||||
Description: Datepicker (third-party) - Imports page portions
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<div id="extra-component-datepicker-demo">
|
||||
|
||||
<p class="mb-4">A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations. Read full documnetation <a href="https://github.com/charliekassel/vuejs-datepicker" target="_blank" rel="nofollow">here</a></p>
|
||||
|
||||
<div class="vx-row match-height">
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datepicker-default class="mb-base"></datepicker-default>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datepicker-format class="mb-base"></datepicker-format>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vx-row match-height">
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datepicker-min-max-date-range class="mb-base"></datepicker-min-max-date-range>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datepicker-highlight-dates class="mb-base"></datepicker-highlight-dates>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vx-row match-height">
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datepicker-inline class="mb-base"></datepicker-inline>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datepicker-open-programatically class="mb-base"></datepicker-open-programatically>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vx-row match-height">
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datepicker-translation class="mb-base"></datepicker-translation>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datepicker-rtl class="mb-base"></datepicker-rtl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vx-row match-height">
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datepicker-day-view-only class="mb-base"></datepicker-day-view-only>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datepicker-month-view-only class="mb-base"></datepicker-month-view-only>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vx-row match-height">
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datepicker-date-month-view-only></datepicker-date-month-view-only>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datepicker-month-year-view-only></datepicker-month-year-view-only>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DatepickerDefault from './DatepickerDefault.vue'
|
||||
import DatepickerFormat from './DatepickerFormat.vue'
|
||||
import DatepickerMinMaxDateRange from './DatepickerMinMaxDateRange.vue'
|
||||
import DatepickerHighlightDates from './DatepickerHighlightDates.vue'
|
||||
import DatepickerInline from './DatepickerInline.vue'
|
||||
import DatepickerOpenProgramatically from './DatepickerOpenProgramatically.vue'
|
||||
import DatepickerTranslation from './DatepickerTranslation.vue'
|
||||
import DatepickerRtl from './DatepickerRtl.vue'
|
||||
import DatepickerDayViewOnly from './DatepickerDayViewOnly.vue'
|
||||
import DatepickerMonthViewOnly from './DatepickerMonthViewOnly.vue'
|
||||
import DatepickerDateMonthViewOnly from './DatepickerDateMonthViewOnly.vue'
|
||||
import DatepickerMonthYearViewOnly from './DatepickerMonthYearViewOnly.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DatepickerDefault,
|
||||
DatepickerFormat,
|
||||
DatepickerMinMaxDateRange,
|
||||
DatepickerHighlightDates,
|
||||
DatepickerInline,
|
||||
DatepickerOpenProgramatically,
|
||||
DatepickerTranslation,
|
||||
DatepickerRtl,
|
||||
DatepickerDayViewOnly,
|
||||
DatepickerMonthViewOnly,
|
||||
DatepickerDateMonthViewOnly,
|
||||
DatepickerMonthYearViewOnly
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatepickerDateMonthViewOnly.vue
|
||||
Description: Create datepicker with date and month view only
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Date and Month View Only" code-toggler>
|
||||
<p>Rendering default DatePicker with date and month view only</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<datepicker :minimumView="'day'" :maximumView="'month'"></datepicker>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<datepicker :minimumView="'day'" :maximumView="'month'"></datepicker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatepickerDayViewOnly.vue
|
||||
Description: Create datepicker with only day view
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Day View Only" code-toggler>
|
||||
<p>Rendering default DatePicker with Day view only</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<datepicker :minimumView="'day'" :maximumView="'day'"></datepicker>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<datepicker :minimumView="'day'" :maximumView="'day'"></datepicker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,56 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatePickerDefault.vue
|
||||
Description: A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Default" code-toggler>
|
||||
<p>Rendering default DatePicker with <code>v-model</code></p>
|
||||
|
||||
<div class="mt-5">
|
||||
<datepicker placeholder="Select Date" v-model="date"></datepicker>
|
||||
<p class="mt-4">Selected Date: {{ date }}</p>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<datepicker placeholder="Select Date" v-model="date"></datepicker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatePickerFormat.vue
|
||||
Description: Change datepicker format
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Format Datepicker" code-toggler>
|
||||
<p>Change datepicker format with <code>format</code></p>
|
||||
|
||||
<div class="mt-5">
|
||||
<datepicker :format="format"></datepicker>
|
||||
<vs-select v-model="format" class="mt-4 w-full">
|
||||
<vs-select-item :key="index" :value="option.value" :text="option.text" v-for="(option,index) in formatOptions" />
|
||||
</vs-select>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<datepicker :format="format"></datepicker>
|
||||
<vs-select v-model="format" class="mt-4 w-full">
|
||||
<vs-select-item :key="index" :value="option.value" :text="option.text" v-for="(option,index) in formatOptions" />
|
||||
</vs-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
format: "d MMMM yyyy",
|
||||
formatOptions:[
|
||||
{text: "d MMM yyyy - e.g 12 Feb 2016" , value: "d MMM yyyy" },
|
||||
{text: "d MMMM yyyy - e.g 12 February 2016", value: "d MMMM yyyy" },
|
||||
{text: "yyyy-MM-dd - e.g 2016-02-12", value: "yyyy-MM-dd" },
|
||||
{text: "dsu MMM yyyy - e.g 12th Feb 2016", value: "dsu MMM yyyy" },
|
||||
{text: "D dsu MMM yyyy - e.g Sat 12th Feb 2016", value: "D dsu MMM yyyy" },
|
||||
],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
format: 'd MMMM yyyy',
|
||||
formatOptions:[
|
||||
{text: 'd MMM yyyy - e.g 12 Feb 2016', value: 'd MMM yyyy' },
|
||||
{text: 'd MMMM yyyy - e.g 12 February 2016', value: 'd MMMM yyyy' },
|
||||
{text: 'yyyy-MM-dd - e.g 2016-02-12', value: 'yyyy-MM-dd' },
|
||||
{text: 'dsu MMM yyyy - e.g 12th Feb 2016', value: 'dsu MMM yyyy' },
|
||||
{text: 'D dsu MMM yyyy - e.g Sat 12th Feb 2016', value: 'D dsu MMM yyyy' }
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,67 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatepickerHighlightDates.vue
|
||||
Description: Highlight dates in datepicker with function
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Highlight Dates" code-toggler>
|
||||
<p>Highlight dates in datepicker using function with <code>highlighted</code> prop</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<datepicker :highlighted="highlightedFn"></datepicker>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<datepicker :highlighted="highlightedFn"></datepicker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
highlightedFn: {
|
||||
customPredictor(date) {
|
||||
if (date.getDate() % 4 === 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
highlightedFn: {
|
||||
customPredictor (date) {
|
||||
if (date.getDate() % 4 === 0) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatePickerInline.vue
|
||||
Description: Create inline datepicker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Inline" code-toggler>
|
||||
<p>Create inline datepicker using <code>inline</code> prop</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<datepicker :inline="true"></datepicker>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<datepicker :inline="true"></datepicker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatePickerMinMaxDateRange.vue
|
||||
Description: Add min and max date range to datepicker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Min-Max Date Range" code-toggler>
|
||||
<p>You can add min max date range to disable dates in number of ways: <a href="https://github.com/charliekassel/vuejs-datepicker#disabled-dates" target="_blank" rel="nofollow">docs</a></p>
|
||||
|
||||
<div class="mt-5">
|
||||
<datepicker :disabledDates="disabledDates"></datepicker>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<datepicker :disabledDates="disabledDates"></datepicker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
disabledDates: {
|
||||
to: new Date(new Date().getFullYear(), new Date().getMonth()-2, 5), // Disable all dates up to specific date
|
||||
from: new Date(new Date().getFullYear(), new Date().getMonth()+2, 26), // Disable all dates after specific date
|
||||
daysOfMonth: [8, 11, 17], // Disable Specific days
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
disabledDates: {
|
||||
to: new Date(new Date().getFullYear(), new Date().getMonth() - 2, 5), // Disable all dates up to specific date
|
||||
from: new Date(new Date().getFullYear(), new Date().getMonth() + 2, 26), // Disable all dates after specific date
|
||||
daysOfMonth: [8, 11, 17] // Disable Specific days
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatepickerMonthViewOnly.vue
|
||||
Description: Create datepicker with only day view
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Month View Only" code-toggler>
|
||||
<p>Rendering default DatePicker with Month view only</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<datepicker :minimumView="'month'" :maximumView="'month'"></datepicker>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<datepicker :minimumView="'month'" :maximumView="'month'"></datepicker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatepickerMonthYearViewOnly.vue
|
||||
Description: Create datepicker with month and year view only
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Month and Year View Only" code-toggler>
|
||||
<p>Rendering default DatePicker with month and year view only</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<datepicker :minimumView="'month'" :maximumView="'year'"></datepicker>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<datepicker :minimumView="'month'" :maximumView="'year'"></datepicker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,47 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatepickerOpenProgramatically.vue
|
||||
Description: opening datepicker programatically
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Open Programatically" code-toggler>
|
||||
<p>Open datepicker programatically using <strong>ref</strong> and <strong>click-event</strong></p>
|
||||
|
||||
<div class="mt-5">
|
||||
<vs-button class="mb-4" @click="$refs.programaticOpen.showCalendar()">Open Picker</vs-button>
|
||||
<datepicker ref="programaticOpen"></datepicker>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<vs-button class="mb-4" @click="$refs.programaticOpen.showCalendar()">Open Picker</vs-button>
|
||||
<datepicker ref="programaticOpen"></datepicker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,57 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatepickerRtl.vue
|
||||
Description: Create RTL datepicker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="RTL Datepicker" code-toggler>
|
||||
<p>Rendering RTL DatePicker using <code>language</code> prop</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<datepicker :language="languages.he"></datepicker>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<datepicker :language="languages.he"></datepicker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker';
|
||||
import * as lang from "vuejs-datepicker/src/locale";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
languages: lang,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker'
|
||||
import * as lang from 'vuejs-datepicker/src/locale'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
languages: lang
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatepickerTranslation.vue
|
||||
Description: Create datepicker for other languages
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Translation" code-toggler>
|
||||
<p>Date picker language: {{ languages[language].language }}</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<vs-select v-model="language" class="mb-4 w-1/3">
|
||||
<vs-select-item :key="key" :value="key" :text="language.language" v-for="(language, key) in languages" />
|
||||
</vs-select>
|
||||
<datepicker :language="languages[language]" format="d MMMM yyyy"></datepicker>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<vs-select v-model="language" class="mb-4 w-1/3">
|
||||
<vs-select-item :key="key" :value="key" :text="language.language" v-for="(language, key) in languages" />
|
||||
</vs-select>
|
||||
<datepicker :language="languages[language]" format="d MMMM yyyy"></datepicker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker';
|
||||
import * as lang from 'vuejs-datepicker/src/locale';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
language: "en",
|
||||
languages: lang,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from 'vuejs-datepicker'
|
||||
import * as lang from 'vuejs-datepicker/src/locale'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
language: 'en',
|
||||
languages: lang
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Datepicker
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Datepicker.vue
|
||||
Description: Datepicker (third-party) - Imports page portions
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<div id="extra-component-datetime-picker-demo">
|
||||
|
||||
<p class="mb-4">vue-flatpickr-component is Vue.js component for Flatpickr datetime picker. Read full documnetation <a href="https://github.com/ankurk91/vue-flatpickr-component" target="_blank" rel="nofollow">here</a></p>
|
||||
|
||||
<div class="vx-row match-height">
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datetime-picker-basic class="mb-base"></datetime-picker-basic>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datetime-picker-datetime class="mb-base"></datetime-picker-datetime>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datetime-picker-time class="mb-base"></datetime-picker-time>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datetime-picker-locale class="mb-base"></datetime-picker-locale>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datetime-picker-start-end class="mb-base"></datetime-picker-start-end>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datetime-picker-input class="mb-base" ></datetime-picker-input>
|
||||
</div>
|
||||
<div class="vx-col w-full">
|
||||
<datetime-picker-inline></datetime-picker-inline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DatetimePickerBasic from './DatetimePickerBasic.vue'
|
||||
import DatetimePickerDatetime from './DatetimePickerDatetime.vue'
|
||||
import DatetimePickerTime from './DatetimePickerTime.vue'
|
||||
import DatetimePickerLocale from './DatetimePickerLocale.vue'
|
||||
import DatetimePickerStartEnd from './DatetimePickerStartEnd.vue'
|
||||
import DatetimePickerInline from './DatetimePickerInline.vue'
|
||||
import DatetimePickerInput from './DatetimePickerInput.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DatetimePickerBasic,
|
||||
DatetimePickerDatetime,
|
||||
DatetimePickerTime,
|
||||
DatetimePickerLocale,
|
||||
DatetimePickerStartEnd,
|
||||
DatetimePickerInline,
|
||||
DatetimePickerInput
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatetimePickerBasic.vue
|
||||
Description: basic datetime picker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Basic" code-toggler>
|
||||
<p>Rendering basic Datetime Picker with <code>v-model</code></p>
|
||||
|
||||
<div class="mt-5">
|
||||
<flat-pickr v-model="date" />
|
||||
<p class="mt-4">Selected Date: {{ date }}</p>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<flat-pickr v-model="date" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatetimePickerDatetime.vue
|
||||
Description: datetime picker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Datetime Picker" code-toggler>
|
||||
<p>Rendering datetime picker by updating config</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<flat-pickr :config="configdateTimePicker" v-model="datetime" placeholder="Date Time" />
|
||||
<p class="mt-4">Selected Datetime: {{ datetime }}</p>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<flat-pickr :config="configdateTimePicker" v-model="datetime" placeholder="Date Time" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
datetime: null,
|
||||
configdateTimePicker: {
|
||||
enableTime: true,
|
||||
dateFormat: 'd-m-Y H:i'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
datetime: null,
|
||||
configdateTimePicker: {
|
||||
enableTime: true,
|
||||
dateFormat: 'd-m-Y H:i'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatetimePickerInline.vue
|
||||
Description: inline datetime picker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Inline Picker" code-toggler>
|
||||
<p>Creating inline datetime picker by setting <code>inline</code> to <code>true</code></p>
|
||||
|
||||
<div class="mt-5">
|
||||
<flat-pickr :config="configdateTimePicker" v-model="date" placeholder="Inline Picker" />
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<flat-pickr :config="configdateTimePicker" v-model="date" placeholder="Inline Picker" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
configdateTimePicker: {
|
||||
inline: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: null,
|
||||
configdateTimePicker: {
|
||||
inline: true
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatetimePickerInput.vue
|
||||
Description: allow input in datetime picker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Allow input in Picker" code-toggler>
|
||||
<p>Use <code>allowInput</code> to create Datepicker with input support</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<flat-pickr :config="configdateTimePicker" v-model="date" placeholder="Insert Date" />
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<flat-pickr :config="configdateTimePicker" v-model="date" placeholder="Inline Picker" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
configdateTimePicker: {
|
||||
inline: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: null,
|
||||
configdateTimePicker: {
|
||||
allowInput: true
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatetimePickerLocale.vue
|
||||
Description: Create datetime picler according to locale
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Change Locale" code-toggler>
|
||||
<p>Import locale and set <code>locale</code> in config of picker to change locale.</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<flat-pickr :config="configdateTimePicker" v-model="date" placeholder="Choose Date" />
|
||||
<p class="mt-4">Selected Date: {{ date }}</p>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<flat-pickr :config="configdateTimePicker" v-model="date" placeholder="Choose Date" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.min.css';
|
||||
import {French as FrenchLocale} from 'flatpickr/dist/l10n/fr.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
configdateTimePicker: {
|
||||
locale: FrenchLocale
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.min.css'
|
||||
import {French as FrenchLocale} from 'flatpickr/dist/l10n/fr.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: null,
|
||||
configdateTimePicker: {
|
||||
locale: FrenchLocale
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatetimePickerInput.vue
|
||||
Description: allow input in datetime picker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Start-End Date" code-toggler>
|
||||
<p>Create start and end date - date picker</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<div>
|
||||
<flat-pickr :config="configFromdateTimePicker" v-model="fromDate" placeholder="From Date" @on-change="onFromChange" />
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<flat-pickr :config="configTodateTimePicker" v-model="toDate" placeholder="To Date" @on-change="onToChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<flat-pickr :config="configFromdateTimePicker" v-model="fromDate" placeholder="From Date" @on-change="onFromChange" />
|
||||
<flat-pickr :config="configTodateTimePicker" v-model="toDate" placeholder="To Date" @on-change="onToChange" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fromDate: null,
|
||||
toDate: null,
|
||||
configFromdateTimePicker: {
|
||||
minDate: new Date(),
|
||||
maxDate: null
|
||||
},
|
||||
configTodateTimePicker: {
|
||||
minDate: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onFromChange(selectedDates, dateStr, instance) {
|
||||
this.$set(this.configTodateTimePicker, 'minDate', dateStr);
|
||||
},
|
||||
onToChange(selectedDates, dateStr, instance) {
|
||||
this.$set(this.configFromdateTimePicker, 'maxDate', dateStr);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
fromDate: null,
|
||||
toDate: null,
|
||||
configFromdateTimePicker: {
|
||||
minDate: new Date(),
|
||||
maxDate: null
|
||||
},
|
||||
configTodateTimePicker: {
|
||||
minDate: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onFromChange (selectedDates, dateStr) {
|
||||
this.$set(this.configTodateTimePicker, 'minDate', dateStr)
|
||||
},
|
||||
onToChange (selectedDates, dateStr) {
|
||||
this.$set(this.configFromdateTimePicker, 'maxDate', dateStr)
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatetimePickerTime.vue
|
||||
Description: Only time picker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Time Picker" code-toggler>
|
||||
<p>set <code>noCalendar</code> to <code>true</code> to hide calendar</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<flat-pickr :config="configdateTimePicker" v-model="time" placeholder="Choose time" />
|
||||
<p class="mt-4">Selected Time: {{ time }}</p>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<flat-pickr :config="configdateTimePicker" v-model="time" placeholder="Choose time" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
time: null,
|
||||
configdateTimePicker: {
|
||||
enableTime: true,
|
||||
enableSeconds: true,
|
||||
noCalendar: true
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
time: null,
|
||||
configdateTimePicker: {
|
||||
enableTime: true,
|
||||
enableSeconds: true,
|
||||
noCalendar: true
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,36 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DragAndDrop.vue
|
||||
Description: Drag and Drop (third-party) - Imports page portions
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<div id="extra-component-drag-and-drop-demo">
|
||||
|
||||
<p class="mb-4"><a href="https://github.com/SortableJS/Vue.Draggable" target="_blank" rel="nofollow">Vue.Draggable</a> - Vue component allowing drag-and-drop and synchronization with view model array. Based on and offering all features of Sortable.js</p>
|
||||
|
||||
<drag-and-drop-simple></drag-and-drop-simple>
|
||||
<drag-and-drop-multiple-lists></drag-and-drop-multiple-lists>
|
||||
<drag-and-drop-clone-list></drag-and-drop-clone-list>
|
||||
<drag-and-drop-animation></drag-and-drop-animation>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DragAndDropSimple from './DragAndDropSimple.vue'
|
||||
import DragAndDropMultipleLists from './DragAndDropMultipleLists.vue'
|
||||
import DragAndDropCloneList from './DragAndDropCloneList.vue'
|
||||
import DragAndDropAnimation from './DragAndDropAnimation.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DragAndDropSimple,
|
||||
DragAndDropMultipleLists,
|
||||
DragAndDropCloneList,
|
||||
DragAndDropAnimation
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,152 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DragAndDropAnimation.vue
|
||||
Description: Add animation to drag and drop
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="With Animation" code-toggler>
|
||||
<p>Add animation to changes using <code>transition-group</code>.</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<vs-list>
|
||||
<vs-list-header title="People Group" color="primary"></vs-list-header>
|
||||
<draggable :list="list" class="cursor-move">
|
||||
<transition-group>
|
||||
<vs-list-item class="list-item" v-for="listItem in list" :key="listItem.email" :title="listItem.name" :subtitle="listItem.email"><vs-avatar slot="avatar" :text="listItem.name" /></vs-list-item>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</vs-list>
|
||||
</div>
|
||||
|
||||
<prism language="js" class="rounded-lg">
|
||||
{{ list }}
|
||||
</prism>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<vs-list>
|
||||
<vs-list-header title="People Group" color="primary"></vs-list-header>
|
||||
|
||||
<draggable :list="list">
|
||||
<transition-group>
|
||||
<vs-list-item class="list-item" v-for="listItem in list" :key="listItem.email" :title="listItem.name" :subtitle="listItem.email">
|
||||
<vs-avatar slot="avatar" :text="listItem.name" />
|
||||
</vs-list-item>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
|
||||
</vs-list>
|
||||
</template>
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
name: "Paz Joya",
|
||||
email: "girliness@spotlike.co.uk",
|
||||
},
|
||||
{
|
||||
name: "Sunshine Cose",
|
||||
email: "executrixship@equisized.edu",
|
||||
},
|
||||
{
|
||||
name: "Alba Dobbin",
|
||||
email: "bidding@demibob.or",
|
||||
},
|
||||
{
|
||||
name: "Marlin Hinchee",
|
||||
email: "preholding@scuffly.co.uk",
|
||||
},
|
||||
{
|
||||
name: "Leia Atienza",
|
||||
email: "unmeasurableness@interlamellar.co.uk"
|
||||
},
|
||||
{
|
||||
name: "Lashawna Vaudrainm",
|
||||
email: "soaking@khubber.com"
|
||||
},
|
||||
{
|
||||
name: "Liliana Henscheid",
|
||||
email: "lecideine@turndown.org"
|
||||
},
|
||||
{
|
||||
name: "Keven Kolter",
|
||||
email: "nontenure@anglicanum.co.uk"
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
draggable
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.list-item {
|
||||
transition: all 1s
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import Prism from 'vue-prism-component'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
name: 'Paz Joya',
|
||||
email: 'girliness@spotlike.co.uk'
|
||||
},
|
||||
{
|
||||
name: 'Sunshine Cose',
|
||||
email: 'executrixship@equisized.edu'
|
||||
},
|
||||
{
|
||||
name: 'Alba Dobbin',
|
||||
email: 'bidding@demibob.or'
|
||||
},
|
||||
{
|
||||
name: 'Marlin Hinchee',
|
||||
email: 'preholding@scuffly.co.uk'
|
||||
},
|
||||
{
|
||||
name: 'Leia Atienza',
|
||||
email: 'unmeasurableness@interlamellar.co.uk'
|
||||
},
|
||||
{
|
||||
name: 'Lashawna Vaudrainm',
|
||||
email: 'soaking@khubber.com'
|
||||
},
|
||||
{
|
||||
name: 'Liliana Henscheid',
|
||||
email: 'lecideine@turndown.org'
|
||||
},
|
||||
{
|
||||
name: 'Keven Kolter',
|
||||
email: 'nontenure@anglicanum.co.uk'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
draggable,
|
||||
Prism
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.list-item { transition: all .5s }
|
||||
</style>
|
||||
@@ -0,0 +1,96 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DragAndDropClone.vue
|
||||
Description: Clone from one list to another
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Clone List" code-toggler>
|
||||
<p>Clone list items from another existing list. Add <code>pull</code> and <code>put</code> to <code>group</code> prop</p>
|
||||
|
||||
<!-- List 1 -->
|
||||
<div class="vx-row">
|
||||
<div class="vx-col w-full sm:w-1/2">
|
||||
<h6 class="mt-5 mb-3">Tag Source</h6>
|
||||
<draggable :list="list1" :group="{name:'tags', pull:'clone', put:false }" class="p-2 cursor-move">
|
||||
<vs-chip v-for="(listItem, index) in list1" :key="index">{{ listItem }}</vs-chip>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="vx-col w-full sm:w-1/2">
|
||||
<h6 class="mt-5 mb-3">Your Tags</h6>
|
||||
<draggable :list="list2" :group="{name: 'tags'}" class="p-2 cursor-move">
|
||||
<vs-chip v-for="(listItem, index) in list2" :key="index">{{ listItem }}</vs-chip>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List 2 -->
|
||||
<div class="vx-row">
|
||||
<div class="vx-col w-full sm:w-1/2">
|
||||
<prism language="js" class="rounded-lg">
|
||||
Tag Source: {{ list1 }}
|
||||
</prism>
|
||||
</div>
|
||||
<div class="vx-col w-full sm:w-1/2">
|
||||
<prism language="js" class="rounded-lg">
|
||||
Added tags: {{ list2 }}
|
||||
</prism>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div>
|
||||
<h6 class="mt-5 mb-3">Tag Source</h6>
|
||||
<draggable :list="list1" :group="{name:'tags', pull:'clone', put:false }" class="p-2 cursor-move">
|
||||
<vs-chip v-for="(listItem, index) in list1" :key="index"> {{ "\{\{ listItem \}\}" }} </vs-chip>
|
||||
</draggable>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mt-5 mb-3">Your Tags</h6>
|
||||
<draggable :list="list2" :group="{name: 'tags'}" class="p-2 cursor-move">
|
||||
<vs-chip v-for="(listItem, index) in list2" :key="index"> {{ "\{\{ listItem \}\}" }} </vs-chip>
|
||||
</draggable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list1: ["youtube", "google", "facebook", "twitter", "instagram", "pinterest", "tinder", "slack", "discord", "github", "gitlab"],
|
||||
list2: ["google", "youtube"]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
draggable,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import Prism from 'vue-prism-component'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list1: ['youtube', 'google', 'facebook', 'twitter', 'instagram', 'pinterest', 'tinder', 'slack', 'discord', 'github', 'gitlab'],
|
||||
list2: ['google', 'youtube']
|
||||
}
|
||||
},
|
||||
components: {
|
||||
draggable,
|
||||
Prism
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,178 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DragAndDropMultipleLists.vue
|
||||
Description: Drag and Drop to multiple lists
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Multiple Lists" code-toggler>
|
||||
<p>Drag and drop items of more than one list. Add same <code>group</code> to <code>group</code> prop</p>
|
||||
|
||||
<!-- List 1 -->
|
||||
<div class="vx-row">
|
||||
<div class="vx-col w-full md:w-1/2">
|
||||
<vs-list>
|
||||
<vs-list-header title="People Group 1" color="primary"></vs-list-header>
|
||||
<draggable :list="list1" group="people" class="p-2 cursor-move">
|
||||
<vs-list-item v-for="(listItem, index) in list1" :key="index" :title="listItem.name" :subtitle="listItem.email"><vs-avatar slot="avatar" :text="listItem.name" /></vs-list-item>
|
||||
</draggable>
|
||||
</vs-list>
|
||||
</div>
|
||||
<div class="vx-col w-full md:w-1/2">
|
||||
<vs-list>
|
||||
<vs-list-header title="People Group 2" color="primary"></vs-list-header>
|
||||
<draggable :list="list2" group="people" class="p-2 cursor-move">
|
||||
<vs-list-item v-for="(listItem, index) in list2" :key="index" :title="listItem.name" :subtitle="listItem.email"><vs-avatar slot="avatar" :text="listItem.name" /></vs-list-item>
|
||||
</draggable>
|
||||
</vs-list>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- List 2 -->
|
||||
<div class="vx-row">
|
||||
<div class="vx-col w-full md:w-1/2">
|
||||
<prism language="js" class="rounded-lg">
|
||||
People Group 1: {{ list1 }}
|
||||
</prism>
|
||||
</div>
|
||||
<div class="vx-col w-full md:w-1/2">
|
||||
<prism language="js" class="rounded-lg">
|
||||
People Group 2: {{ list2 }}
|
||||
</prism>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<vs-list>
|
||||
<vs-list-header title="People Group 1" color="primary"></vs-list-header>
|
||||
|
||||
<draggable :list="list1" group="people" class="p-2 cursor-move">
|
||||
<vs-list-item v-for="(listItem, index) in list1" :key="index" :title="listItem.name" :subtitle="listItem.email">
|
||||
<vs-avatar slot="avatar" :text="listItem.name" />
|
||||
</vs-list-item>
|
||||
</draggable>
|
||||
|
||||
</vs-list>
|
||||
|
||||
<vs-list class="mt-5">
|
||||
<vs-list-header title="People Group 2" color="primary"></vs-list-header>
|
||||
|
||||
<draggable :list="list2" group="people" class="p-2 cursor-move">
|
||||
<vs-list-item v-for="(listItem, index) in list2" :key="index" :title="listItem.name" :subtitle="listItem.email">
|
||||
<vs-avatar slot="avatar" :text="listItem.name" />
|
||||
</vs-list-item>
|
||||
</draggable>
|
||||
|
||||
</vs-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list1: [
|
||||
{
|
||||
name: "Paz Joya",
|
||||
email: "girliness@spotlike.co.uk",
|
||||
},
|
||||
{
|
||||
name: "Sunshine Cose",
|
||||
email: "executrixship@equisized.edu",
|
||||
},
|
||||
{
|
||||
name: "Alba Dobbin",
|
||||
email: "bidding@demibob.or",
|
||||
},
|
||||
{
|
||||
name: "Marlin Hinchee",
|
||||
email: "preholding@scuffly.co.uk",
|
||||
}
|
||||
],
|
||||
list2: [
|
||||
{
|
||||
name: "Leia Atienza",
|
||||
email: "unmeasurableness@interlamellar.co.uk"
|
||||
},
|
||||
{
|
||||
name: "Lashawna Vaudrainm",
|
||||
email: "soaking@khubber.com"
|
||||
},
|
||||
{
|
||||
name: "Liliana Henscheid",
|
||||
email: "lecideine@turndown.org"
|
||||
},
|
||||
{
|
||||
name: "Keven Kolter",
|
||||
email: "nontenure@anglicanum.co.uk"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
draggable,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import Prism from 'vue-prism-component'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list1: [
|
||||
{
|
||||
name: 'Paz Joya',
|
||||
email: 'girliness@spotlike.co.uk'
|
||||
},
|
||||
{
|
||||
name: 'Sunshine Cose',
|
||||
email: 'executrixship@equisized.edu'
|
||||
},
|
||||
{
|
||||
name: 'Alba Dobbin',
|
||||
email: 'bidding@demibob.or'
|
||||
},
|
||||
{
|
||||
name: 'Marlin Hinchee',
|
||||
email: 'preholding@scuffly.co.uk'
|
||||
}
|
||||
],
|
||||
list2: [
|
||||
{
|
||||
name: 'Leia Atienza',
|
||||
email: 'unmeasurableness@interlamellar.co.uk'
|
||||
},
|
||||
{
|
||||
name: 'Lashawna Vaudrainm',
|
||||
email: 'soaking@khubber.com'
|
||||
},
|
||||
{
|
||||
name: 'Liliana Henscheid',
|
||||
email: 'lecideine@turndown.org'
|
||||
},
|
||||
{
|
||||
name: 'Keven Kolter',
|
||||
email: 'nontenure@anglicanum.co.uk'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
draggable,
|
||||
Prism
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DragAndDropSimple.vue
|
||||
Description: Simple Drag and Drop
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Simple" code-toggler>
|
||||
<p>Simple Draggable list with in sync to original list. Remove <code>list</code> prop to break synchronization with original list.</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<vs-list>
|
||||
<draggable :list="list" class="cursor-move">
|
||||
<vs-list-item class="flex items-center p-1" v-for="(item, index) in list" :key="index" :title="item">
|
||||
</vs-list-item>
|
||||
</draggable>
|
||||
</vs-list>
|
||||
</div>
|
||||
|
||||
<prism language="js" class="rounded-lg">
|
||||
{{ list }}
|
||||
</prism>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<vs-list>
|
||||
<draggable :list="list" class="cursor-move">
|
||||
<vs-list-item class="flex items-center p-1" v-for="(item, index) in list" :key="index" :title="item">
|
||||
</vs-list-item>
|
||||
</draggable>
|
||||
</vs-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
"Marzipan I love I love. Soufflé donut I love gummi bears powder. Candy danish biscuit.",
|
||||
"Halvah bonbon bonbon brownie sugar plum. Halvah I love cupcake I love.",
|
||||
"Cake muffin icing topping wafer topping gummi bears apple pie.",
|
||||
"Cotton candy gummi bears bear claw cake brownie jelly-o lemon drops croissant sweet roll.",
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
draggable,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import Prism from 'vue-prism-component'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list: [
|
||||
'Marzipan I love I love. Soufflé donut I love gummi bears powder. Candy danish biscuit.',
|
||||
'Halvah bonbon bonbon brownie sugar plum. Halvah I love cupcake I love.',
|
||||
'Cake muffin icing topping wafer topping gummi bears apple pie.',
|
||||
'Cotton candy gummi bears bear claw cake brownie jelly-o lemon drops croissant sweet roll.'
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
draggable,
|
||||
Prism
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<vx-card>
|
||||
<vs-prompt title="Export To Excel" class="export-options" @cancle="clearFields" @accept="exportToExcel" accept-text="Export" @close="clearFields" :active.sync="activePrompt">
|
||||
<vs-input v-model="fileName" placeholder="Enter File Name.." class="w-full" />
|
||||
<v-select v-model="selectedFormat" :options="formats" class="my-4" />
|
||||
<div class="flex">
|
||||
<span class="mr-4">Cell Auto Width:</span>
|
||||
<vs-switch v-model="cellAutoWidth">Cell Auto Width</vs-switch>
|
||||
</div>
|
||||
</vs-prompt>
|
||||
|
||||
<div class="export-table">
|
||||
<vs-table :data="users" search>
|
||||
|
||||
<template slot="header">
|
||||
<vs-button @click="activePrompt=true">Export</vs-button>
|
||||
</template>
|
||||
|
||||
<template slot="thead">
|
||||
<vs-th> Email </vs-th>
|
||||
<vs-th> Name </vs-th>
|
||||
<vs-th> Website </vs-th>
|
||||
<vs-th> Nro </vs-th>
|
||||
</template>
|
||||
|
||||
<template slot-scope="{data}">
|
||||
<vs-tr :key="indextr" v-for="(tr, indextr) in data">
|
||||
<vs-td>{{ data[indextr].email }}</vs-td>
|
||||
<vs-td>{{ data[indextr].name }}</vs-td>
|
||||
<vs-td>{{ data[indextr].website }}</vs-td>
|
||||
<vs-td>{{ data[indextr].id }}</vs-td>
|
||||
</vs-tr>
|
||||
</template>
|
||||
|
||||
</vs-table>
|
||||
</div>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
vSelect
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fileName: '',
|
||||
formats:['xlsx', 'csv', 'txt'],
|
||||
cellAutoWidth: true,
|
||||
selectedFormat: 'xlsx',
|
||||
headerTitle: ['Id', 'Email', 'Username', 'Name', 'Website'],
|
||||
headerVal: ['id', 'email', 'username', 'name', 'website'],
|
||||
users: [
|
||||
{
|
||||
'id': 1,
|
||||
'name': 'Leanne Graham',
|
||||
'username': 'Bret',
|
||||
'email': 'Sincere@april.biz',
|
||||
'website': 'hildegard.org'
|
||||
},
|
||||
{
|
||||
'id': 2,
|
||||
'name': 'Ervin Howell',
|
||||
'username': 'Antonette',
|
||||
'email': 'Shanna@melissa.tv',
|
||||
'website': 'anastasia.net'
|
||||
},
|
||||
{
|
||||
'id': 3,
|
||||
'name': 'Clementine Bauch',
|
||||
'username': 'Samantha',
|
||||
'email': 'Nathan@yesenia.net',
|
||||
'website': 'ramiro.info'
|
||||
},
|
||||
{
|
||||
'id': 4,
|
||||
'name': 'Patricia Lebsack',
|
||||
'username': 'Karianne',
|
||||
'email': 'Julianne.OConner@kory.org',
|
||||
'website': 'kale.biz'
|
||||
},
|
||||
{
|
||||
'id': 5,
|
||||
'name': 'Chelsey Dietrich',
|
||||
'username': 'Kamren',
|
||||
'email': 'Lucio_Hettinger@annie.ca',
|
||||
'website': 'demarco.info'
|
||||
},
|
||||
{
|
||||
'id': 6,
|
||||
'name': 'Mrs. Dennis Schulist',
|
||||
'username': 'Leopoldo_Corkery',
|
||||
'email': 'Karley_Dach@jasper.info',
|
||||
'website': 'ola.org'
|
||||
},
|
||||
{
|
||||
'id': 7,
|
||||
'name': 'Kurtis Weissnat',
|
||||
'username': 'Elwyn.Skiles',
|
||||
'email': 'Telly.Hoeger@billy.biz',
|
||||
'website': 'elvis.io'
|
||||
},
|
||||
{
|
||||
'id': 8,
|
||||
'name': 'Nicholas Runolfsdottir V',
|
||||
'username': 'Maxime_Nienow',
|
||||
'email': 'Sherwood@rosamond.me',
|
||||
'website': 'jacynthe.com'
|
||||
},
|
||||
{
|
||||
'id': 9,
|
||||
'name': 'Glenna Reichert',
|
||||
'username': 'Delphine',
|
||||
'email': 'Chaim_McDermott@dana.io',
|
||||
'website': 'conrad.com'
|
||||
},
|
||||
{
|
||||
'id': 10,
|
||||
'name': 'Clementina DuBuque',
|
||||
'username': 'Moriah.Stanton',
|
||||
'email': 'Rey.Padberg@karina.biz',
|
||||
'website': 'ambrose.net'
|
||||
}
|
||||
],
|
||||
activePrompt: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
exportToExcel () {
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
const list = this.users
|
||||
const data = this.formatJson(this.headerVal, list)
|
||||
excel.export_json_to_excel({
|
||||
header: this.headerTitle,
|
||||
data,
|
||||
filename: this.fileName,
|
||||
autoWidth: this.cellAutoWidth,
|
||||
bookType: this.selectedFormat
|
||||
})
|
||||
this.clearFields()
|
||||
})
|
||||
},
|
||||
formatJson (filterVal, jsonData) {
|
||||
return jsonData.map(v => filterVal.map(j => {
|
||||
// Add col name which needs to be translated
|
||||
// if (j === 'timestamp') {
|
||||
// return parseTime(v[j])
|
||||
// } else {
|
||||
// return v[j]
|
||||
// }
|
||||
|
||||
return v[j]
|
||||
}))
|
||||
},
|
||||
clearFields () {
|
||||
this.filename = ''
|
||||
this.cellAutoWidth = true
|
||||
this.selectedFormat = 'xlsx'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<vx-card>
|
||||
<vs-prompt title="Export To Excel" class="export-options" @cancle="clearFields" @accept="exportToExcel" accept-text="Export" @close="clearFields" :active.sync="activePrompt">
|
||||
<vs-input v-model="fileName" placeholder="Enter File Name.." class="w-full" />
|
||||
<v-select v-model="selectedFormat" :options="formats" class="my-4" />
|
||||
<div class="flex">
|
||||
<span class="mr-4">Cell Auto Width:</span>
|
||||
<vs-switch v-model="cellAutoWidth">Cell Auto Width</vs-switch>
|
||||
</div>
|
||||
</vs-prompt>
|
||||
|
||||
<div class="export-table">
|
||||
<vs-table :data="users" v-model="selectedUsers" multiple search>
|
||||
|
||||
<template slot="header">
|
||||
<vs-button @click="activePrompt=true">Export Selected</vs-button>
|
||||
</template>
|
||||
|
||||
<template slot="thead">
|
||||
<vs-th> Email </vs-th>
|
||||
<vs-th> Name </vs-th>
|
||||
<vs-th> Website </vs-th>
|
||||
<vs-th> Nro </vs-th>
|
||||
</template>
|
||||
|
||||
<template slot-scope="{data}">
|
||||
<vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">
|
||||
<vs-td>{{ data[indextr].email }}</vs-td>
|
||||
<vs-td>{{ data[indextr].username }}</vs-td>
|
||||
<vs-td>{{ data[indextr].website }}</vs-td>
|
||||
<vs-td>{{ data[indextr].id }}</vs-td>
|
||||
</vs-tr>
|
||||
</template>
|
||||
|
||||
</vs-table>
|
||||
</div>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
vSelect
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fileName: '',
|
||||
formats:['xlsx', 'csv', 'txt'],
|
||||
cellAutoWidth: true,
|
||||
selectedFormat: 'xlsx',
|
||||
headerTitle: ['Id', 'Email', 'Username', 'Name', 'Website'],
|
||||
headerVal: ['id', 'email', 'username', 'name', 'website'],
|
||||
users: [
|
||||
{
|
||||
'id': 1,
|
||||
'name': 'Leanne Graham',
|
||||
'username': 'Bret',
|
||||
'email': 'Sincere@april.biz',
|
||||
'website': 'hildegard.org'
|
||||
},
|
||||
{
|
||||
'id': 2,
|
||||
'name': 'Ervin Howell',
|
||||
'username': 'Antonette',
|
||||
'email': 'Shanna@melissa.tv',
|
||||
'website': 'anastasia.net'
|
||||
},
|
||||
{
|
||||
'id': 3,
|
||||
'name': 'Clementine Bauch',
|
||||
'username': 'Samantha',
|
||||
'email': 'Nathan@yesenia.net',
|
||||
'website': 'ramiro.info'
|
||||
},
|
||||
{
|
||||
'id': 4,
|
||||
'name': 'Patricia Lebsack',
|
||||
'username': 'Karianne',
|
||||
'email': 'Julianne.OConner@kory.org',
|
||||
'website': 'kale.biz'
|
||||
},
|
||||
{
|
||||
'id': 5,
|
||||
'name': 'Chelsey Dietrich',
|
||||
'username': 'Kamren',
|
||||
'email': 'Lucio_Hettinger@annie.ca',
|
||||
'website': 'demarco.info'
|
||||
},
|
||||
{
|
||||
'id': 6,
|
||||
'name': 'Mrs. Dennis Schulist',
|
||||
'username': 'Leopoldo_Corkery',
|
||||
'email': 'Karley_Dach@jasper.info',
|
||||
'website': 'ola.org'
|
||||
},
|
||||
{
|
||||
'id': 7,
|
||||
'name': 'Kurtis Weissnat',
|
||||
'username': 'Elwyn.Skiles',
|
||||
'email': 'Telly.Hoeger@billy.biz',
|
||||
'website': 'elvis.io'
|
||||
},
|
||||
{
|
||||
'id': 8,
|
||||
'name': 'Nicholas Runolfsdottir V',
|
||||
'username': 'Maxime_Nienow',
|
||||
'email': 'Sherwood@rosamond.me',
|
||||
'website': 'jacynthe.com'
|
||||
},
|
||||
{
|
||||
'id': 9,
|
||||
'name': 'Glenna Reichert',
|
||||
'username': 'Delphine',
|
||||
'email': 'Chaim_McDermott@dana.io',
|
||||
'website': 'conrad.com'
|
||||
},
|
||||
{
|
||||
'id': 10,
|
||||
'name': 'Clementina DuBuque',
|
||||
'username': 'Moriah.Stanton',
|
||||
'email': 'Rey.Padberg@karina.biz',
|
||||
'website': 'ambrose.net'
|
||||
}
|
||||
],
|
||||
selectedUsers: [],
|
||||
activePrompt: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
exportToExcel () {
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
const list = this.selectedUsers
|
||||
const data = this.formatJson(this.headerVal, list)
|
||||
excel.export_json_to_excel({
|
||||
header: this.headerTitle,
|
||||
data,
|
||||
filename: this.fileName,
|
||||
autoWidth: this.cellAutoWidth,
|
||||
bookType: this.selectedFormat
|
||||
})
|
||||
this.clearFields()
|
||||
})
|
||||
},
|
||||
formatJson (filterVal, jsonData) {
|
||||
return jsonData.map(v => filterVal.map(j => {
|
||||
// Add col name which needs to be translated
|
||||
// if (j === 'timestamp') {
|
||||
// return parseTime(v[j])
|
||||
// } else {
|
||||
// return v[j]
|
||||
// }
|
||||
|
||||
return v[j]
|
||||
}))
|
||||
},
|
||||
clearFields () {
|
||||
this.fileName = ''
|
||||
this.cellAutoWidth = true
|
||||
this.selectedFormat = 'xlsx'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: i18n.vue
|
||||
Description: I18n demo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-8">
|
||||
<import-excel :onSuccess="loadDataInTable" />
|
||||
</div>
|
||||
<vx-card v-if="tableData.length && header.length">
|
||||
<vs-table stripe pagination :max-items="10" search :data="tableData">
|
||||
<template slot="header">
|
||||
<h4>{{ sheetName }}</h4>
|
||||
</template>
|
||||
|
||||
<template slot="thead">
|
||||
<vs-th :sort-key="heading" v-for="heading in header" :key="heading">{{ heading }}</vs-th>
|
||||
</template>
|
||||
|
||||
<template slot-scope="{data}">
|
||||
<vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">
|
||||
<vs-td :data="col" v-for="(col, indexcol) in data[indextr]" :key="indexcol + col">
|
||||
{{ col }}
|
||||
</vs-td>
|
||||
</vs-tr>
|
||||
</template>
|
||||
</vs-table>
|
||||
</vx-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImportExcel from '@/components/excel/ImportExcel.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ImportExcel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableData: [],
|
||||
header: [],
|
||||
sheetName: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadDataInTable ({ results, header, meta }) {
|
||||
this.header = header
|
||||
this.tableData = results
|
||||
this.sheetName = meta.sheetName
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
:value="value"
|
||||
placeholder="جستجو"
|
||||
:default-active-first-option="false"
|
||||
:show-arrow="false"
|
||||
|
||||
:v-decorator.sync="vDecorator"
|
||||
:filter-option="false"
|
||||
:not-found-content="null"
|
||||
@search="handleSearch"
|
||||
@change="handleChange"
|
||||
@select="select"
|
||||
>
|
||||
<a-select-option v-for="d in data" :key="d.id">
|
||||
<div class="flex">
|
||||
<div class="flex-1">{{ d.title }}</div>
|
||||
<div class="ml-2">
|
||||
<ATag color="blue">{{d.product_code}}</ATag>
|
||||
</div>
|
||||
</div>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let timeout;
|
||||
let currentValue;
|
||||
import axios from '@/axios';
|
||||
function fetch(value, callback ,url) {
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
timeout = null;
|
||||
}
|
||||
currentValue = value;
|
||||
async function query() {
|
||||
let res = await axios.get(url, {params: {text_search: value}});
|
||||
callback(res.data.rows);
|
||||
}
|
||||
timeout = setTimeout(query, 300);
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'QuerySelect',
|
||||
props: [
|
||||
'vDecorator',
|
||||
'url'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
value: undefined,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
select(v){
|
||||
console.log("v ==> " , v);
|
||||
},
|
||||
handleSearch(value) {
|
||||
fetch(value, data => (this.data = data) , this.url);
|
||||
},
|
||||
handleChange(value) {
|
||||
this.value = value;
|
||||
fetch(value, data => (this.data = data) , this.url);
|
||||
this.$emit('change' , value)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log("this.url ==> " , this.url);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: EditorQuillEditor.vue
|
||||
Description: Quill editor
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<div id="extra-component-quill-editor-demo">
|
||||
|
||||
<p class="mb-4"><a href="https://surmon-china.github.io/vue-quill-editor/" target="_blank" rel="nofollow">Vue-Quill-Editor</a> editor component for Vue, support SPA and SSR. Read full documnetation <a href="https://quilljs.com/docs/quickstart/" target="_blank" rel="nofollow">here</a></p>
|
||||
|
||||
<quill-editor-theme-snow></quill-editor-theme-snow>
|
||||
<quill-editor-theme-bubble></quill-editor-theme-bubble>
|
||||
<quill-editor-custom-toolbar></quill-editor-custom-toolbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QuillEditorThemeSnow from './QuillEditorThemeSnow.vue'
|
||||
import QuillEditorThemeBubble from './QuillEditorThemeBubble.vue'
|
||||
import QuillEditorCustomToolbar from './QuillEditorCustomToolbar.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
QuillEditorThemeSnow,
|
||||
QuillEditorThemeBubble,
|
||||
QuillEditorCustomToolbar
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,157 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: QuillEditorCustomToolbar.vue
|
||||
Description: Quill editor with custom toolbar
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Custom Toolbar" code-toggler>
|
||||
<p class="mb-5">You have freedom to create your own custom toolbar</p>
|
||||
<div class="vx-row">
|
||||
<div class="vx-col w-full md:w-1/2">
|
||||
<quill-editor v-model="content" :options="editorOption">
|
||||
<div id="toolbar" slot="toolbar">
|
||||
|
||||
<!-- Add a bold button -->
|
||||
<button class="ql-bold">Bold</button>
|
||||
<button class="ql-italic">Italic</button>
|
||||
|
||||
<!-- Add font size dropdown -->
|
||||
<select class="ql-size">
|
||||
<option value="small"></option>
|
||||
|
||||
<!-- Note a missing, thus falsy value, is used to reset to default -->
|
||||
<option selected></option>
|
||||
<option value="large"></option>
|
||||
<option value="huge"></option>
|
||||
</select>
|
||||
|
||||
<select class="ql-font">
|
||||
<option selected="selected"></option>
|
||||
<option value="serif"></option>
|
||||
<option value="monospace"></option>
|
||||
</select>
|
||||
|
||||
<!-- Add subscript and superscript buttons -->
|
||||
<button class="ql-script" value="sub"></button>
|
||||
<button class="ql-script" value="super"></button>
|
||||
|
||||
<!-- You can also add your own -->
|
||||
<button style="width:auto" @click="customButtonClick">Click here</button>
|
||||
</div>
|
||||
</quill-editor>
|
||||
</div>
|
||||
|
||||
<div class="vx-col w-full md:w-1/2 flex">
|
||||
<prism class="rounded-lg"> {{ content }} </prism>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<quill-editor v-model="content" :options="editorOption">
|
||||
|
||||
<div id="toolbar" slot="toolbar">
|
||||
|
||||
<!-- Add a bold button -->
|
||||
<button class="ql-bold">Bold</button>
|
||||
<button class="ql-italic">Italic</button>
|
||||
|
||||
<!-- Add font size dropdown -->
|
||||
<select class="ql-size">
|
||||
<option value="small"></option>
|
||||
<!-- Note a missing, thus falsy value, is used to reset to default -->
|
||||
<option selected></option>
|
||||
<option value="large"></option>
|
||||
<option value="huge"></option>
|
||||
</select>
|
||||
|
||||
<select class="ql-font">
|
||||
<option selected="selected"></option>
|
||||
<option value="serif"></option>
|
||||
<option value="monospace"></option>
|
||||
</select>
|
||||
|
||||
<!-- Add subscript and superscript buttons -->
|
||||
<button class="ql-script" value="sub"></button>
|
||||
<button class="ql-script" value="super"></button>
|
||||
|
||||
<!-- You can also add your own -->
|
||||
<button style="width:auto" @click="customButtonClick">Click here</button>
|
||||
</div>
|
||||
</quill-editor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// require styles
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
import { quillEditor } from 'vue-quill-editor'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
editorOption: {
|
||||
modules: {
|
||||
toolbar: '#toolbar'
|
||||
}
|
||||
},
|
||||
content: `...`,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
quillEditor,
|
||||
},
|
||||
methods: {
|
||||
customButtonClick() {
|
||||
alert("Button clicked!");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// require styles
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
import { quillEditor } from 'vue-quill-editor'
|
||||
import Prism from 'vue-prism-component'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
editorOption: {
|
||||
modules: {
|
||||
toolbar: '#toolbar'
|
||||
}
|
||||
},
|
||||
content: `
|
||||
<h2><span class="ql-font-serif">Quill Rich Text Editor</span></h2><br />
|
||||
<p>Quill is a free, <a href="https://github.com/quilljs/quill/">open source</a> WYSIWYG editor built for the modern web. With its <a href="http://quilljs.com/docs/modules/">modular architecture</a> and expressive <a href="http://quilljs.com/docs/api/">API</a>, it is completely customizable to fit any need.</p><br />
|
||||
<iframe class="ql-video ql-align-center" src="https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0" width="560" height="238"></iframe>
|
||||
`
|
||||
}
|
||||
},
|
||||
components: {
|
||||
quillEditor,
|
||||
Prism
|
||||
},
|
||||
methods: {
|
||||
customButtonClick () {
|
||||
alert('Button clicked!')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: QuillEditorThemeBubble.vue
|
||||
Description: Quill editor with snow theme
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Theme Bubble" code-toggler>
|
||||
<p class="mb-5">Bubble is a simple tooltip based theme</p>
|
||||
<quill-editor v-model="content" :options="editorOption"></quill-editor>
|
||||
|
||||
<prism class="rounded-lg"> {{ content }} </prism>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<quill-editor v-model="content" :options="editorOption"></quill-editor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// require styles
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
import { quillEditor } from 'vue-quill-editor'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
editorOption: {
|
||||
theme: 'bubble',
|
||||
},
|
||||
content: `...`,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
quillEditor,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// require styles
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
import { quillEditor } from 'vue-quill-editor'
|
||||
import Prism from 'vue-prism-component'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
editorOption: {
|
||||
theme: 'bubble'
|
||||
},
|
||||
content: `
|
||||
<h2><span class="ql-font-serif">Quill Rich Text Editor</span></h2><br />
|
||||
<p>Quill is a free, <a href="https://github.com/quilljs/quill/">open source</a> WYSIWYG editor built for the modern web. With its <a href="http://quilljs.com/docs/modules/">modular architecture</a> and expressive <a href="http://quilljs.com/docs/api/">API</a>.</p><br />
|
||||
<iframe class="ql-video ql-align-center" src="https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0" width="560" height="238"></iframe>
|
||||
`
|
||||
}
|
||||
},
|
||||
components: {
|
||||
quillEditor,
|
||||
Prism
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,71 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: QuillEditorThemeSnow.vue
|
||||
Description: Quill editor with snow theme
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Theme Snow" code-toggler>
|
||||
<p class="mb-5">Snow is a clean, flat toolbar theme</p>
|
||||
<quill-editor v-model="content"></quill-editor>
|
||||
|
||||
<prism class="rounded-lg"> {{ content }} </prism>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<quill-editor v-model="content"></quill-editor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// require styles
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
import { quillEditor } from 'vue-quill-editor'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: `...`,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
quillEditor,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// require styles
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
import { quillEditor } from 'vue-quill-editor'
|
||||
import Prism from 'vue-prism-component'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
content: `
|
||||
<h2><span class="ql-font-serif">Quill Rich Text Editor</span></h2><br />
|
||||
<p>Quill is a free, <a href="https://github.com/quilljs/quill/">open source</a> WYSIWYG editor built for the modern web. With its <a href="http://quilljs.com/docs/modules/">modular architecture</a> and expressive <a href="http://quilljs.com/docs/api/">API</a>, it is completely customizable to fit any need.</p><br />
|
||||
<iframe class="ql-video ql-align-center" src="https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0" width="560" height="238"></iframe>
|
||||
`
|
||||
}
|
||||
},
|
||||
components: {
|
||||
quillEditor,
|
||||
Prism
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Select.vue
|
||||
Description: Select element (third-party) - Imports page portions
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<div id="extra-component-select-demo">
|
||||
<p class="mb-4"><a href="http://sagalbot.github.io/vue-select/" target="_blank" rel="nofollow">vue-select</a> is a native Vue.js select component that provides similar functionality to Select2. Read full documnetation <a href="http://sagalbot.github.io/vue-select/docs/" target="_blank" rel="nofollow">here</a></p>
|
||||
|
||||
<select-dropdown-options></select-dropdown-options>
|
||||
<select-selecting-values></select-selecting-values>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectDropdownOptions from './SelectDropdownOptions.vue'
|
||||
import SelectSelectingValues from './SelectSelectingValues.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SelectDropdownOptions,
|
||||
SelectSelectingValues
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: SelectDropdownOptions.vue
|
||||
Description: Dropdown options in component
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Dropdown Options">
|
||||
|
||||
<p>vue-select accepts arrays of strings or objects to use as options through the <code>options</code> prop</p>
|
||||
<div class="mt-5">
|
||||
<dropdown-options-basic></dropdown-options-basic>
|
||||
<dropdown-options-option-labels></dropdown-options-option-labels>
|
||||
</div>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DropdownOptionsBasic from './dropdown-options/DropdownOptionsBasic.vue'
|
||||
import DropdownOptionsOptionLabels from './dropdown-options/DropdownOptionsOptionLabels.vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
DropdownOptionsBasic,
|
||||
DropdownOptionsOptionLabels
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: SelectselectingValues.vue
|
||||
Description: Selecting value in select component
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Selecting Values">
|
||||
|
||||
<!-- <p>vue-select accepts arrays of strings or objects to use as options through the <code>options</code> prop</p> -->
|
||||
<div>
|
||||
<selecting-values-default></selecting-values-default>
|
||||
<selecting-values-single-multiple-selection></selecting-values-single-multiple-selection>
|
||||
<selecting-values-tagging></selecting-values-tagging>
|
||||
</div>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectingValuesDefault from './selecting-values/SelectingValuesDefault.vue'
|
||||
import SelectingValuesSingleMultipleSelection from './selecting-values/SelectingValuesSingleMultipleSelection.vue'
|
||||
import SelectingValuesTagging from './selecting-values/SelectingValuesTagging.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SelectingValuesDefault,
|
||||
SelectingValuesSingleMultipleSelection,
|
||||
SelectingValuesTagging
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DropdownOptionsBasic.vue
|
||||
Description: Basic dropdown options in select component
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Basic" code-toggler no-shadow card-border>
|
||||
|
||||
<div>
|
||||
<v-select :options="['foo','bar']" :dir="$vs.rtl ? 'rtl' : 'ltr'" />
|
||||
|
||||
<p class="my-5">When provided an array of objects, <code>vue-select</code> will display a single value of the object. By default, <code>vue-select</code> will look for a key named <code>label</code> on the object to use as display text</p>
|
||||
|
||||
<v-select :options="[{label: 'Foo', value: 'foo'}]" :dir="$vs.rtl ? 'rtl' : 'ltr'" />
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<v-select :options="['foo','bar']" :dir="$vs.rtl ? 'rtl' : 'ltr'" />
|
||||
<v-select :options="[{label: 'Foo', value: 'foo'}]" :dir="$vs.rtl ? 'rtl' : 'ltr'" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
'v-select': vSelect,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
'v-select': vSelect
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DropdownOptionsOptionLabels.vue
|
||||
Description: When option array have objects pass lable prop
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Option Labels" code-toggler no-shadow card-border>
|
||||
|
||||
<div>
|
||||
<p class="mb-3">When the options array contains objects, vue-select looks for the label key to display by default. You can set your own label to match your source data using the label prop</p>
|
||||
<v-select label="countryName" :options="countries" :dir="$vs.rtl ? 'rtl' : 'ltr'" />
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<v-select label="countryName" :options="countries" :dir="$vs.rtl ? 'rtl' : 'ltr'" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
|
||||
export default{
|
||||
data() {
|
||||
return {
|
||||
countries: [
|
||||
{
|
||||
countryCode: "DE",
|
||||
countryName: "Germany",
|
||||
},
|
||||
{
|
||||
countryCode: "AUS",
|
||||
countryName: "Australia",
|
||||
},
|
||||
{
|
||||
countryCode: "CA",
|
||||
countryName: "Canada",
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'v-select': vSelect,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
import Prism from 'vue-prism-component'
|
||||
|
||||
export default{
|
||||
data () {
|
||||
return {
|
||||
countries: [
|
||||
{
|
||||
countryCode: 'DE',
|
||||
countryName: 'Germany'
|
||||
},
|
||||
{
|
||||
countryCode: 'AUS',
|
||||
countryName: 'Australia'
|
||||
},
|
||||
{
|
||||
countryCode: 'CA',
|
||||
countryName: 'Canada'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'v-select': vSelect,
|
||||
Prism
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+78
@@ -0,0 +1,78 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: SelectingValueDefault.vue
|
||||
Description: Default way to selecting values
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Default" code-toggler no-shadow card-border>
|
||||
|
||||
<div>
|
||||
|
||||
<p class="mb-3">The most common use case for vue-select is to have the chosen value synced with a parent component. vue-select takes advantage of the v-model syntax to sync values with a parent</p>
|
||||
|
||||
<v-select v-model="selected" :options="options" :dir="$vs.rtl ? 'rtl' : 'ltr'" /><br>
|
||||
|
||||
<p>If you don't require the value to be synced, you can also pass the prop directly:</p>
|
||||
|
||||
<prism class="rounded-lg">
|
||||
<v-select :value="selected"></v-select>
|
||||
</prism>
|
||||
|
||||
<p class="mt-5">This method allows you to pre-select a value(s), without syncing any changes to the parent component. This is also very useful when using a state management tool, like Vuex</p>
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<v-select v-model="selected" :options="options" :dir="$vs.rtl ? 'rtl' : 'ltr'" /><br>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
|
||||
export default{
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{id: 1, label: 'foo'},
|
||||
{id: 3, label: 'bar'},
|
||||
{id: 2, label: 'baz'},
|
||||
],
|
||||
selected: {id: 3, label: 'bar'},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'v-select': vSelect,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
import Prism from 'vue-prism-component'
|
||||
|
||||
export default{
|
||||
data () {
|
||||
return {
|
||||
options: [
|
||||
{id: 1, label: 'foo'},
|
||||
{id: 3, label: 'bar'},
|
||||
{id: 2, label: 'baz'}
|
||||
],
|
||||
selected: {id: 3, label: 'bar'}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'v-select': vSelect,
|
||||
Prism
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: SelectingValuesSingleMultipleSelection.vue
|
||||
Description: Selecting single and multiple values
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Single/Multiple Selection" code-toggler no-shadow card-border>
|
||||
|
||||
<div>
|
||||
|
||||
<p class="mb-3">By default, vue-select supports choosing a single value. If you need multiple values, use the multiple prop</p>
|
||||
|
||||
<v-select multiple :closeOnSelect="false" v-model="selected" :options="options" :dir="$vs.rtl ? 'rtl' : 'ltr'" /><br>
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<v-select multiple :closeOnSelect="false" v-model="selected" :options="options" :dir="$vs.rtl ? 'rtl' : 'ltr'" /><br>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
|
||||
export default{
|
||||
data() {
|
||||
return {
|
||||
selected: ['foo','bar'],
|
||||
options: ['foo','bar','baz']
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'v-select': vSelect,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
|
||||
export default{
|
||||
data () {
|
||||
return {
|
||||
selected: ['foo', 'bar'],
|
||||
options: ['foo', 'bar', 'baz']
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'v-select': vSelect
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+67
@@ -0,0 +1,67 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: SelectingValueTagging.vue
|
||||
Description: add tagging in select
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Tagging" code-toggler no-shadow card-border>
|
||||
|
||||
<div>
|
||||
|
||||
<p class="mb-3">To allow input that's not present within the options, set the taggable prop to true. If you want new tags to be pushed to the options list, set push-tags to true</p><br>
|
||||
|
||||
<h6 class="mb-2">Vue Select - Taggable</h6>
|
||||
<v-select taggable :dir="$vs.rtl ? 'rtl' : 'ltr'" /><br>
|
||||
|
||||
<h6 class="mb-2">Vue Select - Taggable & Push-Tags</h6>
|
||||
<v-select taggable push-tags :dir="$vs.rtl ? 'rtl' : 'ltr'" />
|
||||
<small class="muted">Try adding a tag and removing it. It'll still be present within the options list.</small>
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<h6>Vue Select - Taggable</h6>
|
||||
<v-select taggable :dir="$vs.rtl ? 'rtl' : 'ltr'" /><br>
|
||||
|
||||
<h6>Vue Select - Taggable &amp; Push-Tags</h6>
|
||||
<v-select taggable push-tags :dir="$vs.rtl ? 'rtl' : 'ltr'" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
|
||||
export default{
|
||||
data() {
|
||||
return {
|
||||
options: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'v-select': vSelect,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
|
||||
export default{
|
||||
data () {
|
||||
return {
|
||||
options: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'v-select': vSelect
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,355 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: StarRatings.vue
|
||||
Description: Star Ratings demo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<div id="page-star-ratings-demo">
|
||||
|
||||
<div class="vx-row">
|
||||
<div class="vx-col w-full lg:w-1/2 mb-base">
|
||||
<vx-card title="Basic" class="overflow-auto" code-toggler>
|
||||
|
||||
<!-- DEFAULT -->
|
||||
<h6>Default</h6>
|
||||
<star-rating :rtl="$vs.rtl" />
|
||||
|
||||
<!-- HALF STAR -->
|
||||
<h6 class="mt-5">Half Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :increment="0.5"></star-rating>
|
||||
|
||||
<!-- PRESET STAR -->
|
||||
<h6 class="mt-5">Preset Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :rating="4"></star-rating>
|
||||
|
||||
<!-- FLUID STAR -->
|
||||
<h6 class="mt-5">Fluid Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :increment="0.01" :fixed-points="2"></star-rating>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<!-- DEFAULT -->
|
||||
<h6>Default</h6>
|
||||
<star-rating :rtl="$vs.rtl" />
|
||||
|
||||
<!-- HALF STAR -->
|
||||
<h6 class="mt-5">Half Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :increment="0.5"></star-rating>
|
||||
|
||||
<!-- PRESET STAR -->
|
||||
<h6 class="mt-5">Preset Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :rating="4"></star-rating>
|
||||
|
||||
<!-- FLUID STAR -->
|
||||
<h6 class="mt-5">Fluid Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :increment="0.01" :fixed-points="2"></star-rating>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StarRating from 'vue-star-rating'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StarRating
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</div>
|
||||
|
||||
<div class="vx-col w-full lg:w-1/2 mb-base">
|
||||
<vx-card title="Customizing" class="overflow-auto" code-toggler>
|
||||
|
||||
<!-- BORDERED -->
|
||||
<h6>Bordered Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :border-width="3"></star-rating>
|
||||
|
||||
<!-- STYLE RATING -->
|
||||
<h6 class="mt-5">Style Rating</h6>
|
||||
<star-rating :rtl="$vs.rtl" text-class="text-warning font-medium"></star-rating>
|
||||
|
||||
<!-- CUSTOM SHAPE -->
|
||||
<h6 class="mt-4">Custom Star Shape</h6>
|
||||
<star-rating :rtl="$vs.rtl" :border-width="4" border-color="#d8d8d8" :rounded-corners="true" :star-points="[23,2, 14,17, 0,19, 10,34, 7,50, 23,43, 38,50, 36,34, 46,19, 31,17]"></star-rating>
|
||||
|
||||
<h6 class="mt-5">Glowing Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :glow="10"></star-rating>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<!-- BORDERED -->
|
||||
<h6>Bordered Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :border-width="3"></star-rating>
|
||||
|
||||
<!-- STYLE RATING -->
|
||||
<h6 class="mt-5">Style Rating</h6>
|
||||
<star-rating :rtl="$vs.rtl" text-class="text-warning font-medium"></star-rating>
|
||||
|
||||
<!-- CUSTOM SHAPE -->
|
||||
<h6 class="mt-4">Custom Star Shape</h6>
|
||||
<star-rating :rtl="$vs.rtl" :border-width="4" border-color="#d8d8d8" :rounded-corners="true" :star-points="[23,2, 14,17, 0,19, 10,34, 7,50, 23,43, 38,50, 36,34, 46,19, 31,17]"></star-rating>
|
||||
|
||||
<h6 class="mt-5">Glowing Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :glow="10"></star-rating>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StarRating from 'vue-star-rating'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StarRating
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vx-row">
|
||||
<div class="vx-col w-full lg:w-1/2 mb-base">
|
||||
<vx-card title="Sizing" class="overflow-auto" code-toggler>
|
||||
|
||||
<!-- SMALL STARS -->
|
||||
<h6>Small Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :star-size="20"></star-rating>
|
||||
|
||||
<!-- LARGE STARS -->
|
||||
<h6 class="mt-5">Big Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :star-size="80"></star-rating>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<!-- SMALL STARS -->
|
||||
<h6>Small Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :star-size="20"></star-rating>
|
||||
|
||||
<!-- LARGE STARS -->
|
||||
<h6 class="mt-5">Big Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :star-size="80"></star-rating>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StarRating from 'vue-star-rating'
|
||||
export default {
|
||||
components: {
|
||||
StarRating
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</div>
|
||||
<div class="vx-col w-full lg:w-1/2 mb-base">
|
||||
<vx-card title="Changing color" class="overflow-auto" code-toggler>
|
||||
|
||||
<!-- RED STAR -->
|
||||
<h6>Red Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" active-color="#EA5455"></star-rating>
|
||||
|
||||
<!-- VIBRANT STAR -->
|
||||
<h6 class="mt-4">Vibrant Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" inactive-color="#b9b4f9" active-color="#7367f0"></star-rating>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<!-- RED STAR -->
|
||||
<h6>Red Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" active-color="#EA5455"></star-rating>
|
||||
|
||||
<!-- VIBRANT STAR -->
|
||||
<h6 class="mt-4">Vibrant Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" inactive-color="#b9b4f9" active-color="#7367f0"></star-rating>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StarRating from 'vue-star-rating'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StarRating
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vx-row">
|
||||
<div class="vx-col w-full lg:w-1/2 mb-base">
|
||||
<vx-card title="Capture, Reset or Hide Rating" class="overflow-auto" code-toggler>
|
||||
|
||||
<!-- CAPTURE RATING -->
|
||||
<h6>Capture Rating</h6>
|
||||
<star-rating :rtl="$vs.rtl" :show-rating="false" @rating-selected="setRating"></star-rating>
|
||||
<div class="font-semibold">{{rating}}</div>
|
||||
|
||||
<!-- CAPTURE ON HOVER -->
|
||||
<h6 class="mt-5">Capture Mouse Over Rating</h6>
|
||||
<div @mouseleave="showCurrentRating(0)" style="display:inline-block;">
|
||||
<star-rating :rtl="$vs.rtl" :show-rating="false" @current-rating="showCurrentRating" @rating-selected="setCurrentSelectedRating" :increment="0.5"></star-rating>
|
||||
</div>
|
||||
<div class="font-semibold">{{currentRating}}</div>
|
||||
|
||||
<!-- RESET WTIH V-MODEL -->
|
||||
<h6 class="mt-5">Resetable stars with v-model (Vue 2.2+)</h6>
|
||||
<star-rating :rtl="$vs.rtl" v-model="boundRating"></star-rating>
|
||||
<div class="font-semibold"><a @click="boundRating = 0;" class="cursor-pointer">Reset Rating</a></div>
|
||||
|
||||
<!-- HIDE RATIG -->
|
||||
<h6 class="mt-5">Hide Rating</h6>
|
||||
<star-rating :rtl="$vs.rtl" :show-rating="false"></star-rating>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<!-- CAPTURE RATING -->
|
||||
<h6>Capture Rating</h6>
|
||||
<star-rating :rtl="$vs.rtl" :show-rating="false" @rating-selected="setRating"></star-rating>
|
||||
<div class="font-semibold">{{rating}}</div>
|
||||
|
||||
<!-- CAPTURE ON HOVER -->
|
||||
<h6 class="mt-5">Capture Mouse Over Rating</h6>
|
||||
<div @mouseleave="showCurrentRating(0)" style="display:inline-block;">
|
||||
<star-rating :rtl="$vs.rtl" :show-rating="false" @current-rating="showCurrentRating" @rating-selected="setCurrentSelectedRating" :increment="0.5"></star-rating>
|
||||
</div>
|
||||
<div class="font-semibold">{{currentRating}}</div>
|
||||
|
||||
<!-- RESET WTIH V-MODEL -->
|
||||
<h6 class="mt-5">Resetable stars with v-model (Vue 2.2+)</h6>
|
||||
<star-rating :rtl="$vs.rtl" v-model="boundRating"></star-rating>
|
||||
<div class="font-semibold"><a @click="boundRating = 0;" class="cursor-pointer">Reset Rating</a></div>
|
||||
|
||||
<!-- HIDE RATIG -->
|
||||
<h6 class="mt-5">Hide Rating</h6>
|
||||
<star-rating :rtl="$vs.rtl" :show-rating="false"></star-rating>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StarRating from 'vue-star-rating'
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
setRating: function(rating) {
|
||||
this.rating = "You have Selected: " + rating + " stars";
|
||||
},
|
||||
showCurrentRating: function(rating) {
|
||||
this.currentRating = (rating === 0) ? this.currentSelectedRating : "Click to select " + rating + " stars"
|
||||
},
|
||||
setCurrentSelectedRating: function(rating) {
|
||||
this.currentSelectedRating = "You have Selected: " + rating + " stars";
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
rating: "No Rating Selected",
|
||||
currentRating: "No Rating",
|
||||
currentSelectedRating: "No Current Rating",
|
||||
boundRating: 3,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
StarRating
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</div>
|
||||
|
||||
<div class="vx-col w-full lg:w-1/2 mb-base">
|
||||
<vx-card title="Other useful options" class="overflow-auto" code-toggler>
|
||||
|
||||
<!-- NON ROUNDED -->
|
||||
<h6>Non rounded start rating</h6>
|
||||
<star-rating :rtl="$vs.rtl" :rating="4.67" :round-start-rating="false"></star-rating>
|
||||
|
||||
<!-- READ ONLY -->
|
||||
<h6 class="mt-5">Read Only Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :rating="3.8" :read-only="true" :increment="0.01"></star-rating>
|
||||
|
||||
<!-- LOTS OF STARS -->
|
||||
<h6 class="mt-5">Lots of stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :max-rating="10" :star-size="20"></star-rating>
|
||||
|
||||
<!-- INLINE -->
|
||||
<h6 class="mt-5">Inline Stars</h6> Rated
|
||||
<star-rating :rtl="$vs.rtl" :inline="true" :star-size="20" :read-only="true" :show-rating="false" :rating="5"></star-rating> by our customers.
|
||||
|
||||
<!-- RTL -->
|
||||
<h6 class="mt-5">RTL Stars</h6>
|
||||
<star-rating :rtl="true" :increment="0.5"></star-rating>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<!-- NON ROUNDED -->
|
||||
<h6>Non rounded start rating</h6>
|
||||
<star-rating :rtl="$vs.rtl" :rating="4.67" :round-start-rating="false"></star-rating>
|
||||
|
||||
<!-- READ ONLY -->
|
||||
<h6 class="mt-5">Read Only Stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :rating="3.8" :read-only="true" :increment="0.01"></star-rating>
|
||||
|
||||
<!-- LOTS OF STARS -->
|
||||
<h6 class="mt-5">Lots of stars</h6>
|
||||
<star-rating :rtl="$vs.rtl" :max-rating="10" :star-size="20"></star-rating>
|
||||
|
||||
<!-- INLINE -->
|
||||
<h6 class="mt-5">Inline Stars</h6> Rated
|
||||
<star-rating :rtl="$vs.rtl" :inline="true" :star-size="20" :read-only="true" :show-rating="false" :rating="5"></star-rating> by our customers.
|
||||
|
||||
<!-- RTL -->
|
||||
<h6 class="mt-5">RTL Stars</h6>
|
||||
<star-rating :rtl="true" :increment="0.5"></star-rating>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StarRating from 'vue-star-rating'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StarRating
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StarRating from 'vue-star-rating'
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
setRating (rating) {
|
||||
this.rating = `You have Selected: ${ rating } stars`
|
||||
},
|
||||
showCurrentRating (rating) {
|
||||
this.currentRating = rating === 0 ? this.currentSelectedRating : `Click to select ${ rating } stars`
|
||||
},
|
||||
setCurrentSelectedRating (rating) {
|
||||
this.currentSelectedRating = `You have Selected: ${ rating } stars`
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
rating: 'No Rating Selected',
|
||||
currentRating: 'No Rating',
|
||||
currentSelectedRating: 'No Current Rating',
|
||||
boundRating: 3
|
||||
}
|
||||
},
|
||||
components: {
|
||||
StarRating
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Tree.vue
|
||||
Description: Tree demo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
<template>
|
||||
<div id="page-tree-demo">
|
||||
<tree-dropdown></tree-dropdown>
|
||||
<tree-search-tree></tree-search-tree>
|
||||
<tree-async-tree></tree-async-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TreeDropdown from './TreeDropdown.vue'
|
||||
import TreeSearchTree from './TreeSearchTree.vue'
|
||||
import TreeAsyncTree from './TreeAsyncTree.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TreeDropdown,
|
||||
TreeSearchTree,
|
||||
TreeAsyncTree
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<vx-card title="Async Tree" code-toggler>
|
||||
<v-tree ref="tree" :data="treeData" :multiple="false" @node-check="nodechecked" @async-load-nodes="asyncLoad"/>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<tempalte>
|
||||
<v-tree ref="tree" :data='treeData' :multiple='false' @node-check='nodechecked' @async-load-nodes='asyncLoad'/>
|
||||
</tempalte>
|
||||
|
||||
<script>
|
||||
import { VTree, VSelectTree} from 'vue-tree-halower'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
initSelected: ['node-1'],
|
||||
treeData: [{
|
||||
title: 'node1',
|
||||
expanded: false,
|
||||
async: true
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
nodechecked (node, v) {
|
||||
alert('that a node-check envent ...' + node.title + v)
|
||||
},
|
||||
async asyncLoad (node) {
|
||||
const {checked = false} = node
|
||||
this.$set(node, 'loading', true)
|
||||
let pro = await new Promise(resolve => {
|
||||
setTimeout(resolve, 2000, [{title: 'test1', async: true}, {title: 'test2', async: true}, {title: 'test3'}])
|
||||
})
|
||||
if (!node.hasOwnProperty('children')) {
|
||||
this.$set(node, 'children', [])
|
||||
}
|
||||
node.children.push(...pro)
|
||||
this.$set(node, 'loading', false)
|
||||
if (checked) {
|
||||
this.$refs.tree.childCheckedHandle(node, checked)
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
VTree,
|
||||
VSelectTree
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VTree, VSelectTree} from 'vue-tree-halower'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
initSelected: ['node-1'],
|
||||
treeData: [
|
||||
{
|
||||
title: 'node1',
|
||||
expanded: false,
|
||||
async: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
nodechecked (node, v) {
|
||||
alert(`that a node-check envent ...${ node.title }${v}`)
|
||||
},
|
||||
async asyncLoad (node) {
|
||||
const {checked = false} = node
|
||||
this.$set(node, 'loading', true)
|
||||
const pro = await new Promise(resolve => {
|
||||
setTimeout(resolve, 2000, [{title: 'test1', async: true}, {title: 'test2', async: true}, {title: 'test3'}])
|
||||
})
|
||||
if (!node.hasOwnProperty('children')) {
|
||||
this.$set(node, 'children', [])
|
||||
}
|
||||
node.children.push(...pro)
|
||||
this.$set(node, 'loading', false)
|
||||
if (checked) {
|
||||
this.$refs.tree.childCheckedHandle(node, checked)
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VTree,
|
||||
VSelectTree
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<vx-card title="Dropdown Tree" code-toggler>
|
||||
<v-select-tree :data="treeData" v-model="initSelected" :multiple="true"/>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<v-select-tree :data='treeData' v-model='initSelected' :multiple="true"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VTree, VSelectTree} from 'vue-tree-halower'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
initSelected: ['node-1'],
|
||||
treeData: [{
|
||||
title: 'node1',
|
||||
expanded: true,
|
||||
children: [{
|
||||
title: 'node 1-1',
|
||||
expanded: true,
|
||||
children: [{
|
||||
title: 'node 1-1-1'
|
||||
}, {
|
||||
title: 'node 1-1-2'
|
||||
}, {
|
||||
title: 'node 1-1-3'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VTree,
|
||||
VSelectTree
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/scss/vuexy/extraComponents/tree.scss";
|
||||
|
||||
.tree-box{
|
||||
background: #fff;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.search-input {
|
||||
margin-top: 10px;
|
||||
width: 98%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.rmNode{
|
||||
background-color: rgba(var(--vs-danger),0.15);
|
||||
color: rgba(var(--vs-danger),1);
|
||||
line-height: 13px;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VTree, VSelectTree} from 'vue-tree-halower'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
initSelected: ['node-1'],
|
||||
treeData: [
|
||||
{
|
||||
title: 'node1',
|
||||
expanded: true,
|
||||
children: [
|
||||
{
|
||||
title: 'node 1-1',
|
||||
expanded: true,
|
||||
children: [
|
||||
{
|
||||
title: 'node 1-1-1'
|
||||
}, {
|
||||
title: 'node 1-1-2'
|
||||
}, {
|
||||
title: 'node 1-1-3'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VTree,
|
||||
VSelectTree
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/scss/vuexy/extraComponents/tree.scss";
|
||||
|
||||
.tree-box{
|
||||
background: #fff;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.search-input {
|
||||
margin-top: 10px;
|
||||
width: 98%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.rmNode{
|
||||
background-color: rgba(var(--vs-danger),0.15) !important;
|
||||
color: rgba(var(--vs-danger),1) !important;
|
||||
line-height: 13px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<vx-card title="Search Tree" code-toggler>
|
||||
<vs-input class="inputx tree-search-input float-left mr-2" placeholder="Search..." v-model.lazy="searchword" />
|
||||
<vs-button color="primary" type="filled" @click="search" class="mb-3">Search</vs-button>
|
||||
<v-tree ref="tree" :canDeleteRoot="true" :data="treeData" :draggable="true" :tpl="tpl" :halfcheck="true" :multiple="true"/>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<vs-input class="inputx tree-search-input float-left mr-2" placeholder="Search..." v-model.lazy="searchword" />
|
||||
<vs-button color="primary" type="filled" @click="search" class="mb-3">Search</vs-button>
|
||||
<v-tree ref='tree' :canDeleteRoot="true" :data='treeData' :draggable='true' :tpl='tpl' :halfcheck='true' :multiple="true"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VTree, VSelectTree} from 'vue-tree-halower'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchword: '',
|
||||
treeData: [{
|
||||
title: 'node1',
|
||||
expanded: true,
|
||||
children: [{
|
||||
title: 'node 1-1',
|
||||
expanded: true,
|
||||
children: [{
|
||||
title: 'node 1-1-1'
|
||||
}, {
|
||||
title: 'node 1-1-2'
|
||||
}, {
|
||||
title: 'node 1-1-3'
|
||||
}]
|
||||
}, {
|
||||
title: 'node 1-2',
|
||||
children: [{
|
||||
title: "<span style='color: red'>node 1-2-1</span>"
|
||||
}, {
|
||||
title: "<span style='color: red'>node 1-2-2</span>"
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
search () {
|
||||
this.$refs.tree.searchNodes(this.searchword)
|
||||
},
|
||||
tpl (...args) {
|
||||
let {0: node, 2: parent, 3: index} = args
|
||||
let titleClass = node.selected ? 'node-title node-selected' : 'node-title'
|
||||
if (node.searched) titleClass += ' node-searched'
|
||||
return <span>
|
||||
<span class="tree-expand" onClick={() => this.$refs.tree.addNode(node, {title: 'sync node'})}>+</span>
|
||||
<span class={titleClass} domPropsInnerHTML={node.title} onClick={() => {
|
||||
this.$refs.tree.nodeSelected(node)
|
||||
}}></span>
|
||||
<button class="btn-async text-warning border-none cursor-pointer px-2 py-1 mr-2 rounded" onClick={() => this.asyncLoad(node)}>async</button>
|
||||
<button class="btn-delete text-danger border-none cursor-pointer px-2 py-1 rounded" onClick={() => this.$refs.tree.delNode(node, parent, index)}>delete</button>
|
||||
</span>
|
||||
},
|
||||
async asyncLoad (node) {
|
||||
const {checked = false} = node
|
||||
this.$set(node, 'loading', true)
|
||||
let pro = new Promise(resolve => {
|
||||
setTimeout(resolve, 2000, ['async node1', 'async node2'])
|
||||
})
|
||||
this.$refs.tree.addNodes(node, await pro)
|
||||
this.$set(node, 'loading', false)
|
||||
if (checked) {
|
||||
this.$refs.tree.childCheckedHandle(node, checked)
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
VTree,
|
||||
VSelectTree
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/scss/vuexy/extraComponents/tree.scss";
|
||||
|
||||
button.btn-async{
|
||||
background: rgba(var(--vs-warning),0.15);
|
||||
}
|
||||
|
||||
button.btn-delete{
|
||||
background: rgba(var(--vs-danger),0.15);
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VTree, VSelectTree} from 'vue-tree-halower'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
searchword: '',
|
||||
treeData: [
|
||||
{
|
||||
title: 'node1',
|
||||
expanded: true,
|
||||
children: [
|
||||
{
|
||||
title: 'node 1-1',
|
||||
expanded: true,
|
||||
children: [
|
||||
{
|
||||
title: 'node 1-1-1'
|
||||
}, {
|
||||
title: 'node 1-1-2'
|
||||
}, {
|
||||
title: 'node 1-1-3'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
title: 'node 1-2',
|
||||
children: [
|
||||
{
|
||||
title: '<span style=\'color: red\'>node 1-2-1</span>'
|
||||
}, {
|
||||
title: '<span style=\'color: red\'>node 1-2-2</span>'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
search () {
|
||||
this.$refs.tree.searchNodes(this.searchword)
|
||||
},
|
||||
tpl (...args) {
|
||||
const {0: node, 2: parent, 3: index} = args
|
||||
let titleClass = node.selected ? 'node-title node-selected' : 'node-title'
|
||||
if (node.searched) titleClass += ' node-searched'
|
||||
return <span>
|
||||
<span class="tree-expand" onClick={() => this.$refs.tree.addNode(node, {title: 'sync node'})}>+</span>
|
||||
<span class={titleClass} domPropsInnerHTML={node.title} onClick={() => {
|
||||
this.$refs.tree.nodeSelected(node)
|
||||
}}></span>
|
||||
<button class="btn-async text-warning border-none cursor-pointer px-2 py-1 mr-2 rounded" onClick={() => this.asyncLoad(node)}>async</button>
|
||||
<button class="btn-delete text-danger border-none cursor-pointer px-2 py-1 rounded" onClick={() => this.$refs.tree.delNode(node, parent, index)}>delete</button>
|
||||
</span>
|
||||
},
|
||||
async asyncLoad (node) {
|
||||
const {checked = false} = node
|
||||
this.$set(node, 'loading', true)
|
||||
const pro = new Promise(resolve => {
|
||||
setTimeout(resolve, 2000, ['async node1', 'async node2'])
|
||||
})
|
||||
this.$refs.tree.addNodes(node, await pro)
|
||||
this.$set(node, 'loading', false)
|
||||
if (checked) {
|
||||
this.$refs.tree.childCheckedHandle(node, checked)
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VTree,
|
||||
VSelectTree
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/scss/vuexy/extraComponents/tree.scss";
|
||||
|
||||
button.btn-async{
|
||||
background: rgba(var(--vs-warning),0.15);
|
||||
}
|
||||
|
||||
button.btn-delete{
|
||||
background: rgba(var(--vs-danger),0.15);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Alert.vue
|
||||
Description: Alert
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<div id="alert-demo">
|
||||
<alert-default></alert-default>
|
||||
<alert-title></alert-title>
|
||||
<alert-color></alert-color>
|
||||
<alert-closable></alert-closable>
|
||||
<alert-icon></alert-icon>
|
||||
<alert-example></alert-example>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AlertDefault from './AlertDefault.vue'
|
||||
import AlertTitle from './AlertTitle.vue'
|
||||
import AlertColor from './AlertColor.vue'
|
||||
import AlertClosable from './AlertClosable.vue'
|
||||
import AlertIcon from './AlertIcon.vue'
|
||||
import AlertExample from './AlertExample.vue'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
AlertDefault,
|
||||
AlertTitle,
|
||||
AlertColor,
|
||||
AlertClosable,
|
||||
AlertIcon,
|
||||
AlertExample
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,56 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: AlertClosable.vue
|
||||
Description: Create closable alert
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Closable" code-toggler>
|
||||
|
||||
<p class="mb-2">You can show and hide the alert by means of <code>active.sync</code> and a Boolean bind as value</p>
|
||||
<p>The property to determine if the alert can be closed is <code>closable</code></p>
|
||||
|
||||
<vs-button @click="active1=!active1" color="primary" type="filled" class="mt-5 mr-4 mb-4">{{ !active1 ? 'Open Alert' : 'Close Alert' }} 1</vs-button>
|
||||
<vs-button @click="active2=!active2" color="primary" type="filled" class="mb-5">{{ !active2 ? 'Open Alert' : 'Close Alert' }} 2</vs-button>
|
||||
|
||||
<vs-alert :active.sync="active1" closable icon-pack="feather" close-icon="icon-x">
|
||||
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
|
||||
</vs-alert>
|
||||
|
||||
<p class="my-5">You can also change the icon used for the close buton on the alerts</p>
|
||||
|
||||
<div class="mt-5"></div>
|
||||
<vs-alert :active.sync="active2" closable close-icon="icon-x-circle" icon-pack="feather">
|
||||
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
|
||||
</vs-alert>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-button @click="active1=!active1">{{ !active1 ? 'Open Alert' : 'Close Alert' }} 1</vs-button>
|
||||
<vs-button @click="active2=!active2">{{ !active2 ? 'Open Alert' : 'Close Alert' }} 2</vs-button>
|
||||
|
||||
<vs-alert :active.sync="active1" closable icon-pack="feather" close-icon="icon-x">
|
||||
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
|
||||
</vs-alert>
|
||||
|
||||
<vs-alert :active.sync="active2" closable close-icon="icon-x-circle" icon-pack="feather">
|
||||
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
|
||||
</vs-alert>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data () {
|
||||
return {
|
||||
active1: true,
|
||||
active2: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,71 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: AlertColor.vue
|
||||
Description: Change color alert
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Color" code-toggler>
|
||||
|
||||
<p>You can change the color of the alert with the property <code>color</code>. You are able to use the Main Colors or <strong>RGB</strong> and <strong>HEX</strong> colors</p>
|
||||
|
||||
<vs-alert icon="warning" active="true" color="warning" class="my-5">
|
||||
<span>Only <strong>RGB</strong> and <strong>HEX</strong> colors are supported.</span>
|
||||
</vs-alert>
|
||||
|
||||
<vs-alert color="success" title="Success" active="true" class="mt-3">
|
||||
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
|
||||
</vs-alert>
|
||||
|
||||
<vs-alert color="danger" title="Danger" active="true" class="mt-3">
|
||||
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
|
||||
</vs-alert>
|
||||
|
||||
<vs-alert color="warning" title="Warning" active="true" class="mt-3">
|
||||
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
|
||||
</vs-alert>
|
||||
|
||||
<vs-alert color="dark" title="Dark" active="true" class="mt-3">
|
||||
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
|
||||
</vs-alert>
|
||||
|
||||
<vs-alert color="rgb(41, 147, 138)" title="RGB" active="true" class="mt-3">
|
||||
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
|
||||
</vs-alert>
|
||||
|
||||
<vs-alert color="#842993" title="HEX" active="true" class="mt-3">
|
||||
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
|
||||
</vs-alert>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-alert color="success" title="Success" active="true">
|
||||
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
|
||||
</vs-alert>
|
||||
|
||||
<vs-alert color="danger" title="Danger" active="true">
|
||||
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
|
||||
</vs-alert>
|
||||
|
||||
<vs-alert color="warning" title="Warning" active="true">
|
||||
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
|
||||
</vs-alert>
|
||||
|
||||
<vs-alert color="dark" title="Dark" active="true">
|
||||
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
|
||||
</vs-alert>
|
||||
|
||||
<vs-alert color="rgb(41, 147, 138)" title="RGB" active="true">
|
||||
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
|
||||
</vs-alert>
|
||||
|
||||
<vs-alert color="#842993" title="HEX" active="true">
|
||||
Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.
|
||||
</vs-alert>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: AlertDefault.vue
|
||||
Description: Rendering of default alert
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Default" code-toggler>
|
||||
|
||||
<p>To add a notification use the <code>vs-alert</code> component. For the main parameter, pass the active property that determines if the <code>alert</code> is visible or not</p>
|
||||
|
||||
<vs-alert active="true" class="mt-5">
|
||||
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
|
||||
</vs-alert>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-alert active="true">
|
||||
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
|
||||
</vs-alert>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: AlertExample.vue
|
||||
Description: Example of validation using alert
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<vx-card title="Example" code-toggler>
|
||||
|
||||
<p>An example would be to have an input and when a condition is met show the <strong>vs-alert</strong></p>
|
||||
|
||||
<vs-input label="Enter only numbers" placeholder="0123456789" v-model="value1" class="my-4" />
|
||||
<vs-alert :active="inputValid" color="danger" icon-pack="feather" icon="icon-info" >
|
||||
<span>the value is <b>invalid</b> you can only enter numbers</span>
|
||||
</vs-alert>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<vs-input label="Enter only numbers" placeholder="0123456789" v-model="value1" class="my-4" />
|
||||
<vs-alert :active="inputValid" color="danger" icon-pack="feather" icon="icon-info">
|
||||
<span>the value is <b>invalid</b> you can only enter numbers</span>
|
||||
</vs-alert>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inputValid() {
|
||||
if (/^\d+$/.test(this.value1)) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value1: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inputValid () {
|
||||
if (/^\d+$/.test(this.value1)) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: AlertIcon.vue
|
||||
Description: Change icon in alert
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Icon" code-toggler>
|
||||
|
||||
<p>You can add to the alert a descriptive icon with the property <code>icon</code> and as a value the icon name of the icon in the currently selected icon pack. (Default is <a href="https://material.io/icons/" target="_blank" rel="nofollow">Material Icons</a>)</p>
|
||||
|
||||
<vs-alert active="true" class="mt-5" icon-pack="feather" icon="icon-star">
|
||||
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
|
||||
</vs-alert>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-alert active="true" class="mt-5" icon-pack="feather" icon="icon-star">
|
||||
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
|
||||
</vs-alert>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: AlertTitle.vue
|
||||
Description: Alert with title
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Title" code-toggler>
|
||||
|
||||
<p>Add a title to the alert with the property <code>title</code></p>
|
||||
|
||||
<vs-alert title="Lorem ipsum dolor sit amet" color="rgb(231, 154, 23)" active="true" class="mt-5 text-warning">
|
||||
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
|
||||
</vs-alert>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-alert title="Lorem ipsum dolor sit amet" color="rgb(231, 154, 23)" active="true" class="mt-5 text-warning">
|
||||
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
|
||||
</vs-alert>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Avatar.vue
|
||||
Description: Avatars
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<div id="avatar-demo">
|
||||
<avatar-default></avatar-default>
|
||||
<avatar-size></avatar-size>
|
||||
<avatar-color></avatar-color>
|
||||
<avatar-with-badge></avatar-with-badge>
|
||||
<avatar-icon></avatar-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AvatarDefault from './AvatarDefault.vue'
|
||||
import AvatarSize from './AvatarSize.vue'
|
||||
import AvatarColor from './AvatarColor.vue'
|
||||
import AvatarWithBadge from './AvatarWithBadge.vue'
|
||||
import AvatarIcon from './AvatarIcon.vue'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
AvatarDefault,
|
||||
AvatarSize,
|
||||
AvatarColor,
|
||||
AvatarWithBadge,
|
||||
AvatarIcon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: AvatarColor.vue
|
||||
Description: Change color of avatars
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Color" code-toggler>
|
||||
|
||||
<p>You can change the Avatar's color by using the property <code>color</code>. If needed you could also change the text's color with the property <code>text-color</code></p>
|
||||
|
||||
<vs-alert color="primary" icon="new_releases" active="true" class="mt-5">
|
||||
<span>If the text has more than 5 letters, only the first letter will be shown as in the second avatar, the name is <code>Luis Daniel</code> and only the letters LD will be shown if the word contains spaces the initial of each one is added.</span>
|
||||
</vs-alert>
|
||||
|
||||
<div class="demo-alignment mt-5">
|
||||
|
||||
<vs-avatar color="primary" text="primary"/>
|
||||
<vs-avatar color="success" text="success"/>
|
||||
<vs-avatar color="danger" text="danger"/>
|
||||
<vs-avatar color="warning" text="warning"/>
|
||||
<vs-avatar color="dark" text="dark"/>
|
||||
<vs-avatar color="rgb(200, 21, 129)" text="RGB"/>
|
||||
<vs-avatar color="#18cd5b" text="HEX"/>
|
||||
<vs-avatar color="#26302a" text-color="rgb(246, 190, 16)" text="HEX RGB"/>
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-avatar color="primary" text="primary"/>
|
||||
<vs-avatar color="success" text="success"/>
|
||||
<vs-avatar color="danger" text="danger"/>
|
||||
<vs-avatar color="warning" text="warning"/>
|
||||
<vs-avatar color="dark" text="dark"/>
|
||||
<vs-avatar color="rgb(200, 21, 129)" text="RGB"/>
|
||||
<vs-avatar color="#18cd5b" text="HEX"/>
|
||||
<vs-avatar color="#26302a" text-color="rgb(246, 190, 16)" text="HEX RGB"/>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: AvatarDefault.vue
|
||||
Description: Rendering of default avatar
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Default" code-toggler>
|
||||
|
||||
<p>Often you need to add an user's avatar to your app. In order to make this we have the component <code>vs-avatar</code></p>
|
||||
<p>To add an internal text value such as <code>Luis</code> use the <code>text</code> property</p>
|
||||
|
||||
<vs-alert color="primary" icon="new_releases" active="true" class="mt-5">
|
||||
<span>If the text has more than 5 letters, only the first letter will be shown as in the second avatar, the name is <code>Luis Daniel</code> and only the letters LD will be shown if the word contains spaces the initial of each one is added.</span>
|
||||
</vs-alert>
|
||||
|
||||
<div class="demo-alignment mt-5">
|
||||
|
||||
<vs-avatar />
|
||||
<vs-avatar text="Luis Daniel"/>
|
||||
<vs-avatar text="Luisd"/>
|
||||
<vs-avatar src="https://i.imgur.com/ezM6SJ5.png"/>
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-avatar />
|
||||
<vs-avatar text="Luis Daniel"/>
|
||||
<vs-avatar text="Luisd"/>
|
||||
<vs-avatar src="https://i.imgur.com/ezM6SJ5.png"/>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: AvatarIcon.vue
|
||||
Description: Change icon of avatar
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Icon" code-toggler>
|
||||
|
||||
<p>You can change the main icon of the Avatar with the property <code>icon</code></p>
|
||||
|
||||
<vs-alert color="primary" icon="new_releases" active="true" class="mt-5">
|
||||
<p>Vuesax uses the <strong>Google Material Icons</strong> font library by default. For a list of all available icons, visit the official <a href="https://material.io/icons/" target="_blank">Material Icons page</a>. Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.</p>
|
||||
|
||||
<p>This icon is only displayed when there is no property as <code>text</code> or <code>src</code></p>
|
||||
</vs-alert>
|
||||
|
||||
<div class="demo-alignment mt-5">
|
||||
|
||||
<vs-avatar icon-pack="feather" icon="icon-user" />
|
||||
<vs-avatar color="primary" icon-pack="feather" icon="icon-calendar" />
|
||||
<vs-avatar color="success" icon-pack="feather" icon="icon-inbox" />
|
||||
<vs-avatar color="danger" icon-pack="feather" icon="icon-camera" />
|
||||
<vs-avatar color="warning" icon-pack="feather" icon="icon-award" />
|
||||
<vs-avatar color="dark" icon-pack="feather" icon="icon-code" />
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-avatar icon-pack="feather" icon="icon-user" />
|
||||
|
||||
<vs-avatar color="primary" icon-pack="feather" icon="icon-calendar" />
|
||||
|
||||
<vs-avatar color="success" icon-pack="feather" icon="icon-inbox" />
|
||||
|
||||
<vs-avatar color="danger" icon-pack="feather" icon="icon-camera" />
|
||||
|
||||
<vs-avatar color="warning" icon-pack="feather" icon="icon-award" />
|
||||
|
||||
<vs-avatar color="dark" icon-pack="feather" icon="icon-code" />
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: AvatarSize.vue
|
||||
Description: Change size of avatars
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="size" code-toggler>
|
||||
|
||||
<p>You can change the size of the Avatar with the property size the allowed values are:</p>
|
||||
<vx-list :list="['large', 'small', 'Custom measures']"></vx-list>
|
||||
|
||||
<vs-alert color="primary" icon="new_releases" active="true" class="mb-1">
|
||||
<span>In the example the last avatar has the custom size of <code>70px</code> the added value will be the avatar's <strong>height</strong> and <strong>width</strong></span>
|
||||
</vs-alert>
|
||||
|
||||
<div class="demo-alignment mt-5">
|
||||
|
||||
<vs-avatar size="small" />
|
||||
<vs-avatar text="Luis Daniel"/>
|
||||
<vs-avatar size="large" src="https://i.imgur.com/ezM6SJ5.png"/>
|
||||
<vs-avatar size="70px" src="https://i.imgur.com/ezM6SJ5.png"/>
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-avatar size="small" />
|
||||
<vs-avatar text="Luis Daniel"/>
|
||||
<vs-avatar size="large" src="https://i.imgur.com/ezM6SJ5.png"/>
|
||||
<vs-avatar size="70px" src="https://i.imgur.com/ezM6SJ5.png"/>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: AvatarWithBadge.vue
|
||||
Description: Display avatar with badge
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="With Badge" code-toggler>
|
||||
|
||||
<p>You can add a notification label to the avatar, either a reference point or a number with the property <code>badge</code></p>
|
||||
<p>You could also change the badge's color by using the property <code>badge-color</code>. You are able to use the <router-link to="/ui-elements/colors">Main Colors</router-link> or <strong>RGB</strong> and <strong>HEX</strong> colors.</p>
|
||||
|
||||
<vs-alert icon="warning" active="true" color="warning" class="mt-5">
|
||||
<span>Only <strong>RGB</strong> and <strong>HEX</strong> colors are supported.</span>
|
||||
</vs-alert>
|
||||
|
||||
<div class="demo-alignment mt-5">
|
||||
|
||||
<vs-avatar badge />
|
||||
<vs-avatar :badge="badge1" text="Luisdaniel" />
|
||||
<vs-avatar badge-color="rgb(140, 23, 164)" :badge="badge2" text="Luisd" />
|
||||
<vs-button color="primary" type="filled" @click="increment"> Increment Badge counter </vs-button>
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<vs-avatar badge />
|
||||
<vs-avatar :badge="badge1" text="Luisdaniel" />
|
||||
<vs-avatar badge-color="rgb(140, 23, 164)" :badge="badge2" text="Luisd" />
|
||||
<vs-button color="primary" type="filled" @click="increment"> Increment Badge counter </vs-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
badge1: 2,
|
||||
badge2: 10,
|
||||
}),
|
||||
methods: {
|
||||
increment() {
|
||||
this.badge1++
|
||||
this.badge2++
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
badge1: 2,
|
||||
badge2: 10
|
||||
}),
|
||||
methods: {
|
||||
increment () {
|
||||
this.badge1++
|
||||
this.badge2++
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Breadcrumb.vue
|
||||
Description: Breadcrumb - Imports all page portions
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<div id="breadcrumb-demo">
|
||||
<breadcrumb-default></breadcrumb-default>
|
||||
<breadcrumb-color></breadcrumb-color>
|
||||
<breadcrumb-separator></breadcrumb-separator>
|
||||
<breadcrumb-slot></breadcrumb-slot>
|
||||
<breadcrumb-alignment></breadcrumb-alignment>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BreadcrumbDefault from './BreadcrumbDefault.vue'
|
||||
import BreadcrumbColor from './BreadcrumbColor.vue'
|
||||
import BreadcrumbSeparator from './BreadcrumbSeparator.vue'
|
||||
import BreadcrumbSlot from './BreadcrumbSlot.vue'
|
||||
import BreadcrumbAlignment from './BreadcrumbAlignment.vue'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
BreadcrumbDefault,
|
||||
BreadcrumbColor,
|
||||
BreadcrumbSeparator,
|
||||
BreadcrumbSlot,
|
||||
BreadcrumbAlignment
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,57 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: BreadcrumbAlignment.vue
|
||||
Description: Align breadcrumb to left, right or center
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Alignment" code-toggler>
|
||||
|
||||
<p>Use <code>align</code> to either align the breadcrumb to the left, center or right</p>
|
||||
|
||||
<div class="mt-5">
|
||||
|
||||
<vs-breadcrumb :items="items" align="left" class="op-block mb-2"></vs-breadcrumb>
|
||||
<vs-breadcrumb :items="items" align="center" class="op-block mb-2"></vs-breadcrumb>
|
||||
<vs-breadcrumb :items="items" align="right" class="op-block mb-2"></vs-breadcrumb>
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-breadcrumb align="left">...</vs-breadcrumb>
|
||||
<vs-breadcrumb align="center">...</vs-breadcrumb>
|
||||
<vs-breadcrumb align="right">...</vs-breadcrumb>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
colorx:'#3DC9B3',
|
||||
items:[
|
||||
{
|
||||
title: 'Dashboard',
|
||||
url: '/'
|
||||
},
|
||||
{
|
||||
title: 'Link 1',
|
||||
url: '/blog'
|
||||
},
|
||||
{
|
||||
title: 'Link 2',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: 'Active',
|
||||
active: true
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,92 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: BreadcrumbColor.vue
|
||||
Description: Change the color of active link in breadcrumb
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Color" code-toggler>
|
||||
|
||||
<p>Use the <code>color</code> directive like for any other component that supports it to customize the breadcrumbs links color</p>
|
||||
|
||||
<vs-alert icon="warning" active="true" color="warning" class="mt-5">
|
||||
<span>Only <strong>RGB</strong> and <strong>HEX</strong> colors are supported.</span>
|
||||
</vs-alert>
|
||||
|
||||
<div class="demo-alignment">
|
||||
|
||||
<input v-model="colorx" type="color" name="" value="">
|
||||
<vs-breadcrumb :color="colorx" :items="items"></vs-breadcrumb>
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<div class="demo-alignment">
|
||||
<input v-model="colorx" type="color" name="" value="">
|
||||
<vs-breadcrumb
|
||||
:color="colorx"
|
||||
:items="items"
|
||||
></vs-breadcrumb>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: ()=>({
|
||||
colorx:'#3DC9B3',
|
||||
items:[
|
||||
{
|
||||
title: 'Dashboard',
|
||||
url: '/'
|
||||
},
|
||||
{
|
||||
title: 'Link 1',
|
||||
url: '/blog'
|
||||
},
|
||||
{
|
||||
title: 'Link 2',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: 'Active',
|
||||
active: true
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
colorx:'#3DC9B3',
|
||||
items:[
|
||||
{
|
||||
title: 'Dashboard',
|
||||
url: '/'
|
||||
},
|
||||
{
|
||||
title: 'Link 1',
|
||||
url: '/blog'
|
||||
},
|
||||
{
|
||||
title: 'Link 2',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: 'Active',
|
||||
active: true
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: BreadcrumbDefault.vue
|
||||
Description: Default breadcrumb
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Default" code-toggler>
|
||||
|
||||
<p>Use the <code>items</code> in order to programatically generate the breadcrumb links</p>
|
||||
|
||||
<div class="demo-alignment">
|
||||
|
||||
<vs-breadcrumb
|
||||
:items="
|
||||
[
|
||||
{ title: 'Dashboard', url: '/' },
|
||||
{ title: 'Link 1', url: '/blog' },
|
||||
{ title: 'Link 2', disabled: true },
|
||||
{ title: 'Active', active: true }
|
||||
]"
|
||||
></vs-breadcrumb>
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-breadcrumb
|
||||
:items="
|
||||
[
|
||||
{
|
||||
title: 'Dashboard',
|
||||
url: '/'
|
||||
},
|
||||
{
|
||||
title: 'Link 1',
|
||||
url: '/blog'
|
||||
},
|
||||
{
|
||||
title: 'Link 2',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: 'Active',
|
||||
active: true
|
||||
}
|
||||
]"
|
||||
></vs-breadcrumb>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: BreadcrumbSeparator.vue
|
||||
Description: Change separator using separator directive
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Separator" code-toggler>
|
||||
|
||||
<p>You can change the separator dividing the links by either passing a string to the <code>separator</code> directive like so "<strong>•</strong>", "<strong>-</strong>", "<strong>|</strong>" etc..., or by passing in one of the material icons text "<strong>chevron_right</strong>"</p>
|
||||
|
||||
<vs-alert icon="warning" active="true" color="warning" class="mt-5">
|
||||
<span>In order to differeciate a custom separator "<strong>•</strong>" from an icon "<strong>chevron_right</strong>", we verify the string length. If the length is <strong>greater than 1</strong> it will be considered a material icon.</span>
|
||||
</vs-alert><br>
|
||||
|
||||
<div>
|
||||
|
||||
<vs-breadcrumb :items="items" separator="•"></vs-breadcrumb>
|
||||
<vs-breadcrumb :items="items" separator="-"></vs-breadcrumb>
|
||||
<vs-breadcrumb :items="items" separator="|"></vs-breadcrumb>
|
||||
<vs-breadcrumb :items="items" :separator="$vs.rtl ? 'chevron_left' : 'chevron_right'"></vs-breadcrumb>
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-breadcrumb :items="[{...}, {...}]" separator="•"></vs-breadcrumb>
|
||||
<vs-breadcrumb :items="[{...}, {...}]" separator="-"></vs-breadcrumb>
|
||||
<vs-breadcrumb :items="[{...}, {...}]" separator="|"></vs-breadcrumb>
|
||||
<vs-breadcrumb :items="[{...}, {...}]" :separator="$vs.rtl ? 'chevron_left' : 'chevron_right'"</vs-breadcrumb>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
colorx:'#3DC9B3',
|
||||
items:[
|
||||
{
|
||||
title: 'Dashboard',
|
||||
url: '/'
|
||||
},
|
||||
{
|
||||
title: 'Link 1',
|
||||
url: '/blog'
|
||||
},
|
||||
{
|
||||
title: 'Link 2',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: 'Active',
|
||||
active: true
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: BreadcrumbSlot.vue
|
||||
Description: Breadcrumb with slot to get more control over breadcrumb
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Slot" code-toggler>
|
||||
|
||||
<p>A default Vue slot that can be used instead of passing in an array of object. This allows for greater control of the breadcrumbs</p>
|
||||
|
||||
<div class="demo-alignment">
|
||||
|
||||
<vs-breadcrumb>
|
||||
<li><router-link to="/">Home</router-link><span class="vs-breadcrum--separator">/</span></li>
|
||||
<li><router-link to="/apps/chat">Chat</router-link><span class="vs-breadcrum--separator">/</span></li>
|
||||
<li aria-current="page" class="active">Infos</li>
|
||||
</vs-breadcrumb>
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-breadcrumb>
|
||||
<li><router-link to="/">Home</router-link><span class="vs-breadcrum--separator">/</span></li>
|
||||
<li><router-link to="/apps/chat">Chat</router-link><span class="vs-breadcrum--separator">/</span></li>
|
||||
<li aria-current="page" class="active">Infos</li>
|
||||
</vs-breadcrumb>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Button.vue
|
||||
Description: Buttons - Imports all page portions
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<div id="button-demo">
|
||||
<button-group-basic></button-group-basic>
|
||||
<button-group-toolbar></button-group-toolbar>
|
||||
<button-group-size></button-group-size>
|
||||
<button-group-vertical></button-group-vertical>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ButtonGroupBasic from './ButtonGroupBasic.vue'
|
||||
import ButtonGroupToolbar from './ButtonGroupToolbar.vue'
|
||||
import ButtonGroupSize from './ButtonGroupSize.vue'
|
||||
import ButtonGroupVertical from './ButtonGroupVertical.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ButtonGroupBasic,
|
||||
ButtonGroupToolbar,
|
||||
ButtonGroupSize,
|
||||
ButtonGroupVertical
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: ButtonGroupBasic.vue.vue
|
||||
Description: Buttons Group Basic
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Basic" code-toggler>
|
||||
|
||||
<p class="mb-4">Add <code>btn-group</code> class to wrapper to make all contained button acts as grouped buttons.</p>
|
||||
|
||||
<div class="btn-group">
|
||||
<vs-button>First</vs-button>
|
||||
<vs-button>Second</vs-button>
|
||||
<vs-button>Third</vs-button>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<div class="btn-group">
|
||||
<vs-button>First</vs-button>
|
||||
<vs-button>Second</vs-button>
|
||||
<vs-button>Third</vs-button>
|
||||
</div>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: ButtonGroupSize.vue.vue
|
||||
Description: Buttons Group Size
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Sizing" code-toggler>
|
||||
|
||||
<p class="mb-4">You can use <code>size</code> prop of button component to change the size of button group.</p>
|
||||
|
||||
<div class="btn-group">
|
||||
<vs-button size="large">First</vs-button>
|
||||
<vs-button size="large">Second</vs-button>
|
||||
<vs-button size="large">Third</vs-button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group my-4">
|
||||
<vs-button>First</vs-button>
|
||||
<vs-button>Second</vs-button>
|
||||
<vs-button>Third</vs-button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<vs-button size="small">First</vs-button>
|
||||
<vs-button size="small">Second</vs-button>
|
||||
<vs-button size="small">Third</vs-button>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<div class="btn-group">
|
||||
<vs-button size="large">First</vs-button>
|
||||
<vs-button size="large">Second</vs-button>
|
||||
<vs-button size="large">Third</vs-button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group my-4">
|
||||
<vs-button>First</vs-button>
|
||||
<vs-button>Second</vs-button>
|
||||
<vs-button>Third</vs-button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<vs-button size="small">First</vs-button>
|
||||
<vs-button size="small">Second</vs-button>
|
||||
<vs-button size="small">Third</vs-button>
|
||||
</div>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: ButtonGroupToolbar.vue.vue
|
||||
Description: Buttons Group Toolbar
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Toolbar" code-toggler>
|
||||
|
||||
<p class="mb-4">Use flex container on button groups to create button toolbar.</p>
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<div class="btn-group mr-4 mt-4">
|
||||
<vs-button>1</vs-button>
|
||||
<vs-button>2</vs-button>
|
||||
<vs-button>3</vs-button>
|
||||
<vs-button>4</vs-button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group mt-4 mr-4">
|
||||
<vs-button>5</vs-button>
|
||||
<vs-button>6</vs-button>
|
||||
<vs-button>7</vs-button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group mt-4">
|
||||
<vs-button>8</vs-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="btn-group">
|
||||
<vs-button>1</vs-button>
|
||||
<vs-button>2</vs-button>
|
||||
<vs-button>3</vs-button>
|
||||
<vs-button>4</vs-button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group ml-4">
|
||||
<vs-button>5</vs-button>
|
||||
<vs-button>6</vs-button>
|
||||
<vs-button>7</vs-button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group ml-4">
|
||||
<vs-button>8</vs-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: ButtonGroupVertical.vue.vue
|
||||
Description: Buttons Group in vertical variant
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Vertical Variant" code-toggler>
|
||||
|
||||
<p class="mb-4">You can create vertical variant of button group using <code>btn-group-vertical</code> class</p>
|
||||
|
||||
<div class="btn-group-vertical">
|
||||
<vs-button>Top</vs-button>
|
||||
<vs-button>Middle</vs-button>
|
||||
<vs-button>Bottom</vs-button>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<div class="btn-group-vertical">
|
||||
<vs-button>Top</vs-button>
|
||||
<vs-button>Middle</vs-button>
|
||||
<vs-button>Bottom</vs-button>
|
||||
</div>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Button.vue
|
||||
Description: Buttons - Imports all page portions
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<div id="button-demo">
|
||||
<button-filled></button-filled>
|
||||
<button-border></button-border>
|
||||
<button-flat></button-flat>
|
||||
<button-line-down></button-line-down>
|
||||
<button-gradient></button-gradient>
|
||||
<button-relief></button-relief>
|
||||
<button-color></button-color>
|
||||
<button-text-color></button-text-color>
|
||||
<button-icon></button-icon>
|
||||
<button-icon-only></button-icon-only>
|
||||
<button-size></button-size>
|
||||
<button-router></button-router>
|
||||
<button-link></button-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ButtonFilled from './ButtonFilled.vue'
|
||||
import ButtonBorder from './ButtonBorder.vue'
|
||||
import ButtonFlat from './ButtonFlat.vue'
|
||||
import ButtonLineDown from './ButtonLineDown.vue'
|
||||
import ButtonGradient from './ButtonGradient.vue'
|
||||
import ButtonRelief from './ButtonRelief.vue'
|
||||
import ButtonColor from './ButtonColor.vue'
|
||||
import ButtonTextColor from './ButtonTextColor.vue'
|
||||
import ButtonIcon from './ButtonIcon.vue'
|
||||
import ButtonIconOnly from './ButtonIconOnly.vue'
|
||||
import ButtonSize from './ButtonSize.vue'
|
||||
import ButtonRouter from './ButtonRouter.vue'
|
||||
import ButtonLink from './ButtonLink.vue'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
ButtonFilled,
|
||||
ButtonBorder,
|
||||
ButtonFlat,
|
||||
ButtonLineDown,
|
||||
ButtonGradient,
|
||||
ButtonRelief,
|
||||
ButtonColor,
|
||||
ButtonTextColor,
|
||||
ButtonIcon,
|
||||
ButtonIconOnly,
|
||||
ButtonSize,
|
||||
ButtonRouter,
|
||||
ButtonLink
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: ButtonBorder.vue
|
||||
Description: Buttons with border
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Border" code-toggler>
|
||||
|
||||
<p>To add a type of button with edges we change the value of <code>border</code></p>
|
||||
|
||||
<div class="demo-alignment">
|
||||
|
||||
<vs-button color="primary" type="border">Primary</vs-button>
|
||||
<vs-button color="success" type="border">Success</vs-button>
|
||||
<vs-button color="danger" type="border">Danger</vs-button>
|
||||
<vs-button color="warning" type="border">Warning</vs-button>
|
||||
<vs-button color="dark" type="border">Dark</vs-button>
|
||||
<vs-button color="rgb(11, 189, 135)" type="border">RGB</vs-button>
|
||||
<vs-button disabled type="border">Disabled</vs-button>
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-button color="primary" type="border">Primary</vs-button>
|
||||
<vs-button color="success" type="border">Success</vs-button>
|
||||
<vs-button color="danger" type="border">Danger</vs-button>
|
||||
<vs-button color="warning" type="border">Warning</vs-button>
|
||||
<vs-button color="dark" type="border">Dark</vs-button>
|
||||
<vs-button color="rgb(11, 189, 135)" type="border">RGB</vs-button>
|
||||
<vs-button disabled type="border">Disabled</vs-button>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: ButtonColor.vue
|
||||
Description: Change color of buttons
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Color" code-toggler>
|
||||
|
||||
<p>There are cases in which we need something more personalized like a specific color, you can change the color of the button with the property <code>color</code> giving it as a value the color</p>
|
||||
|
||||
<vs-alert icon="warning" active="true" color="warning" class="mt-5">
|
||||
<span>Only <strong>RGB</strong> and <strong>HEX</strong> colors are supported.</span>
|
||||
</vs-alert>
|
||||
|
||||
<vs-alert color="primary" icon="new_releases" active="true" class="mt-5">
|
||||
<span>If you need a gradient type button, to assign the color you have to use the property <code>gradient-color-secondary</code></span>
|
||||
</vs-alert>
|
||||
|
||||
<div class="demo-alignment">
|
||||
|
||||
<input type="color" v-model="colorx" name="" value="">
|
||||
<input type="color" v-model="colorx2" name="" value="">
|
||||
<vs-button :color="colorx" type="filled">Color</vs-button>
|
||||
<vs-button :color="colorx" type="border">Color</vs-button>
|
||||
<vs-button :color="colorx" type="flat">Color</vs-button>
|
||||
<vs-button :color="colorx" type="line">Color</vs-button>
|
||||
<vs-button :color="colorx" :gradient-color-secondary="colorx2" type="gradient">Color</vs-button>
|
||||
<vs-button :color="colorx" type="relief">Color</vs-button>
|
||||
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template lang="html">
|
||||
<div class="">
|
||||
<input type="color" v-model="colorx" name="" value="">
|
||||
<input type="color" v-model="colorx2" name="" value="">
|
||||
<vs-button :color="colorx" type="filled">Color</vs-button>
|
||||
<vs-button :color="colorx" type="border">Color</vs-button>
|
||||
<vs-button :color="colorx" type="flat">Color</vs-button>
|
||||
<vs-button :color="colorx" type="line">Color</vs-button>
|
||||
<vs-button :color="colorx" :gradient-color-secondary="colorx2" type="gradient">Color</vs-button>
|
||||
<vs-button :color="colorx" type="relief">Color</vs-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
colorx:'#9ecc38',
|
||||
colorx2:'#3EC9D6'
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
colorx: '#9ecc38',
|
||||
colorx2: '#3EC9D6'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: ButtonFilled.vue
|
||||
Description: Filled buttons(Buttons with background color)
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Filled" code-toggler>
|
||||
|
||||
<p>To define the type of button the directive is used <code>type</code> with the value of some type of button like it can be: <code>filled</code></p>
|
||||
|
||||
<div class="demo-alignment">
|
||||
|
||||
<vs-button color="primary" type="filled">Primary</vs-button>
|
||||
<vs-button color="success" type="filled">Success</vs-button>
|
||||
<vs-button color="danger" type="filled">Danger</vs-button>
|
||||
<vs-button color="warning" type="filled">Warning</vs-button>
|
||||
<vs-button color="dark" type="filled">Dark</vs-button>
|
||||
<vs-button color="rgb(62, 201, 214)" type="filled">RGB</vs-button>
|
||||
<vs-button disabled type="filled">Disabled</vs-button>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<vs-button color="primary" type="filled">Primary</vs-button>
|
||||
<vs-button color="success" type="filled">Success</vs-button>
|
||||
<vs-button color="danger" type="filled">Danger</vs-button>
|
||||
<vs-button color="warning" type="filled">Warning</vs-button>
|
||||
<vs-button color="dark" type="filled">Dark</vs-button>
|
||||
<vs-button color="rgb(62, 201, 214)" type="filled">RGB</vs-button>
|
||||
<vs-button disabled type="filled">Disabled</vs-button>
|
||||
</template>
|
||||
|
||||
</vx-card>
|
||||
</template>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user