-
Notifications
You must be signed in to change notification settings - Fork 1
/
NavLink.vue
46 lines (38 loc) · 1.09 KB
/
NavLink.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<template>
<a
class="nav-link"
:class="classes"
href="#"
>
<!-- @slot Displays the content of the nav link -->
<slot />
</a>
</template>
<script lang="ts">
import useActive, {activeProps} from '@/composables/useActive';
import useDisabled, {disabledProps} from '@/composables/useDisabled';
import {computed} from 'vue';
import useClasses from '@/composables/useClasses';
</script>
<script lang="ts" setup>
const props = defineProps({
...activeProps,
...disabledProps,
});
const {classes} = useClasses(computed(() => [
useActive(props.active).activeClass.value,
useDisabled(props.disabled).disabledClass.value,
]));
</script>
<docs>
```vue
<NavLink href="https://github.com/owowagency/bootstrap-vue">
GitHub
</NavLink>
```
## Imported Props
| Prop name | Description | Type | Values | Default |
| --------- | ----------------------- | ------- | ------ | --------- |
| active | Adds the `active` class | boolean | - | false |
| disabled | Disables the component | boolean | - | false |
</docs>