refactor: new project structure
This commit is contained in:
Łukasz Holeczek
@@ -0,0 +1,169 @@
|
||||
<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 Alert</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/alert" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-alert show variant="primary">Primary Alert</b-alert>
|
||||
<b-alert show variant="secondary">Secondary Alert</b-alert>
|
||||
<b-alert show variant="success">Success Alert</b-alert>
|
||||
<b-alert show variant="danger">Danger Alert</b-alert>
|
||||
<b-alert show variant="warning">Warning Alert</b-alert>
|
||||
<b-alert show variant="info">Info Alert</b-alert>
|
||||
<b-alert show variant="light">Light Alert</b-alert>
|
||||
<b-alert show variant="dark">Dark Alert</b-alert>
|
||||
</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> Alert
|
||||
<small> use <code>.alert-link</code> to provide links</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-alert show variant="primary">
|
||||
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="secondary">
|
||||
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="success">
|
||||
Success Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="danger">
|
||||
Danger Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="warning">
|
||||
Warning Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="info">
|
||||
Info Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="light">
|
||||
Light Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="dark">
|
||||
Dark Alert with
|
||||
<b-link href="#" class="alert-link">an example link</b-link>
|
||||
.
|
||||
</b-alert>
|
||||
</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>Alerts</strong>
|
||||
<small>with additional content</small>
|
||||
</div>
|
||||
<b-alert show variant="success">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>
|
||||
Aww yeah, you successfully read this important alert message.
|
||||
This example text is going to run a bit longer so that you can see
|
||||
how spacing within an alert works with this kind of content.
|
||||
</p>
|
||||
<hr>
|
||||
<p class="mb-0">
|
||||
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
</p>
|
||||
</b-alert>
|
||||
</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>Alerts</strong>
|
||||
<small>dismissible</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-alert show dismissible>
|
||||
Dismissible Alert!
|
||||
</b-alert>
|
||||
<b-alert variant="danger"
|
||||
dismissible
|
||||
:show="showDismissibleAlert"
|
||||
@dismissed="showDismissibleAlert=false">
|
||||
Dismissible Alert!
|
||||
</b-alert>
|
||||
<b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
|
||||
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
|
||||
</b-btn>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i>Alerts</strong>
|
||||
<small>auto dismissible</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-alert :show="dismissCountDown"
|
||||
dismissible
|
||||
variant="warning"
|
||||
@dismissed="dismissCountdown=0"
|
||||
@dismiss-count-down="countDownChanged">
|
||||
Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds...
|
||||
</b-alert>
|
||||
<b-alert :show="dismissCountDown"
|
||||
dismissible
|
||||
variant="info"
|
||||
@dismissed="dismissCountdown=0"
|
||||
@dismiss-count-down="countDownChanged">
|
||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||
<b-progress variant="info"
|
||||
:max="dismissSecs"
|
||||
:value="dismissCountDown"
|
||||
height="4px">
|
||||
</b-progress>
|
||||
</b-alert>
|
||||
<b-btn @click="showAlert" variant="info" class="m-1">
|
||||
Show alert with timer
|
||||
</b-btn>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'alerts',
|
||||
data () {
|
||||
return {
|
||||
dismissSecs: 10,
|
||||
dismissCountDown: 0,
|
||||
showDismissibleAlert: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
countDownChanged (dismissCountDown) {
|
||||
this.dismissCountDown = dismissCountDown
|
||||
},
|
||||
showAlert () {
|
||||
this.dismissCountDown = this.dismissSecs
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,88 @@
|
||||
<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 Badge</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/badge" target="_blank"><small class="text-muted">docs</small></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Example heading <b-badge>New</b-badge></h2>
|
||||
<h3>Example heading <b-badge>New</b-badge></h3>
|
||||
<h4>Example heading <b-badge>New</b-badge></h4>
|
||||
<h5>Example heading <b-badge>New</b-badge></h5>
|
||||
<h6>Example heading <b-badge>New</b-badge></h6>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<b-button variant="primary">
|
||||
Notifications <b-badge variant="light" :style="{position: 'static'}">4</b-badge>
|
||||
</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card header="Badge <small>contextual variations</small>"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div>
|
||||
<b-badge variant="primary">Primary</b-badge>
|
||||
<b-badge variant="secondary">Secondary</b-badge>
|
||||
<b-badge variant="success">Success</b-badge>
|
||||
<b-badge variant="danger">Danger</b-badge>
|
||||
<b-badge variant="warning">Warning</b-badge>
|
||||
<b-badge variant="info">Info</b-badge>
|
||||
<b-badge variant="light">Light</b-badge>
|
||||
<b-badge variant="dark">Dark</b-badge>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card header="Badge <small>pills</small>"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div>
|
||||
<b-badge pill variant="primary">Primary</b-badge>
|
||||
<b-badge pill variant="secondary">Secondary</b-badge>
|
||||
<b-badge pill variant="success">Success</b-badge>
|
||||
<b-badge pill variant="danger">Danger</b-badge>
|
||||
<b-badge pill variant="warning">Warning</b-badge>
|
||||
<b-badge pill variant="info">Info</b-badge>
|
||||
<b-badge pill variant="light">Light</b-badge>
|
||||
<b-badge pill variant="dark">Dark</b-badge>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card header="Badge <small>actionable</small>"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div>
|
||||
<b-badge href="#" variant="primary">Primary</b-badge>
|
||||
<b-badge href="#" variant="secondary">Secondary</b-badge>
|
||||
<b-badge href="#" variant="success">Success</b-badge>
|
||||
<b-badge href="#" variant="danger">Danger</b-badge>
|
||||
<b-badge href="#" variant="warning">Warning</b-badge>
|
||||
<b-badge href="#" variant="info">Info</b-badge>
|
||||
<b-badge href="#" variant="light">Light</b-badge>
|
||||
<b-badge href="#" variant="dark">Dark</b-badge>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'badges',
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card header="Bootstrap Modals">
|
||||
<b-button type="button" variant="secondary" @click="myModal = true">Launch demo modal</b-button>
|
||||
<b-button type="button" variant="secondary" @click="largeModal = true">Launch large modal</b-button>
|
||||
<b-button type="button" variant="secondary" @click="smallModal = true">Launch small modal</b-button>
|
||||
<hr>
|
||||
<b-button type="button" variant="primary" @click="primaryModal = true">Launch primary modal</b-button>
|
||||
<b-button type="button" variant="success" @click="successModal = true">Launch success modal</b-button>
|
||||
<b-button type="button" variant="warning" @click="warningModal = true">Launch warning modal</b-button>
|
||||
<b-button type="button" variant="danger" @click="dangerModal = true">Launch danger modal</b-button>
|
||||
<b-button type="button" variant="info" @click="infoModal = true">Launch info modal</b-button>
|
||||
</b-card>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
</div>
|
||||
|
||||
<!-- Modal Component -->
|
||||
<b-modal title="Modal title" v-model="myModal" @ok="myModal = false">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" size="lg" v-model="largeModal" @ok="largeModal = false">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" size="sm" v-model="smallModal" @ok="smallModal = false">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
|
||||
<b-modal title="Modal title" class="modal-primary" v-model="primaryModal" @ok="primaryModal = false">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" class="modal-success" v-model="successModal" @ok="successModal = false" ok-variant="success">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" class="modal-warning" v-model="warningModal" @ok="warningModal = false" ok-variant="warning">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" class="modal-danger" v-model="dangerModal" @ok="dangerModal = false" ok-variant="danger">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" class="modal-info" v-model="infoModal" @ok="infoModal = false" ok-variant="info">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'modals',
|
||||
data () {
|
||||
return {
|
||||
myModal: false,
|
||||
largeModal: false,
|
||||
smallModal: false,
|
||||
primaryModal: false,
|
||||
successModal: false,
|
||||
warningModal: false,
|
||||
dangerModal: false,
|
||||
infoModal: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user