refactor: new project structure
This commit is contained in:
Łukasz Holeczek
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Breadcrumb</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" target="_blank"><small class="text-muted">docs</small></a>
|
||||
</div>
|
||||
</div>
|
||||
<b-breadcrumb :items="items"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'breadcrumbs',
|
||||
data () {
|
||||
return {
|
||||
items: [{
|
||||
text: 'Admin',
|
||||
href: '#'
|
||||
}, {
|
||||
text: 'Manage',
|
||||
href: '#'
|
||||
}, {
|
||||
text: 'Library',
|
||||
active: true
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card show-footer>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
<div slot="footer">Card footer</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="<i class='fa fa-check'></i> Card with icon">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Card with switch
|
||||
<label class="switch switch-sm switch-text switch-info float-right mb-0">
|
||||
<input type="checkbox" class="switch-input">
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Card with label
|
||||
<b-badge variant="success" class="float-right">Success</b-badge>
|
||||
</div>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Card with label
|
||||
<b-badge pill variant="danger" class="float-right">42</b-badge>
|
||||
</div>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline" border-variant="primary">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline" border-variant="secondary">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline" border-variant="success">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline" border-variant="info">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline" border-variant="warning">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline" border-variant="danger">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-primary" header="Card with accent">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-secondary" header="Card with accent">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-success" header="Card with accent">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-info" header="Card with accent">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-warning" header="Card with accent">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-danger" header="Card with accent">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-primary text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-success text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-info text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-warning text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-danger text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-secondary text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-primary">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-success">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-info">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-warning">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-danger">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'cards'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Carousel</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/carousel" target="_blank"><small class="text-muted">docs</small></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-carousel id="carousel1"
|
||||
style="text-shadow: 1px 1px 2px #333;"
|
||||
controls
|
||||
indicators
|
||||
background="#ababab"
|
||||
:interval="4000"
|
||||
img-width="1024"
|
||||
img-height="480"
|
||||
v-model="slide"
|
||||
@sliding-start="onSlideStart"
|
||||
@sliding-end="onSlideEnd"
|
||||
>
|
||||
|
||||
<!-- Text slides with image -->
|
||||
<b-carousel-slide caption="First slide"
|
||||
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||
img-src="https://lorempixel.com/1024/480/technics/2/"
|
||||
></b-carousel-slide>
|
||||
|
||||
<!-- Slides with custom text -->
|
||||
<b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/4/">
|
||||
<h1>Hello world!</h1>
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slides with image only -->
|
||||
<b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/8/">
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slides with img slot -->
|
||||
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
|
||||
<b-carousel-slide>
|
||||
<img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
|
||||
src="https://lorempixel.com/1024/480/technics/5/" alt="image slot">
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
|
||||
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
||||
eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque
|
||||
ut lacus vel interdum.
|
||||
</p>
|
||||
</b-carousel-slide>
|
||||
|
||||
</b-carousel>
|
||||
|
||||
<p class="mt-4">
|
||||
Slide #: {{ slide }}<br>
|
||||
Sliding: {{ sliding }}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'carousels',
|
||||
data () {
|
||||
return {
|
||||
slide: 0,
|
||||
sliding: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSlideStart (slide) {
|
||||
this.sliding = true
|
||||
},
|
||||
onSlideEnd (slide) {
|
||||
this.sliding = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Collapse</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/collapse" target="_blank"><small class="text-muted">docs</small></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-btn v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-btn>
|
||||
<b-collapse id="collapse1" class="mt-2">
|
||||
<b-card>
|
||||
<p class="card-text">Collapse contents Here</p>
|
||||
<b-btn v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</b-btn>
|
||||
<b-collapse id=collapse1_inner class="mt-2">
|
||||
<b-card>Hello!</b-card>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with<code>v-b-toggle</code>directive</small>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Using modifiers -->
|
||||
<b-btn v-b-toggle.collapse2 class="m-1">Toggle Collapse</b-btn>
|
||||
|
||||
<!-- Using value -->
|
||||
<b-btn v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</b-btn>
|
||||
|
||||
<!-- element to collapse -->
|
||||
<b-collapse id="collapse2">
|
||||
<b-card>
|
||||
I am collapsible content!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with<code>visibility</code></small>
|
||||
</div>
|
||||
<div>
|
||||
<b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
|
||||
<b-collapse visible id="collapse3">
|
||||
<b-card>
|
||||
I should start open!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with<code>v-model</code></small>
|
||||
</div>
|
||||
<div>
|
||||
<b-btn @click="showCollapse = !showCollapse"
|
||||
:class="showCollapse ? 'collapsed' : null"
|
||||
aria-controls="collapse4"
|
||||
:aria-expanded="showCollapse ? 'true' : 'false'">
|
||||
Toggle Collapse
|
||||
</b-btn>
|
||||
<b-collapse class="mt-2" v-model="showCollapse" id="collapse4">
|
||||
<b-card>
|
||||
I should start open!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>multiple elements</small>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Single button triggers two b-collapse components -->
|
||||
<b-btn v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</b-btn>
|
||||
|
||||
<!-- elements to collapse -->
|
||||
<b-collapse id="collapseA" class="mt-2">
|
||||
<b-card>
|
||||
I am collapsable content A!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
<b-collapse id="collapseB" class="mt-2">
|
||||
<b-card>
|
||||
I am collapsable content B!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong><small><code>accordion</code>support</small>
|
||||
</div>
|
||||
<div role="tablist">
|
||||
<b-card no-body class="mb-1">
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-btn block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</b-btn>
|
||||
</b-card-header>
|
||||
<b-collapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
|
||||
<b-card-body>
|
||||
<p class="card-text">
|
||||
I start opened because <code>visible</code> is <code>true</code>
|
||||
</p>
|
||||
<p class="card-text">
|
||||
{{ text }}
|
||||
</p>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
<b-card no-body class="mb-1">
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-btn block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</b-btn>
|
||||
</b-card-header>
|
||||
<b-collapse id="accordion2" accordion="my-accordion" role="tabpanel">
|
||||
<b-card-body>
|
||||
<p class="card-text">
|
||||
{{ text }}
|
||||
</p>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
<b-card no-body class="mb-1">
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-btn block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</b-btn>
|
||||
</b-card-header>
|
||||
<b-collapse id="accordion3" accordion="my-accordion" role="tabpanel">
|
||||
<b-card-body>
|
||||
<p class="card-text">
|
||||
{{ text }}
|
||||
</p>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'collapses',
|
||||
data () {
|
||||
return {
|
||||
showCollapse: true,
|
||||
text: `
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
|
||||
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
|
||||
tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
|
||||
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
|
||||
wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
|
||||
vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
|
||||
synth nesciunt you probably haven't heard of them accusamus labore VHS.
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Jumbotron</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
||||
<p>For more information visit website</p>
|
||||
<b-btn variant="primary" href="#">More Info</b-btn>
|
||||
</b-jumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
|
||||
<small>with slots</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-jumbotron>
|
||||
<template slot="header">
|
||||
Bootstrap 4
|
||||
</template>
|
||||
<template slot="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
</template>
|
||||
<hr class="my-4">
|
||||
<p>
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
<b-btn variant="primary" href="#">Do Something</b-btn>
|
||||
<b-btn variant="success" href="#">Do Something Else</b-btn>
|
||||
</b-jumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
|
||||
<small>variants</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
|
||||
<template slot="header">
|
||||
Bootstrap 4
|
||||
</template>
|
||||
<template slot="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
</template>
|
||||
<hr class="my-4">
|
||||
<p>
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
</b-jumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'jumbotrons'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap list group</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/list-group" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item>Cras justo odio</b-list-group-item>
|
||||
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
|
||||
<b-list-group-item>Morbi leo risus</b-list-group-item>
|
||||
<b-list-group-item>Porta ac consectetur ac</b-list-group-item>
|
||||
<b-list-group-item>Vestibulum at eros</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>active items</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item>Cras justo odio</b-list-group-item>
|
||||
<b-list-group-item active>Dapibus ac facilisis in</b-list-group-item>
|
||||
<b-list-group-item>Morbi leo risus</b-list-group-item>
|
||||
<b-list-group-item>Porta ac consectetur ac</b-list-group-item>
|
||||
<b-list-group-item>Vestibulum at eros</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>disabled items</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item disabled>Cras justo odio</b-list-group-item>
|
||||
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
|
||||
<b-list-group-item>Morbi leo risus</b-list-group-item>
|
||||
<b-list-group-item disabled>Porta ac consectetur ac</b-list-group-item>
|
||||
<b-list-group-item>Vestibulum at eros</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>actionable items</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item href="#some-link">Awesome link</b-list-group-item>
|
||||
<b-list-group-item href="#" active>Link with active state</b-list-group-item>
|
||||
<b-list-group-item href="#">Action links are easy</b-list-group-item>
|
||||
<b-list-group-item href="#foobar" disabled>Disabled link</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>buttons</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item button>Button item</b-list-group-item>
|
||||
<b-list-group-item button>I am a button</b-list-group-item>
|
||||
<b-list-group-item button disabled>Disabled button</b-list-group-item>
|
||||
<b-list-group-item button>This is a button too</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>with badges</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item class="d-flex justify-content-between align-items-center">
|
||||
Cras justo odio
|
||||
<b-badge variant="primary" pill>14</b-badge>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item class="d-flex justify-content-between align-items-center">
|
||||
Dapibus ac facilisis in
|
||||
<b-badge variant="primary" pill>2</b-badge>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item class="d-flex justify-content-between align-items-center">
|
||||
Morbi leo risus
|
||||
<b-badge variant="primary" pill>1</b-badge>
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>variants</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item>This is a default list group item</b-list-group-item>
|
||||
<b-list-group-item variant="primary">This is a primary list group item</b-list-group-item>
|
||||
<b-list-group-item variant="secondary">This is a secondary list group item</b-list-group-item>
|
||||
<b-list-group-item variant="success">This is a success list group item</b-list-group-item>
|
||||
<b-list-group-item variant="danger">This is a danger list group item</b-list-group-item>
|
||||
<b-list-group-item variant="warning">This is a warning list group item</b-list-group-item>
|
||||
<b-list-group-item variant="info">This is a info list group item</b-list-group-item>
|
||||
<b-list-group-item variant="light">This is a light list group item</b-list-group-item>
|
||||
<b-list-group-item variant="dark">This is a dark list group item</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>variants active</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item href="#">This is a default list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="primary">This is a primary list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="secondary">This is a secondary list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="success">This is a success list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="danger">This is a danger list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="warning">This is a warning list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="info">This is a info list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="light">This is a light list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="dark">This is a dark list group item</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>inside cards</small>
|
||||
</div>
|
||||
<b-card-group deck>
|
||||
<b-card header="<b>Card with list group</b>">
|
||||
<b-list-group>
|
||||
<b-list-group-item href="#">Cras justo odio</b-list-group-item>
|
||||
<b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
|
||||
<b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
|
||||
</b-list-group>
|
||||
<p class="card-text mt-2">
|
||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</p>
|
||||
</b-card>
|
||||
<b-card no-body header="<b>Card with flush list group</b>">
|
||||
<b-list-group flush>
|
||||
<b-list-group-item href="#">Cras justo odio</b-list-group-item>
|
||||
<b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
|
||||
<b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
|
||||
</b-list-group>
|
||||
<b-card-body>
|
||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>custom content</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item href="#" active class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small>Donec id elit non mi porta.</small>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item href="#" class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item href="#" disabled class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">Disabled List group item</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'list-groups'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navbar</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/navbar" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-navbar toggleable="md" type="dark" variant="info">
|
||||
|
||||
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
|
||||
|
||||
<b-navbar-brand href="#">NavBar</b-navbar-brand>
|
||||
|
||||
<b-collapse is-nav id="nav_collapse">
|
||||
|
||||
<b-navbar-nav>
|
||||
<b-nav-item href="#">Link</b-nav-item>
|
||||
<b-nav-item href="#" disabled>Disabled</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
|
||||
<!-- Right aligned nav items -->
|
||||
<b-navbar-nav class="ml-auto">
|
||||
|
||||
<b-nav-form>
|
||||
<b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
|
||||
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
|
||||
</b-nav-form>
|
||||
|
||||
<b-nav-item-dropdown text="Lang" right>
|
||||
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
|
||||
<b-nav-item-dropdown right>
|
||||
<!-- Using button-content slot -->
|
||||
<template slot="button-content">
|
||||
<em>User</em>
|
||||
</template>
|
||||
<b-dropdown-item href="#">Profile</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Signout</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</b-navbar-nav>
|
||||
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
|
||||
<small>brand</small>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Image and text -->
|
||||
<b-navbar variant="faded" type="light">
|
||||
<b-navbar-brand tag="h1" href="#">
|
||||
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
|
||||
BootstrapVue
|
||||
</b-navbar-brand>
|
||||
</b-navbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
|
||||
<small>text</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-navbar toggleable type="light" variant="light">
|
||||
<b-navbar-toggle target="nav_text_collapse"></b-navbar-toggle>
|
||||
<b-navbar-brand>BootstrapVue</b-navbar-brand>
|
||||
<b-collapse is-nav id="nav_text_collapse">
|
||||
<b-navbar-nav>
|
||||
<b-nav-text>Navbar text</b-nav-text>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
|
||||
<small>dropdown</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-navbar type="dark" variant="primary" toggleable>
|
||||
<b-navbar-toggle target="nav_dropdown_collapse"></b-navbar-toggle>
|
||||
<b-collapse is-nav id="nav_dropdown_collapse">
|
||||
<b-navbar-nav>
|
||||
<b-nav-item href="#">Home</b-nav-item>
|
||||
<b-nav-item href="#">Link</b-nav-item>
|
||||
<!-- Navbar dropdowns -->
|
||||
<b-nav-item-dropdown text="Lang" right>
|
||||
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
<b-nav-item-dropdown text="User" right>
|
||||
<b-dropdown-item href="#">Account</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Settings</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
|
||||
<small>form</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-navbar type="light" variant="light">
|
||||
<b-nav-form>
|
||||
<b-form-input class="mr-sm-2" type="text" placeholder="Search"></b-form-input>
|
||||
<b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
|
||||
</b-nav-form>
|
||||
</b-navbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
|
||||
<small>input group</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-navbar type="light" variant="light">
|
||||
<b-nav-form>
|
||||
<b-input-group left="@">
|
||||
<b-form-input class="mr-sm-2" type="text" placeholder="Username"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-nav-form>
|
||||
</b-navbar>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'navbars'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/nav" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-nav>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item>Another Link</b-nav-item>
|
||||
<b-nav-item disabled>Disabled</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>tab style</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-nav tabs>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item>Another Link</b-nav-item>
|
||||
<b-nav-item disabled>Disabled</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>pill style</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-nav pills>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item>Another Link</b-nav-item>
|
||||
<b-nav-item disabled>Disabled</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>fill tabs</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-nav fill tabs>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item>Link with a long name </b-nav-item>
|
||||
<b-nav-item disabled>Disabled</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>justified tabs</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-nav justified tabs>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item>Link with a long name </b-nav-item>
|
||||
<b-nav-item disabled>Disabled</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>dropdown support</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-nav pills>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item-dropdown id="nav7_ddown" text="Dropdown" right>
|
||||
<b-dropdown-item>one</b-dropdown-item>
|
||||
<b-dropdown-item>two</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item>three</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>vertical variation</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-nav vertical class="w-25">
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item>Another Link</b-nav-item>
|
||||
<b-nav-item disabled>Disabled</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'navs'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Pagination</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/pagination" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h6>Default</h6>
|
||||
<b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<br>
|
||||
|
||||
<h6>Small</h6>
|
||||
<b-pagination size="sm" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<br>
|
||||
|
||||
<div class="d-sm-down-none">
|
||||
<h6>Large</h6>
|
||||
<b-pagination size="lg" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Pagination</strong>
|
||||
<small>alignment</small>
|
||||
</div>
|
||||
<div>
|
||||
<h6>Left alignment (default)</h6>
|
||||
<b-pagination :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<br>
|
||||
|
||||
<h6>Center alignment</h6>
|
||||
<b-pagination align="center" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<br>
|
||||
|
||||
<h6>Right (end) alignment</h6>
|
||||
<b-pagination align="right" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<br>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Pagination</strong>
|
||||
<small>navigation</small>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/pagination" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h6>Default</h6>
|
||||
<b-pagination-nav base-url="#" :number-of-pages="10" v-model="currentPage"/>
|
||||
|
||||
<h6 class="mt-4">With link generator function</h6>
|
||||
<b-pagination-nav :link-gen="linkGen" :number-of-pages="10" v-model="currentPage"/>
|
||||
<br>
|
||||
|
||||
<div class="mt-4">currentPage: {{currentPage}}</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'paginations',
|
||||
data () {
|
||||
return {
|
||||
currentPage: 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
linkGen (pageNum) {
|
||||
return '#page/' + pageNum + '/foobar'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Popovers</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/popovers" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<div class="my-3 text-center">
|
||||
<b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title">
|
||||
Hover Me
|
||||
</b-btn>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<div class="my-3 text-center">
|
||||
<b-btn id="popoverButton-open" variant="primary">Button</b-btn>
|
||||
|
||||
<b-popover show target="popoverButton-open" title="Popover">
|
||||
I start <strong>open</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popovers</strong>
|
||||
<small>placement</small>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<b-row>
|
||||
<b-col md="4" class="py-4 text-center"
|
||||
v-for="placement in placements" :key="placement">
|
||||
<b-btn :id="'exPopover1-'+placement" variant="primary">
|
||||
{{ placement }}
|
||||
</b-btn>
|
||||
<b-popover :target="'exPopover1-'+placement"
|
||||
:placement="placement"
|
||||
title="Popover!"
|
||||
triggers="hover focus"
|
||||
:content="`Placement ${placement}`">
|
||||
</b-popover>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card class="d-sm-down-none"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popovers</strong>
|
||||
<small>via properties or slots</small>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exPopover2" variant="primary">Using properties</b-btn>
|
||||
<b-popover target="exPopover2"
|
||||
title="Prop Examples"
|
||||
triggers="hover focus"
|
||||
content="Embedding content using properties is easy">
|
||||
</b-popover>
|
||||
</b-col>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exPopover3" variant="primary">Using slots</b-btn>
|
||||
<b-popover target="exPopover3" triggers="hover focus">
|
||||
<template slot="title">Content via Slots</template>
|
||||
Embedding content <span class="text-danger">using slots</span>
|
||||
affords you <em>greater <strong>control.</strong></em> and
|
||||
basic HTML support.
|
||||
</b-popover>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popovers</strong>
|
||||
<small>show</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-sync" variant="primary">I have a popover</b-btn>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="show = !show">Toggle Popover</b-btn>
|
||||
|
||||
<b-popover :show.sync="show" target="popoverButton-sync" title="Popover">
|
||||
Hello <strong>World!</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popover</strong>
|
||||
<small>open/close events</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-event" variant="primary">I have a popover</b-btn>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="onOpen">Open</b-btn>
|
||||
<b-btn class="px-1" @click="onClose">Close</b-btn>
|
||||
</div>
|
||||
|
||||
<b-popover ref="popover1" target="popoverButton-event" title="Popover">
|
||||
Hello <strong>World!</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popover</strong>
|
||||
<small>enable/disable events</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-disableevent" variant="primary">I have a popover</b-btn>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="onEnable">Enable</b-btn>
|
||||
<b-btn class="px-1" @click="onDisable">Disable</b-btn>
|
||||
</div>
|
||||
|
||||
<b-popover ref="popover2" target="popoverButton-disableevent" title="Popover">
|
||||
Hello <strong>World!</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popover</strong><small><code>v-b-popover</code>directive</small>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.top="'I am Top'"
|
||||
title="Popover!"
|
||||
variant="primary">Top</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.left="'I am Left'"
|
||||
title="Popover!"
|
||||
variant="primary">Left</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.right="'I am Right'"
|
||||
title="Popover!"
|
||||
variant="primary">Right</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.bottom="'I am Bottom'"
|
||||
title="Popover!"
|
||||
variant="primary">Bottom</b-btn>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'popovers',
|
||||
data () {
|
||||
return {
|
||||
placements: [
|
||||
'topright', 'top', 'topleft',
|
||||
'bottomright', 'bottom', 'bottomleft',
|
||||
'righttop', 'right', 'lefttop',
|
||||
'rightbottom', 'left', 'leftbottom'
|
||||
],
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen () {
|
||||
this.$refs.popover1.$emit('open')
|
||||
},
|
||||
onClose () {
|
||||
this.$refs.popover1.$emit('close')
|
||||
},
|
||||
onEnable () {
|
||||
this.$refs.popover2.$emit('enable')
|
||||
},
|
||||
onDisable () {
|
||||
this.$refs.popover2.$emit('disable')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Progress</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/progress" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-progress :value="counter" :max="max" show-progress animated></b-progress>
|
||||
<b-progress class="mt-1" :max="max" show-value>
|
||||
<b-progress-bar :value="counter*(6/10)" variant="success"></b-progress-bar>
|
||||
<b-progress-bar :value="counter*(2.5/10)" variant="warning"></b-progress-bar>
|
||||
<b-progress-bar :value="counter*(1.5/10)" variant="danger"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-btn class="mt-4" @click="clicked">Click me</b-btn>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>labels</small>
|
||||
</div>
|
||||
<div>
|
||||
<h5>No label</h5>
|
||||
<b-progress :value="value" :max="max2" class="mb-3"></b-progress>
|
||||
<h5>Value label</h5>
|
||||
<b-progress :value="value" :max="max2" show-value class="mb-3"></b-progress>
|
||||
<h5>Progress label</h5>
|
||||
<b-progress :value="value" :max="max2" show-progress class="mb-3"></b-progress>
|
||||
<h5>Value label with precision</h5>
|
||||
<b-progress :value="value" :max="max2" :precision="2" show-value class="mb-3"></b-progress>
|
||||
<h5>Progress label with precision</h5>
|
||||
<b-progress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></b-progress>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>width</small>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Default width</h5>
|
||||
<b-progress :value="value3" class="mb-3"></b-progress>
|
||||
<h5>Custom widths</h5>
|
||||
<b-progress :value="value3" class="w-75 mb-2"></b-progress>
|
||||
<b-progress :value="value3" class="w-50 mb-2"></b-progress>
|
||||
<b-progress :value="value3" class="w-25"></b-progress>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>height</small>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Default height</h5>
|
||||
<b-progress :value="value3" show-progress class="mb-3"></b-progress>
|
||||
<h5>Custom heights</h5>
|
||||
<b-progress height="2rem" :value="value3" show-progress class="mb-2"></b-progress>
|
||||
<b-progress height="20px" :value="value3" show-progress class="mb-2"></b-progress>
|
||||
<b-progress height="2px" :value="value3"></b-progress>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>variants</small>
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="bar in bars" class="row mb-1">
|
||||
<div class="col-sm-2">{{ bar.variant }}:</div>
|
||||
<div class="col-sm-10 pt-1">
|
||||
<b-progress :value="bar.value"
|
||||
:variant="bar.variant"
|
||||
:key="bar.variant"
|
||||
></b-progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>striped</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-progress :value="25" variant="success" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-progress :value="50" variant="info" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-progress :value="75" variant="warning" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-progress :value="100" variant="danger" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-button variant="secondary" @click="striped = !striped">
|
||||
{{ striped ? 'Remove' : 'Add'}} Striped
|
||||
</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>animated</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-progress :value="25" variant="success" striped :animated="animate" class="mb-2"></b-progress>
|
||||
<b-progress :value="50" variant="info" striped :animated="animate" class="mb-2"></b-progress>
|
||||
<b-progress :value="75" variant="warning" striped :animated="animate" class="mb-2"></b-progress>
|
||||
<b-progress :value="100" variant="danger" :animated="animate" class="mb-3"></b-progress>
|
||||
<b-button variant="secondary" @click="animate = !animate">
|
||||
{{ animate ? 'Stop' : 'Start'}} Animation
|
||||
</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>multiple bars</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-progress :max="max3" class="mb-3">
|
||||
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-progress show-progress :max="max3" class="mb-3"></b-progress-bar>
|
||||
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-progress show-value striped :max="max3" class="mb-3"></b-progress-bar>
|
||||
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-progress :max="max3" class="mb-3">
|
||||
<b-progress-bar variant="primary" :value="values[0]" show-progress></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]" animated show-progress></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]" striped show-progress></b-progress-bar>
|
||||
</b-progress>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'progress-bars',
|
||||
data () {
|
||||
return {
|
||||
counter: 45,
|
||||
max: 100,
|
||||
max2: 50,
|
||||
value: 33.333333333,
|
||||
value3: 75,
|
||||
bars: [
|
||||
{variant: 'success', value: 75},
|
||||
{variant: 'info', value: 75},
|
||||
{variant: 'warning', value: 75},
|
||||
{variant: 'danger', value: 75},
|
||||
{variant: 'primary', value: 75},
|
||||
{variant: 'secondary', value: 75},
|
||||
{variant: 'dark', value: 75}
|
||||
],
|
||||
timer: null,
|
||||
striped: true,
|
||||
animate: true,
|
||||
max3: 100,
|
||||
values: [ 15, 30, 20 ]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clicked () {
|
||||
this.counter = Math.random() * this.max
|
||||
console.log('Change progress to ' +
|
||||
Math.round(this.counter * 100) / 100)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.timer = setInterval(() => {
|
||||
this.bars.forEach(bar => {
|
||||
bar.value = 25 + (Math.random() * 75)
|
||||
})
|
||||
}, 2000)
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col md="12">
|
||||
<b-card header="3d Switch">
|
||||
<c-switch type="3d" variant="primary" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="secondary" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="success" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="warning" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="info" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="danger" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch default">
|
||||
<c-switch type="default" variant="primary" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch default - pills">
|
||||
<c-switch type="default" variant="primary" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch outline">
|
||||
<c-switch type="default" variant="primary-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger-outline" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch outline - pills">
|
||||
<c-switch type="default" variant="primary-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger-outline" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch outline alternative">
|
||||
<c-switch type="default" variant="primary-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger-outline-alt" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch outline alternative - pills">
|
||||
<c-switch type="default" variant="primary-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger-outline-alt" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with text">
|
||||
<c-switch type="text" variant="primary" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger" on="On" off="Off" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with text - pills">
|
||||
<c-switch type="text" variant="primary" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with text outline">
|
||||
<c-switch type="text" variant="primary-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger-outline" on="On" off="Off" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with text outline - pills">
|
||||
<c-switch type="text" variant="primary-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with text outline alternative">
|
||||
<c-switch type="text" variant="primary-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with text outline alternative - pills">
|
||||
<c-switch type="text" variant="primary-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with icon">
|
||||
<c-switch type="icon" variant="primary" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with icon - pills">
|
||||
<c-switch type="icon" variant="primary" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with icon outline">
|
||||
<c-switch type="icon" variant="primary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with icon outline - pills">
|
||||
<c-switch type="icon" variant="primary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with icon outline alternative">
|
||||
<c-switch type="icon" variant="primary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card header="Switch with icon outline alternative - pills">
|
||||
<c-switch type="icon" variant="primary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
<b-col md="12">
|
||||
<b-card no-body>
|
||||
<div slot="header">
|
||||
Sizes
|
||||
</div>
|
||||
<b-card-body class="p-0">
|
||||
<b-table hover striped responsive="sm" class="table-align-middle mb-0" :items="items" :fields="fields">
|
||||
<template slot="example" slot-scope="data">
|
||||
<c-switch :type="data.value.type" :variant="data.value.variant" :size="data.value.size" :checked="data.value.checked"/>
|
||||
</template>
|
||||
</b-table>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cSwitch from '../../components/Switch'
|
||||
|
||||
export default {
|
||||
name: 'switches',
|
||||
components: {
|
||||
cSwitch
|
||||
},
|
||||
computed: {
|
||||
icon (icon) {
|
||||
return icon
|
||||
}
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
fields: [
|
||||
{key: 'size'},
|
||||
{key: 'example'},
|
||||
{key: 'css_class', label: 'CSS Class'}
|
||||
],
|
||||
items: [
|
||||
{size: 'Large', example: {type: '3d', variant: 'primary', size: 'lg', checked: true}, css_class: 'Add following code <code>size="lg"</code>'},
|
||||
{size: 'Normal', example: {type: '3d', variant: 'primary', size: '', checked: true}, css_class: '-'},
|
||||
{size: 'Small', example: {type: '3d', variant: 'primary', size: 'sm', checked: true}, css_class: 'Add following code <code>size="sm"</code>'},
|
||||
{size: 'Extra small', example: {type: '3d', variant: 'primary', size: 'xs', checked: true}, css_class: 'Add following code <code>size="xs"</code>'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<b-card :header="caption">
|
||||
<b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
|
||||
<template slot="status" slot-scope="data">
|
||||
<b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
|
||||
</template>
|
||||
</b-table>
|
||||
<nav>
|
||||
<b-pagination :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
|
||||
</nav>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Randomize array element order in-place.
|
||||
* Using Durstenfeld shuffle algorithm.
|
||||
*/
|
||||
const shuffleArray = (array) => {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
let j = Math.floor(Math.random() * (i + 1))
|
||||
let temp = array[i]
|
||||
array[i] = array[j]
|
||||
array[j] = temp
|
||||
}
|
||||
return array
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'c-table',
|
||||
props: {
|
||||
caption: {
|
||||
type: String,
|
||||
default: 'Table'
|
||||
},
|
||||
hover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
striped: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
items: shuffleArray([
|
||||
{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
|
||||
]),
|
||||
fields: [
|
||||
{key: 'username'},
|
||||
{key: 'registered'},
|
||||
{key: 'role'},
|
||||
{key: 'status'}
|
||||
],
|
||||
currentPage: 1,
|
||||
perPage: 5,
|
||||
totalRows: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getBadge (status) {
|
||||
return status === 'Active' ? 'success'
|
||||
: status === 'Inactive' ? 'secondary'
|
||||
: status === 'Pending' ? 'warning'
|
||||
: status === 'Banned' ? 'danger' : 'primary'
|
||||
},
|
||||
getRowCount (items) {
|
||||
return items.length
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
|
||||
<b-row>
|
||||
<b-col lg="6">
|
||||
<c-table caption="<i class='fa fa-align-justify'></i> Simple Table"></c-table>
|
||||
</b-col><!--/.col-->
|
||||
|
||||
<b-col lg="6">
|
||||
<c-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></c-table>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
|
||||
<b-row>
|
||||
<b-col lg="6">
|
||||
<c-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></c-table>
|
||||
</b-col><!--/.col-->
|
||||
|
||||
<b-col lg="6">
|
||||
<c-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></c-table>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
|
||||
<b-row>
|
||||
<b-col sm="12">
|
||||
<c-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></c-table>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cTable from './Table.vue'
|
||||
|
||||
export default {
|
||||
name: 'tables',
|
||||
components: {cTable}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Tooltips</strong><small><code>v-b-tooltip</code>directive</small>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<div class="text-center my-3">
|
||||
<b-btn v-b-tooltip.hover title="I am a tooltip!">Hover Me</b-btn>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<div class="text-center my-3">
|
||||
<b-btn id="tooltipButton-2" variant="primary">Button</b-btn>
|
||||
<b-tooltip show target="tooltipButton-2">
|
||||
I start open
|
||||
</b-tooltip>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>b-tooltip</code>component</small>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exButton1" variant="outline-success">Live chat</b-btn>
|
||||
</b-col>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exButton2" variant="outline-success">Html chat</b-btn>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<!-- Tooltip title specified via prop title -->
|
||||
<b-tooltip target="exButton1" title="Online!"></b-tooltip>
|
||||
|
||||
<!-- HTML title specified via default slot -->
|
||||
<b-tooltip target="exButton2" placement="bottom">
|
||||
Hello <strong>World!</strong>
|
||||
</b-tooltip>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>show</code>prop</small>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<b-btn id="tooltipButton-1" variant="primary">I have a tooltip</b-btn>
|
||||
<br><br>
|
||||
<b-btn @click="show = !show">Toggle Tooltip</b-btn>
|
||||
|
||||
<b-tooltip :show.sync="show" target="tooltipButton-1" placement="top">
|
||||
Hello <strong>World!</strong>
|
||||
</b-tooltip>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>open close</code>events</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="tooltipButton-showEvent" variant="primary">I have a tooltip</b-btn>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="onOpen">Open</b-btn>
|
||||
<b-btn class="px-1" @click="onClose">Close</b-btn>
|
||||
</div>
|
||||
|
||||
<b-tooltip ref="tooltip" target="tooltipButton-showEvent">
|
||||
Hello <strong>World!</strong>
|
||||
</b-tooltip>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>enable disable</code>events</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="tooltipButton-disable" variant="primary">I have a tooltip</b-btn>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn @click="disabled = !disabled">
|
||||
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop
|
||||
</b-btn>
|
||||
|
||||
<b-btn @click="disableByRef">
|
||||
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by $ref event
|
||||
</b-btn>
|
||||
|
||||
<b-tooltip :disabled.sync="disabled" ref="tooltip2" target="tooltipButton-disable">
|
||||
Hello <strong>World!</strong>
|
||||
</b-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tooltips',
|
||||
data () {
|
||||
return {
|
||||
show: true,
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen () {
|
||||
this.$refs.tooltip.$emit('open')
|
||||
},
|
||||
onClose () {
|
||||
this.$refs.tooltip.$emit('close')
|
||||
},
|
||||
disableByRef () {
|
||||
if (this.disabled) {
|
||||
this.$refs.tooltip2.$emit('enable')
|
||||
} else {
|
||||
this.$refs.tooltip2.$emit('disable')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user