334 lines
17 KiB
Vue
334 lines
17 KiB
Vue
|
<script>
|
|||
|
|
import Layout from "../../layouts/main";
|
|||
|
|
import PageHeader from "../../components/page-header";
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Dropdowns component
|
|||
|
|
*/
|
|||
|
|
export default {
|
|||
|
|
components: { Layout, PageHeader },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
title: "Dropdowns",
|
|||
|
|
items: [
|
|||
|
|
{
|
|||
|
|
text: "UI Elements",
|
|||
|
|
href: "/"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "Dropdowns",
|
|||
|
|
active: true
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<Layout>
|
|||
|
|
<PageHeader :title="title" :items="items" />
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h4 class="card-title">Single button dropdowns</h4>
|
|||
|
|
<p class="card-title-desc">
|
|||
|
|
Any single
|
|||
|
|
<code class="highlighter-rouge">.btn</code> can be turned into a
|
|||
|
|
dropdown toggle with some markup changes. Here’s how you can put
|
|||
|
|
them to work with either
|
|||
|
|
<code class="highlighter-rouge"><button></code>
|
|||
|
|
elements:
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-sm-6">
|
|||
|
|
<b-dropdown>
|
|||
|
|
<template v-slot:button-content>
|
|||
|
|
Dropdown button
|
|||
|
|
<i class="mdi mdi-chevron-down"></i>
|
|||
|
|
</template>
|
|||
|
|
<b-dropdown-item>Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item>Another Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item>Something else here</b-dropdown-item>
|
|||
|
|
</b-dropdown>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h4 class="card-title">Variant</h4>
|
|||
|
|
<p class="card-title-desc mb-3">
|
|||
|
|
The best part is you can do this with any button variant, too:
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<div class="btn-group me-1 mt-2">
|
|||
|
|
<b-dropdown variant="primary">
|
|||
|
|
<template v-slot:button-content>
|
|||
|
|
Primary
|
|||
|
|
<i class="mdi mdi-chevron-down"></i>
|
|||
|
|
</template>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Another action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Something else here</b-dropdown-item>
|
|||
|
|
<b-dropdown-divider></b-dropdown-divider>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Separated link</b-dropdown-item>
|
|||
|
|
</b-dropdown>
|
|||
|
|
</div>
|
|||
|
|
<!-- /btn-group -->
|
|||
|
|
<div class="btn-group me-1 mt-2">
|
|||
|
|
<b-dropdown variant="secondary">
|
|||
|
|
<template v-slot:button-content>
|
|||
|
|
Secondary
|
|||
|
|
<i class="mdi mdi-chevron-down"></i>
|
|||
|
|
</template>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Another action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Something else here</b-dropdown-item>
|
|||
|
|
<b-dropdown-divider></b-dropdown-divider>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Separated link</b-dropdown-item>
|
|||
|
|
</b-dropdown>
|
|||
|
|
</div>
|
|||
|
|
<!-- /btn-group -->
|
|||
|
|
<div class="btn-group me-1 mt-2">
|
|||
|
|
<b-dropdown variant="success">
|
|||
|
|
<template v-slot:button-content>
|
|||
|
|
Success
|
|||
|
|
<i class="mdi mdi-chevron-down"></i>
|
|||
|
|
</template>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Another action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Something else here</b-dropdown-item>
|
|||
|
|
<b-dropdown-divider></b-dropdown-divider>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Separated link</b-dropdown-item>
|
|||
|
|
</b-dropdown>
|
|||
|
|
</div>
|
|||
|
|
<!-- /btn-group -->
|
|||
|
|
<div class="btn-group me-1 mt-2">
|
|||
|
|
<b-dropdown variant="info">
|
|||
|
|
<template v-slot:button-content>
|
|||
|
|
Info
|
|||
|
|
<i class="mdi mdi-chevron-down"></i>
|
|||
|
|
</template>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Another action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Something else here</b-dropdown-item>
|
|||
|
|
<b-dropdown-divider></b-dropdown-divider>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Separated link</b-dropdown-item>
|
|||
|
|
</b-dropdown>
|
|||
|
|
</div>
|
|||
|
|
<!-- /btn-group -->
|
|||
|
|
<div class="btn-group me-1 mt-2">
|
|||
|
|
<b-dropdown variant="warning">
|
|||
|
|
<template v-slot:button-content>
|
|||
|
|
Warning
|
|||
|
|
<i class="mdi mdi-chevron-down"></i>
|
|||
|
|
</template>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Another action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Something else here</b-dropdown-item>
|
|||
|
|
<b-dropdown-divider></b-dropdown-divider>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Separated link</b-dropdown-item>
|
|||
|
|
</b-dropdown>
|
|||
|
|
</div>
|
|||
|
|
<!-- /btn-group -->
|
|||
|
|
<div class="btn-group me-1 mt-2">
|
|||
|
|
<b-dropdown variant="danger">
|
|||
|
|
<template v-slot:button-content>
|
|||
|
|
Danger
|
|||
|
|
<i class="mdi mdi-chevron-down"></i>
|
|||
|
|
</template>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Another action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Something else here</b-dropdown-item>
|
|||
|
|
<b-dropdown-divider></b-dropdown-divider>
|
|||
|
|
<b-dropdown-item href="javascript: void(0);">Separated link</b-dropdown-item>
|
|||
|
|
</b-dropdown>
|
|||
|
|
</div>
|
|||
|
|
<!-- /btn-group -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- end col -->
|
|||
|
|
</div>
|
|||
|
|
<!-- end row -->
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h4 class="card-title">Split button dropdowns</h4>
|
|||
|
|
<p class="card-title-desc mb-3">
|
|||
|
|
The best part is you can do this with any button variant, too:
|
|||
|
|
</p>
|
|||
|
|
<b-dropdown split text="Primary" class="m-2" variant="primary">
|
|||
|
|
<b-dropdown-item href="#">Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
|
|||
|
|
</b-dropdown>
|
|||
|
|
<b-dropdown split text="Secondary" variant="secondary" class="m-2">
|
|||
|
|
<b-dropdown-item href="#">Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
|
|||
|
|
</b-dropdown>
|
|||
|
|
<b-dropdown split text="Success" class="m-2" variant="success">
|
|||
|
|
<b-dropdown-item href="#">Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
|
|||
|
|
</b-dropdown>
|
|||
|
|
<b-dropdown split text="Info" class="m-2" variant="info">
|
|||
|
|
<b-dropdown-item href="#">Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
|
|||
|
|
</b-dropdown>
|
|||
|
|
<b-dropdown split text="Warning" class="m-2" variant="warning">
|
|||
|
|
<b-dropdown-item href="#">Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
|
|||
|
|
</b-dropdown>
|
|||
|
|
<b-dropdown split text="Danger" class="m-2" variant="danger">
|
|||
|
|
<b-dropdown-item href="#">Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
|
|||
|
|
</b-dropdown>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h4 class="card-title">Sizing</h4>
|
|||
|
|
<p class="card-title-desc mb-3">
|
|||
|
|
Button dropdowns work with buttons of all sizes, including default
|
|||
|
|
and split dropdown buttons.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<!-- Large button groups (default and split) -->
|
|||
|
|
<div class="me-1 mt-2">
|
|||
|
|
<b-dropdown size="lg" class="m-2">
|
|||
|
|
<template v-slot:button-content>
|
|||
|
|
Large button
|
|||
|
|
<i class="mdi mdi-chevron-down"></i>
|
|||
|
|
</template>
|
|||
|
|
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
|||
|
|
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
|||
|
|
<b-dropdown-item-button>Something else here</b-dropdown-item-button>
|
|||
|
|
</b-dropdown>
|
|||
|
|
|
|||
|
|
<b-dropdown size="lg" class="m-2" split text="Large button">
|
|||
|
|
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
|||
|
|
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
|||
|
|
<b-dropdown-item-button>Something else here</b-dropdown-item-button>
|
|||
|
|
</b-dropdown>
|
|||
|
|
|
|||
|
|
<b-dropdown size="sm" class="m-2">
|
|||
|
|
<template v-slot:button-content>
|
|||
|
|
Small button
|
|||
|
|
<i class="mdi mdi-chevron-down"></i>
|
|||
|
|
</template>
|
|||
|
|
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
|||
|
|
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
|||
|
|
<b-dropdown-item-button>Something else here</b-dropdown-item-button>
|
|||
|
|
</b-dropdown>
|
|||
|
|
|
|||
|
|
<b-dropdown split text="Small button" size="sm" class="m-2">
|
|||
|
|
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
|||
|
|
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
|||
|
|
<b-dropdown-item-button>Something else here</b-dropdown-item-button>
|
|||
|
|
</b-dropdown>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- end col -->
|
|||
|
|
</div>
|
|||
|
|
<!-- end row -->
|
|||
|
|
<div class="row">
|
|||
|
|
<!-- end col -->
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h4 class="card-title">Menu alignment</h4>
|
|||
|
|
<p class="card-title-desc">
|
|||
|
|
Add <code class="highlighter-rouge">.dropdown-menu-right</code> to
|
|||
|
|
a <code class="highlighter-rouge">.dropdown-menu</code> to right
|
|||
|
|
align the dropdown menu.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<b-dropdown id="dropdown-dropright" right>
|
|||
|
|
<template slot="button-content">
|
|||
|
|
Menu is right-aligned
|
|||
|
|
<i class="mdi mdi-chevron-down"></i>
|
|||
|
|
</template>
|
|||
|
|
<b-dropdown-item href="#">Action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
|||
|
|
<b-dropdown-item href="#">Something else here</b-dropdown-item>
|
|||
|
|
</b-dropdown>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h4 class="card-title">Dropright variation</h4>
|
|||
|
|
<p class="card-title-desc mb-3">
|
|||
|
|
Trigger dropdown menus at the right of the elements by adding
|
|||
|
|
<code>dropright</code> to the parent element.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div class="dropdown mt-1">
|
|||
|
|
<b-dropdown dropright variant="info" class="m-2">
|
|||
|
|
<template slot="button-content">
|
|||
|
|
Dropright
|
|||
|
|
<i class="mdi mdi-chevron-right"></i>
|
|||
|
|
</template>
|
|||
|
|
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
|||
|
|
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
|||
|
|
<b-dropdown-item-button>Something else here</b-dropdown-item-button>
|
|||
|
|
</b-dropdown>
|
|||
|
|
|
|||
|
|
<b-dropdown split text="Split dropright" dropright variant="info" class="m-2">
|
|||
|
|
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
|||
|
|
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
|||
|
|
<b-dropdown-item-button>Something else here</b-dropdown-item-button>
|
|||
|
|
</b-dropdown>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h4 class="card-title">Dropleft variation</h4>
|
|||
|
|
<p class="card-title-desc mb-3">
|
|||
|
|
Trigger dropdown menus at the right of the elements by adding
|
|||
|
|
<code>dropleft</code> to the parent element.
|
|||
|
|
</p>
|
|||
|
|
<b-dropdown dropleft variant="info" class="m-2">
|
|||
|
|
<template slot="button-content">
|
|||
|
|
<i class="mdi mdi-chevron-left"></i>
|
|||
|
|
Dropleft
|
|||
|
|
</template>
|
|||
|
|
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
|||
|
|
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
|||
|
|
<b-dropdown-item-button>Something else here</b-dropdown-item-button>
|
|||
|
|
</b-dropdown>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Layout>
|
|||
|
|
</template>
|