+215
-114
lines changedFilter options
+215
-114
lines changed Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ details and caveats.
16 16 17 17
## Directive syntax and usage
18 18 19 -
The directive is applied to the element or component that triggers the visibility of hte target. The
19 +
The directive is applied to the element or component that triggers the visibility of the target. The
20 20
target component can be specified (via its ID) as either a directive modifier(s), the directive
21 21
argument, or as a string/array passed to as the directive value:
22 22
@@ -34,7 +34,7 @@ argument, or as a string/array passed to as the directive value:
34 34 35 35
Modifiers, argument, and the value can be used at the same time when targeting multiple components.
36 36 37 -
### Example usage
37 +
**Example usage:**
38 38 39 39
```html
40 40
<template>
@@ -62,6 +62,44 @@ Modifiers, argument, and the value can be used at the same time when targeting m
62 62
<!-- v-b-toggle-directive.vue -->
63 63
```
64 64 65 +
## Usage on links
66 + 67 +
<span class="badge badge-info small">2.15.0+</span>
68 + 69 +
If placing the directive on a link (or a component that renders a link), the target ID can
70 +
alternatively be specified via the `href` attribute.
71 + 72 +
Note that the browser URL will change and the page may scroll the target into view. To prevent the
73 +
URL from changing and the page from scrolling, add `@click.prevent` to the link.
74 + 75 +
**Example usage:**
76 + 77 +
```html
78 +
<template>
79 +
<div>
80 +
<div class="mb-3">
81 +
<a v-b-toggle href="#example-collapse" @click.prevent>Toggle Collapse</a>
82 +
<b-button v-b-toggle href="#example-sidebar" @click.prevent>Toggle Sidebar</b-button>
83 +
</div>
84 + 85 +
<b-collapse id="example-collapse">
86 +
<b-card title="Collapsible card">
87 +
Hello world!
88 +
</b-card>
89 +
</b-collapse>
90 + 91 +
<b-sidebar id="example-sidebar" title="Sidebar" shadow>
92 +
<div class="px-3 py-2">
93 +
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
94 +
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
95 +
</div>
96 +
</b-sidebar>
97 +
</div>
98 +
</template>
99 + 100 +
<!-- v-b-toggle-links.vue -->
101 +
```
102 + 65 103
## Hiding and showing content in the toggle trigger element
66 104 67 105
When using the `v-b-toggle` directive, the class `collapsed` will automatically be placed on the
@@ -1,7 +1,16 @@
1 1
import KeyCodes from '../../utils/key-codes'
2 2
import looseEqual from '../../utils/loose-equal'
3 3
import { arrayIncludes, concat } from '../../utils/array'
4 -
import { addClass, hasAttr, isDisabled, removeAttr, removeClass, setAttr } from '../../utils/dom'
4 +
import {
5 +
addClass,
6 +
getAttr,
7 +
hasAttr,
8 +
isDisabled,
9 +
isTag,
10 +
removeAttr,
11 +
removeClass,
12 +
setAttr
13 +
} from '../../utils/dom'
5 14
import { isBrowser } from '../../utils/env'
6 15
import { eventOn, eventOff } from '../../utils/events'
7 16
import { isString } from '../../utils/inspect'
@@ -51,19 +60,29 @@ export const EVENT_STATE_REQUEST = 'bv::request::collapse::state'
51 60 52 61
const KEYDOWN_KEY_CODES = [ENTER, SPACE]
53 62 63 +
const RX_HASH = /^#/
64 +
const RX_HASH_ID = /^#[A-Za-z]+[\w\-:.]*$/
54 65
const RX_SPLIT_SEPARATOR = /\s+/
55 66 56 67
// --- Helper methods ---
57 68 58 -
const isNonStandardTag = el => !arrayIncludes(['BUTTON', 'A'], el.tagName)
69 +
const isNonStandardTag = el => !arrayIncludes(['button', 'a'], el.tagName.toLowerCase())
59 70 60 -
const getTargets = ({ modifiers, arg, value }) => {
71 +
const getTargets = ({ modifiers, arg, value }, el) => {
61 72
// Any modifiers are considered target IDs
62 73
const targets = keys(modifiers || {})
63 74 64 75
// If value is a string, split out individual targets (if space delimited)
65 76
value = isString(value) ? value.split(RX_SPLIT_SEPARATOR) : value
66 77 78 +
// Support target ID as link href (`href="#id"`)
79 +
if (isTag(el.tagName, 'a')) {
80 +
const href = getAttr(el, 'href') || ''
81 +
if (RX_HASH_ID.test(href)) {
82 +
targets.push(href.replace(RX_HASH, ''))
83 +
}
84 +
}
85 + 67 86
// Add ID from `arg` (if provided), and support value
68 87
// as a single string ID or an array of string IDs
69 88
// If `value` is not an array or string, then it gets filtered out
@@ -172,7 +191,7 @@ const handleUpdate = (el, binding, vnode) => {
172 191
setToggleState(el, el[BV_TOGGLE_STATE])
173 192 174 193
// Parse list of target IDs
175 -
const targets = getTargets(binding)
194 +
const targets = getTargets(binding, el)
176 195 177 196
/* istanbul ignore else */
178 197
// Ensure the `aria-controls` hasn't been overwritten
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4