I use angular bootstrap accordion with pannels I want to create open/close animate for the pannels
<ngb-accordion>
<ngb-pannel>
<ng-template ngbPannelTitle><ng-template>
<ng-template ngbPannelContent><ng-template>
</ngb-pannel>
<ngb-pannel>
<ng-template ngbPannelTitle><ng-template>
<ng-template ngbPannelContent><ng-template>
</ngb-pannel>
</ngb-accordion>
Related
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
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
I use v-for to render table rows
<table>
<tr v-for="(item, i) in data">
<td>
<button v-if="...">....</button>
<el-tooltipplacement="right">
<button v-if="..." >...</button>
<div slot="content">
<button #click="...">...</button>
<button #click="...">...</button>
</div>
</el-tooltip>
</td>
</tr>
</table>
The tooltip is a component of element ui,
the tooltip will display after hovering the button.
The table data is gotten by ajax call,
and there are several pages,
it will get the data by ajax call while turning page,
the problem occurs after turning page.
Some tooltip will not display after hovering,
I assumed the problem is doms don't re-render,
I used $forceUpdate() after ajax call,
but it had no effect.
If you can please help me out.
element ui Tooltip component and exmaple： https://element.eleme.io/#/en-US/component/tooltip
For the <ngx-datatable-column> html template, I want to add html attribute tabindex to support 508 but it is not working for me. Also the pagination can not hit enter or keyboard event to go to next page.
<ngx-datatable-column name="Name" tabindex="0">
<ng-template></ng-template>
</ngx-datatable-column>`
I think this does not work since there is no -element in the rendered DOM.
You could use templates instead to wrap each cell into something with a tabindex attribute.
<ngx-datatable-column name="Name">
<ng-template let-column="column" ngx-datatable-header-template>
<span tabindex="0">{{column.name}}</span>
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
<span tabindex="0">{{value}}</span>
</ng-template>
</ngx-datatable-column>
See https://stackblitz.com/edit/angular-ngx-datatable-tab for an example.
I am using bootstrap popover with vuejs.
How can I trigger vue functionality?
In below code when I am clicking on add break link, it opens bootstrap popover, with click me button. Now here vuejs doesn't work, if I click on click me, it is not prompting alert.
<a data-toggle="popover" data-placement="top" v-d2d-popover data-content='<button v-on:click="alert(6)">click me</button>' href="javascript:void(0)" class="btn btn-link popover-notitle">
<i class="ace-icon fa fa-plus-circle bigger-120 green"></i>add break
</a>
Can anybody help me?
Since the button is just written in a string, it isn't being compiled by Vue. Here are a couple of ideas to try:
Use Vue for popover as well: https://yuche.github.io/vue-strap/#popover
Create popover content in a separate div (in your component so Vue will compile it) and then fetch the content for the popover:
{
content: $('#myPopoverContent').html(),
html: true
}