CODEWITHSUNDEEP
vue.jsdrop-down-menudatatableiconsbootstrap-vue
Habibur Rahman
Habibur Rahman

Reputation: 73

How to customize bootstrap-vue dropdown menu using bootstrap-vue icon?

I am working with vue js and bootstrap-vue. I am tring to implement bootstrap vue datatables.In the table I want to use dropdownt using tree-dot-vertical icon in the action column. Here my table view..

My table view

In the above table the iconic dropdown menu in the action column there are two icon .One is three dot vertical icon and the other is arrow sign. I want to remove the arrow sign and border from the dropdown menu.

Here the code for dropdown menu..

<template v-slot:cell(actions)="data">
  <div>
    <b-dropdown id="dropdown-1" variant="outline-info">
      <template #button-content>
        <b-icon
          icon="three-dots-vertical"
          aria-hidden="true"
        ></b-icon>
      </template>

      <b-dropdown-item
        variant="primary"
        :to="{
          name: 'QuizEditPage',
          params: { id: data.item.id },
        }"
        >Edit</b-dropdown-item
      >
      <b-dropdown-item
        variant="danger"
        @click="deleteQuiz(data.item.id)"
        >Delete</b-dropdown-item
      >
    </b-dropdown>
  </div>
</template>

How can solve the proble?Please help.

Upvotes: 2

Views: 8014

Answers (1)

Iman Shafiei
Iman Shafiei

Reputation: 1617

Using no-caret solves your problem.

Note that you can replace <custom-icon /> with <b-icon icon='three-dots-vertical' />

Vue.component('customIcon', {
  template: `<svg xmlns="http://www.w3.org/2000/svg" width="15.352" height="15.355" viewBox="0 0 15.352 15.355">
        <path id="Union_19" data-name="Union 19" d="M-19.5-15958.5l-7.5,7.5,7.5-7.5-7.5-7.5,7.5,7.5,7.5-7.5-7.5,7.5,7.5,7.5Z" transform="translate(27.176 15966.178)" fill="none" stroke="#bbb" stroke-width="0.5"/>
    </svg>`
})

new Vue({
  el: "#app",
});
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-dropdown no-caret>
    <template #button-content>
        Custom Dropdown
        <custom-icon /> // or any other icons for example b-icon
    </template>
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
  </b-dropdown>
</div>

Upvotes: 2

Related Questions