I am using bootstrap-vue to add <b-dropdown> components, but the button doesn't have an effect adding any css class.
Is this some bug with bootstrap-vue component or I am doing something wrong while adding a class?
new Vue({
el: "#vueapp",
data: function() {
return {}
}
})
.btn-circle {
width: 30px;
height: 30px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<div id="vueapp" class="vue-app">
<b-dropdown button-class="btn btn-danger d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle" no-caret>
<template v-slot:button-content>
<i class="fas fa-cog fa-lg"></i>
</template>
<b-dropdown-item href="#">An item</b-dropdown-item>
<b-dropdown-item href="#">Another item</b-dropdown-item>
</b-dropdown>
<button class="btn btn-light d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle ">
<i class="fas fa-plus-circle fa-lg"></i>
</button>
</div>
I was using the wrong prop. So, I had to use the toggle-class prop for <b-dropdown>.
So, using the toggle-class solved the problem for me.
new Vue({
el: "#vueapp",
data: function() {
return {}
}
})
.btn-circle {
width: 30px;
height: 30px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<div id="vueapp" class="vue-app">
<b-dropdown toggle-class="btn btn-danger d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle" no-caret>
<template v-slot:button-content>
<i class="fas fa-cog fa-lg"></i>
</template>
<b-dropdown-item href="#">An item</b-dropdown-item>
<b-dropdown-item href="#">Another item</b-dropdown-item>
</b-dropdown>
<button class="btn btn-light d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle ">
<i class="fas fa-plus-circle fa-lg"></i>
</button>
</div>
Related
I want to toggle the accordion only with the icons to add a click event on the button. How do I do this? I have tried this--
<html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div id="app">
<div id="t_accordion">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header " id="headingOne">
<button #click="toggleTheme" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
User
</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button #click="toggleTheme" class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
View
</button>
</h2>
</div>
<div>
<div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>User Content</strong>
</div>
</div>
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>View Content</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue#2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
message: 'Hello World!'
}
},
methods:{
toggleTheme(){
// alert('clicked')
this.isActive = !this.isActive;
}
}
});
</script>
<style>
.accordion-button {
pointer-events:none;
}
.accordion-button::after {
pointer-events: all;
}
</style>
</html>
In this snippet The toggle on icon is working but Click event on button does not work.
How do I do the accordion toggle on icon & click event on button separately?
I just split the button in two ways
<html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div id="app">
<div id="t_accordion">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header " id="headingOne">
<button class="d-flex bg-white mx-auto">
<a #click="toggleTheme">User</a>
</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="d-flex bg-white mx-auto">
<a #click="toggleTheme">View</a>
</button>
</h2>
</div>
<div>
<div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>User Content</strong>
</div>
</div>
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>View Content</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue#2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
message: 'Hello World!'
}
},
methods:{
toggleTheme(){
// alert('clicked')
this.isActive = !this.isActive;
}
}
});
</script>
<style>
.accordion-button {
pointer-events:none;
}
.accordion-button::after {
pointer-events: all;
}
</style>
</html>
I am trying to swap between two buttons using vue js transition. I need to exchange the position of two accordions like this-- adode xd example
I have done this part. But how do I swap the buttons using vue transitions?
<html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-
beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-
pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
</script>
<div id="app">
<div id="t_accordion">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header " id="headingOne">
<button class="d-flex bg-white mx-auto">
<a #click="leaveScreen = true" class="click-me">User</a>
<a href="#" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-
bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>
</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="d-flex bg-white mx-auto">
<a #click="toggleTheme">View</a>
<a href="" class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-
target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"></a>
</button>
</h2>
</div>
<div>
<div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-
bs-parent="#accordionExample">
<div class="accordion-body">
<strong>User Content</strong>
</div>
</div>
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>View Content</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue#2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
message: 'Hello World!'
}
},
methods:{
toggleTheme(){
// alert('clicked')
this.isActive = !this.isActive;
}
}
});
</script>
</html>
I am new to vue js. If anyone knows about vue transition animations plase help me to solve the problem
I am super new to vue js and I am trying to the switch toggle shown here: https://headlessui.dev/vue/switch
So here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<script src="https://kit.fontawesome.com/7de28896bc.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Styles -->
<link rel="stylesheet" href="http://coinbetix.test/css/app.css">
<!-- Scripts -->
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
<!-- Page Content -->
<main>
<div class="py-12 max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
<div id="app">
<template>
<Switch
v-model="enabled"
:class="enabled ? 'bg-teal-900' : 'bg-teal-700'"
class="relative inline-flex items-center h-6 rounded-full w-11"
>
<span class="sr-only">Enable notifications</span>
<span
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
class="inline-block w-4 h-4 transform bg-white rounded-full"
/>
</Switch>
</template>
</div>
<form action="http://mysite.test/deposit" method="post">
<div class="w-1/2 mx-auto">
<input type="hidden" name="_token" value="Izbs4W1YHkxWODGgop8J1cOqpDuH7W1N9VoBzK6z"> <input type="hidden" name="coin" value="ETH">
<label for="coin" class="block text-sm font-medium text-gray-700">Select Crypto</label>
<select class="block w-full shadow-sm sm:text-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md" name="coin" aria-label="Default select example">
<option value="ETH"> Ethereum</option>
<option value="LTC"> Litecoin</option>
<option value="ADA"> Cardano</option>
</select>
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
<button type="submit" class="btn btn-outline-primary w-100">Generate Deposit Address</button>
</div>
</form>
</div>
</main>
</div>
<script src="http://mysite.test/js/app.js" defer></script>
</body>
</html>
<script type="module" src="/js/app.js">
import { ref } from 'vue'
import { Switch } from '#headlessui/vue'
export default {
components: {
Switch,
},
setup() {
const agreed = ref(false)
return {
agreed,
}
},
}
</script>
What is not rendered at all is that part:
<div id="app">
<template>
<Switch
v-model="enabled"
:class="enabled ? 'bg-teal-900' : 'bg-teal-700'"
class="relative inline-flex items-center h-6 rounded-full w-11"
>
<span class="sr-only">Enable notifications</span>
<span
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
class="inline-block w-4 h-4 transform bg-white rounded-full"
/>
</Switch>
</template>
</div>
Any idea why it is not shown at all ?
Just replace your setup method with this code -
setup() {
const enabled = ref(false)
return {
enabled,
}
},
You used enabled in Switch component as v-model so you should replace your agreed variable with enabled.
Or you may use agreed in v-model instead of enabled.
I tried to make the element 'branch' responsive aligned perfectly below 'status' when I tried to minimize the browser's window, how can I do that? This is what I've got so far result, I've also tried to use #media only screen CSS but still shows no sign of responsiveness, here's my lines of code
`
<template>
<base-header class="pb-4 pb-5 pt-6 pt-md-6 bg-gradient-success">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1"
/>
<template>
<div>
<b-form inline>
<label for="status">Status⠀⠀⠀⠀ :</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
<!-- branchstyle -->
<div class="branch">
<div class="col-lg-10 text-right">
<b-form inline label-align-sm="right" style="margin-left: 70px">
<div class="col-sm-2" label for="branch">Branch⠀:</div>
<div class="col-sm-8">
<b-form-input
v-model="text"
style="margin-left: 33px"
></b-form-input>
</div>
<br />
<!-- <div class="input-group col-sm-2">
<b-button variant="outline-dark"></b-button>
</div> -->
<!-- <div>
</div> -->
</b-form>
</div>
</div>
</b-form>
</div>
<div>
<b-form inline>
<label for="storecode">Store Code⠀:</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
<div class="branch">
<div class="col-lg-12 text-right">
<b-form inline label-align-sm="right">
<div class="input-group col-sm-10">
<b-button
variant="dark"
style="margin-left: 205px; margin-top: 5px"
>Search</b-button
>
</div>
<!-- <div>
</div> -->
</b-form>
</div>
</div>
</b-form>
</div>
<br />
<br />
<b-card body>
<b-card-header class="border-0">
<h3 class="mb-0">Stock List</h3>
</b-card-header>
<div class="text-center">
<b-table dark striped hover :items="items" :fields="fields"></b-table
><br />
</div>
</b-card>
</template>
</base-header>
</template>
<style></style>`
Thanks in advance and hope u have a nice day☺
I try to simulate your issue and implement this code snippet. Because I couldn't see your result in the code snippet, I assume that you want a responsive form that, when the screen minimizes, your inputs are placed into the right section.
I've done some cleaning and improvements for better readability, and I used flex for your responsive issue.
new Vue({
el: "#app",
data: function() {
return {
text: "a",
fields: ['first_name', 'last_name', 'age'],
items: [{
isActive: true,
age: 40,
first_name: 'Dickerson',
last_name: 'Macdonald'
},
{
isActive: false,
age: 21,
first_name: 'Larsen',
last_name: 'Shaw'
},
{
isActive: false,
age: 89,
first_name: 'Geneva',
last_name: 'Wilson'
},
{
isActive: true,
age: 38,
first_name: 'Jami',
last_name: 'Carney'
}
]
}
},
});
.customForm>div {
display: flex;
flex: 1 0 250px;
margin: 1rem;
}
.customForm {
display: flex;
flex-wrap: wrap;
}
.customForm > div > label {
flex: 1 0 auto;
align-items: flex-end;
display: flex;
margin-right: .5rem;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-form class="customForm">
<div>
<label>Status:</label>
<b-form-input v-model="text" />
</div>
<div>
<label>Branch:</label>
<b-form-input v-model="text" />
</div>
<div>
<label>Store Code:</label>
<b-form-input v-model="text" />
</div>
<div>
<b-button variant="dark">Search</b-button>
</div>
</b-form>
<b-card body>
<b-card-header class="border-0">
<h3 class="mb-0">Stock List</h3>
</b-card-header>
<div class="text-center">
<b-table dark striped hover :items="items" :fields="fields" />
</div>
</b-card>
</div>
I just started vue.js and I try to create a todo like application. The only difference is that for each element of the list, I have a child list. The main list works fine but the child list does not work. I try several hours to find what is wrong with my code but I can not solve the problem. Can someone tell me what I do wrong?
var app = new Vue({
el: "#app",
data: {
groups: []
},
methods: {
deleteGroup(group) {
const groupIndex = this.groups.indexOf(group);
this.groups.splice(groupIndex, 1);
},
createGroup() {
this.groups.push({
title: "",
listMode: 0,
properties: []
});
},
deleteProperty(group, property) {
const propertyIndex = properties.indexOf(group.properties, property);
group.properties.splice(propertyIndex, 1);
},
createProperty(group) {
group.properties.push({
name: "",
type: 0
});
}
}
});
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</head>
<body>
<div id="app" style="margin: auto; width: 600px;">
<div
v-for="(group, index) in groups"
style=" border: 2px solid gray; margin-bottom: 20px;"
>
<div class="form-group">
<label class="control-label">Group Name :</label>
<input class="form-control" v-model="group.title" />
<span class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">List Mode :</label>
<select class="form-control" v-model="group.listMode">
<option value="0">Fields</option>
<option value="1">List of Fields</option>
</select>
<span class="text-danger"></span>
</div>
<div style="padding-left: 50px;">
<div
v-for="(property, Index2) in group.properties"
style=" border: 2px solid gray; margin-bottom: 20px;"
>
<div class="form-group">
<label class="control-label">Property Name :</label>
<input class="form-control" v-model="property.name" />
<span class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">Type :</label>
<select class="form-control" v-model="peroprty.type">
<option value="0">Fields</option>
<option value="1">List of Fields</option>
</select>
<span class="text-danger"></span>
</div>
<!--
<button class='btn btn-success' v-on:click="deleteProperty(group, property)"><i class='trash icon'></i> Delete</button>
-->
</div>
<button class="btn btn-success" v-on:click="createProperty(group)">
Create Group
</button>
</div>
<button class="btn btn-success" v-on:click="deleteGroup(group)">
<i class="trash icon"></i> Delete
</button>
</div>
<button class="btn btn-success" v-on:click="createGroup()">
Create Group
</button>
</div>
</body>
You have a syntax error in your v-model currently with name: "peroprty"
<select class="form-control" v-model="peroprty.type">
Try update to "property"
Obs: You always can look on console/debug of chrome to see what kind error can be.
Especially when trying to do some event with: v-for, v-if, #click, and among others attrs of vue