257 lines
9.4 KiB
Vue
257 lines
9.4 KiB
Vue
<script>
|
||
import Layout from "../../layouts/main";
|
||
import PageHeader from "../../components/page-header";
|
||
|
||
/**
|
||
* General-ui component
|
||
*/
|
||
export default {
|
||
components: { Layout, PageHeader },
|
||
data() {
|
||
return {
|
||
title: "General",
|
||
items: [
|
||
{
|
||
text: "UI Elements",
|
||
href: "/"
|
||
},
|
||
{
|
||
text: "General",
|
||
active: true
|
||
}
|
||
],
|
||
defaultvalue: 3,
|
||
currentpage: 3
|
||
};
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<Layout>
|
||
<PageHeader :title="title" :items="items" />
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div>
|
||
<h4 class="card-title">badges</h4>
|
||
<p
|
||
class="card-title-desc"
|
||
>Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
|
||
<div>
|
||
<span class="badge bg-primary">Primary</span>
|
||
<span class="badge bg-success ms-1">Success</span>
|
||
<span class="badge bg-info ms-1">Info</span>
|
||
<span class="badge bg-warning ms-1">Warning</span>
|
||
<span class="badge bg-danger ms-1">Danger</span>
|
||
<span class="badge bg-dark ms-1">Dark</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="mt-4 mt-lg-0">
|
||
<h4 class="card-title">Pill badges</h4>
|
||
<p class="card-title-desc">
|
||
Use the
|
||
<code>.rounded-pill</code> modifier class to make
|
||
badges more rounded (with a larger
|
||
<code>border-radius</code>
|
||
and additional horizontal
|
||
<code>padding</code>).
|
||
Useful if you miss the badges from v3.
|
||
</p>
|
||
|
||
<div>
|
||
<span class="badge rounded-pill bg-primary">Primary</span>
|
||
<span class="badge rounded-pill bg-success ms-1"
|
||
>Success</span
|
||
>
|
||
<span class="badge rounded-pill bg-info ms-1">Info</span>
|
||
<span class="badge rounded-pill bg-warning ms-1"
|
||
>Warning</span
|
||
>
|
||
<span class="badge rounded-pill bg-danger ms-1"
|
||
>Danger</span
|
||
>
|
||
<span class="badge rounded-pill bg-dark ms-1">Dark</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
</div>
|
||
</div>
|
||
<!-- end card -->
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Popovers</h4>
|
||
<p
|
||
class="card-title-desc"
|
||
>Add small overlay content, like those found in iOS, to any element for housing secondary information.</p>
|
||
|
||
<div class="button-items">
|
||
<b-button
|
||
v-b-popover.top="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
|
||
variant="secondary"
|
||
>Popover on top</b-button>
|
||
|
||
<b-button
|
||
v-b-popover.bottom="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
|
||
variant="secondary"
|
||
>Popover on bottom</b-button>
|
||
<b-button
|
||
v-b-popover.right="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
|
||
variant="secondary"
|
||
>Popover on right</b-button>
|
||
<b-button
|
||
v-b-popover.left="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
|
||
variant="secondary"
|
||
>Popover on left</b-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Tooltips</h4>
|
||
<p class="card-title-desc">Hover over the links below to see tooltips:</p>
|
||
|
||
<div class="button-items">
|
||
<b-button id="tooltip-top" variant="primary">Tooltip on top</b-button>
|
||
<b-tooltip target="tooltip-top">Tooltip on top</b-tooltip>
|
||
<b-button id="tooltip-button" variant="primary">Tooltip on bottom</b-button>
|
||
<b-tooltip target="tooltip-button" placement="bottom">Tooltip on bottom</b-tooltip>
|
||
<b-button id="tooltip-left-button" variant="primary">Tooltip on left</b-button>
|
||
<b-tooltip target="tooltip-left-button">Tooltip on left</b-tooltip>
|
||
<b-button id="tooltip-right-button" variant="primary">Tooltip on right</b-button>
|
||
<b-tooltip target="tooltip-right-button" placement="bottom">Tooltip on right</b-tooltip>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title mb-4">Pagination</h4>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<h5 class="font-size-14">Default Example</h5>
|
||
<p
|
||
class="card-title-desc"
|
||
>Pagination links indicate a series of related content exists across multiple pages.</p>
|
||
<b-pagination
|
||
v-model="defaultvalue"
|
||
:total-rows="50"
|
||
:per-page="10"
|
||
aria-controls="my-table"
|
||
></b-pagination>
|
||
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="mt-4">
|
||
<h5 class="card-title">Alignment</h5>
|
||
<p class="card-title-desc">
|
||
Change the alignment of pagination
|
||
components with flexbox utilities.
|
||
</p>
|
||
|
||
<b-pagination
|
||
:total-rows="50"
|
||
prev-text="Previous"
|
||
next-text="Next"
|
||
align="center"
|
||
></b-pagination>
|
||
|
||
<b-pagination
|
||
:total-rows="50"
|
||
prev-text="Previous"
|
||
next-text="Next"
|
||
align="right"
|
||
></b-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="mt-4">
|
||
<h5 class="font-size-14">Sizing</h5>
|
||
<p class="card-title-desc">
|
||
Fancy larger or smaller pagination? Add
|
||
<code>.pagination-lg</code> or
|
||
<code>.pagination-sm</code> for additional
|
||
sizes.
|
||
</p>
|
||
<b-pagination size="lg" :total-rows="30" :per-page="10" aria-controls="my-table"></b-pagination>
|
||
|
||
<b-pagination size="sm" :total-rows="30" :per-page="10" aria-controls="my-table"></b-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
</div>
|
||
</div>
|
||
<!-- end card -->
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Border spinner</h4>
|
||
<p class="card-title-desc">Use the border spinners for a lightweight loading indicator.</p>
|
||
<div>
|
||
<b-spinner class="m-2" variant="primary" role="status"></b-spinner>
|
||
<b-spinner class="m-2" variant="secondary" role="status"></b-spinner>
|
||
<b-spinner class="m-2" variant="success" role="status"></b-spinner>
|
||
<b-spinner class="m-2" variant="info" role="status"></b-spinner>
|
||
<b-spinner class="m-2" variant="warning" role="status"></b-spinner>
|
||
<b-spinner class="m-2" variant="danger" role="status"></b-spinner>
|
||
<b-spinner class="m-2" variant="dark" role="status"></b-spinner>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Growing spinner</h4>
|
||
<p
|
||
class="card-title-desc"
|
||
>If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!</p>
|
||
<div>
|
||
<b-spinner type="grow" class="m-2" variant="primary" role="status"></b-spinner>
|
||
<b-spinner type="grow" class="m-2" variant="secondary" role="status"></b-spinner>
|
||
<b-spinner type="grow" class="m-2" variant="success" role="status"></b-spinner>
|
||
<b-spinner type="grow" class="m-2" variant="info" role="status"></b-spinner>
|
||
<b-spinner type="grow" class="m-2" variant="warning" role="status"></b-spinner>
|
||
<b-spinner type="grow" class="m-2" variant="danger" role="status"></b-spinner>
|
||
<b-spinner type="grow" class="m-2" variant="dark" role="status"></b-spinner>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end row -->
|
||
</Layout>
|
||
</template> |