how to add font awesome on :title tab bootstrap vue.js?
<b-tab :title="'Sebagai '+application_config.studentLabel+' <i class="fas fa-user-graduate"></i>'" active><p>I'm the first tab</p></b-tab>
I tried but an error.
thanks
You can use Bootstrap Vue Slots for tabs component
<template v-slot:title>
//add other data
//add icon like
<i class="fas fa-user-graduate"></i>
</template>
you can find in documentations as Add custom content to tab title
Related
This is in reference to a project using VueJS 2.0 and Swiper v8.3.2
If I had a swiperSlide that looks similar to this:
<template>
<a
:href="url"
:title="title"
>{{ title }}</a>
</template>
How would I enable a click-through to _self, _target etc.? The click is being captured by Swiper, even adding a #click function won't work.
I was reading bootstrap Collapse docs and decided to try horizontal collapse. Here is the code of a Vue component that used same code as bootstrap docs:
Vue component:
<template>
<section>
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapsId" aria-expanded="false" aria-controls="collapsId">
Toggle width collapse
</button>
</div>
<div>
<div class="collapse collapse-horizontal" id="collapsId">
<div class="card card-body" style="width:50%;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
</section>
</template>
But the transition to expand the .card does not work correctly. At first the .card has the whole height of the page and then suddenly it expands completely to 50% width! If I use style="width:500px;" instead of style="width:50%;", that works correctly. Could any developer please help me why it does not work with relative width? Bootstrap docs said:
Feel free to write your own custom Sass, use inline styles, or use our width utilities.
But that does not work correctly!
I'm working on the tabs component in vue similar to the vertical navbar on the left and tab content on the right. My tabs titles have icons and I'm trying to use <slot> to put different icons in each tab title.
Blade template:
<tabs>
<tab name="one" :selected="true">
<svg>icon 1</svg>
</tab>
<tab name="two">
<svg>icon 2</svg>
</tab>
<tab name="three">
<svg>icon 3</svg>
</tab>
<tabs>
Tabs.vue
<template>
<ul class="my-class" role="tablist">
<li v-for="(tab, index) in tabs" :key="index">
<a>
// here I want to place my icon defined in my blade view
<slot></slot> // this doesn't work and it is showing 0 items in tab array
<span>{{ tab.name }}</span>
</a>
</li>
<slot></slot>
// if placed here it works and it is showing 3 items in tab array
// but icon's are placed under all 3 li elemets
</ul>
</template>
Tab.vue
<template>
<div>
<slot></slot>
</div>
</template>
I have already tried a lot of different combinations, but no one worked and it is hard to know what's going on as there are no error messages. I'm not experienced in vue and I'm trying to check vue documentations but there must be something that escapes me or something that I'm not getting.
Could someone advise me where is the error or how should I rewrite my code?
I am trying to open a MDB dropdown menu once I click on a modal button. The modal is a separate component. How can I communicate between the 2 components?
<mdb-dropdown>
<!-- Shopping Cart Button -->
<mdb-dropdown-toggle class="pl-0" ref="toggle" slot="toggle">
<a>
<span class="fa-stack">
<i class="fa fa-shopping-cart fa-stack-2x"></i>
<i id="cartTotal" style="font-size: 14px;" class="fa fa-stack-1x">{{$store.state.cartLength}}</i></span>
</a>
</mdb-dropdown-toggle>
I am able to open it in the same component by using and it works but I have to be able to open it from another component:
mounted() {
this.$refs.toggle.$el.click();
}
Thanks in advance
I have a simple logout button in my navbar and I would like the word "Logout" and the icon from font-awesome to display inline. I thought <span> was an inline tag, but it is causing a line break. I need the span in order to hide the extra text on small screens.
<a href="/logout/" type="button" class="btn btn-default navbar-btn pull-right">
<span class="hidden-xs">Logout</span><i class="fa fa-sign-out fa-lg"></i>
</a>
You can see the problem here: http://bootply.com/94625
try to add:
#media(min-width:768px)
{
.hidden-xs{display:inline !important}
}
the .hidden-xs sets the display of your span to block
It's because you need to download font-awesome and have it in your root directory also point it in your head section. That's because it doesn't show on your live link.
Hope this helps.