I understand if I use v-badge, I get a circle badge but I want a triangle badge instead like below.
Could anyone give an advice of how to make it?
Thank you.
You could use the v-badge's badge slot to insert a div with 1, and style that div
In the template, apply a class to v-badge (named "triangle"), and insert a div in the badge slot to contain the number along with a class (named "my-badge"):
<v-badge class="triangle">
<template v-slot:badge>
<div class="my-badge">1</div>
</template>
</v-badge>
Add CSS styles for the .triangle .v-badge__badge and .my-badge:
.triangle .v-badge__badge {
/* remove border radius to allow icon to fill space */
border-radius: 0;
/* use a clip-path to form a quirky triangle */
clip-path: polygon(100% 51%, 0 0, 3% 100%);
height: 30px;
width: 30px;
}
.my-badge {
display: flex;
justify-content: center;
align-items: center;
padding-right: 0.9em;
font-size: 14px;
height: 100%;
color: #fff;
background: green;
}
demo
Related
I'm working on a website that has a lot of z-index values and I'm trying to make a Drag & Drop menu that you can move around but stays in the screen space at all times. But because the drag & drop menu would have a fixed position it breaks the z-index positioning (it reveals borders that it wouldn't if it was positioned absolute).
I understand that you can't position a fixed element with z-index but do you guys maybe know a workaround for it?
Here is the JS fiddle of what I have so far (I left the header in):
https://jsfiddle.net/wdeyvb7q/
HTML:
<div id="menu-container">
<div id="draggable3" class="draggable ui-widget-content">
<p>I'm a very confused box, position fixed on my container breaks the style.</p>
</div>
</div>
CSS (with #menu-container absolute):
#menu-container {
width: calc(90vw - 94px);
height: calc(100vh + 8px);
top: -4px;
position: absolute;
left: calc(5vw + 47px);
}
.draggable {
background: white;
width: 100%;
height: 90px;
float: left;
position: absolute;
z-index: 200;
border-top: 4px solid black;
border-bottom: solid black;
}
#draggable, #draggable2 {
margin-bottom:0px;
}
#draggable {
cursor: n-resize;
}
JS:
$( function() {
$( "#draggable3" ).draggable({ containment: "#menu-container", scroll: false });
} );
And here are 2 screenshots of an absolute & fixed position
I solved it! I removed both inner borders of the sidebars and added 2 divs floating left and right. By positioning those divs under the menu code in the HTML file it will stay under the menu, so I added a border on each side and that didn't break the design =)!
JSFiddle: https://jsfiddle.net/adf2gte7/
HTML:
<!-- Left And Right Inner Borders -->
<div class='left-border-menu'></div>
<div class='right-border-menu'></div>
CSS:
/* Inner Borders */
.left-border-menu {
width: calc(5vw + 47px);
height: 2000px;
background: orange;
float: left;
border-right: 4px solid black;
}
.right-border-menu {
width: calc(5vw + 47px);
height: 2000px;
background: orange;
float: right;
border-left: 4px solid black;
}
I am using bootstrap vue and am trying to animate/transition the drop downs. This is proving to be fairly difficult as they do not use v-if or v-show so the transition will not work. Alternatively because the way the components work if you use v-if the drop down trigger will be hidden. I can't find anything online to bootstrap vue specifically on this but I feel this shouldn't be as tough as it has turned out to be. thanks for any help you can give
<div id="app">
<b-navbar type="dark" fixed>
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown text="Tools">
<b-dropdown-item to="/navItem1">Item 1</b-dropdown-item>
<b-dropdown-item to="/export"> Item 2</b-dropdown-item>
</b-nav-item-dropdown>
// This won't work as it hides the main dropdown trigger right form the start
<b-nav-item-dropdown text="Tools" v-if="toggleDropdown">
<b-dropdown-item to="/navItem1">Item 1</b-dropdown-item>
<b-dropdown-item to="/export"> Item 2</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-navbar>
</div>
<script>
export default {
name: 'nav',
data () {
return { toggleDropdown: false }
},
mounted: function () {
// I can listen for events here but I still can't trigger the transition
this.$root.$on('bv::dropdown::show', bvEvent => {
this.toggleDropdown = true
})
this.$root.$on('bv::dropdown::hide', bvEvent => {
this.toggleDropdown = false
})
}
}
</script>
<style lang="scss">
.navbar {
.dropdown-menu {
transform-origin: top;
transition: transform 10s ease-in-out;;
}
}
.dd-slide-enter,
.dd-slide-leave-to { transform: scaleY(0); }
</style>
It's pretty hard to achieve a clean slide-up/down animation because BootstrapVue uses display:none/block to hide/show the dropdown menu. What you can do it's manipulate the max-height of the element as explained here.
I added an 'animated' class to the parent element, for example your b-navbar to select which dropdown has to be animated. Then i removed display: none from the default status of the dropdown and hidden it setting its max-height and padding to 0 and its border to none. When you click the button the dropdown gets the class 'show'so you can give it a max-height different than 0, as explained in the answer i've linked to you, you have to set it higher than the actual height of the dropdown menu otherwise it gets cropped out.
.animated {
.dropdown-menu {
overflow: hidden;
display: block!important;
max-height: 0!important;
&:not(.show) {
padding: 0;
border: none;
}
&.show {
transition: max-height 300ms ease-in-out;
max-height: 500px!important; //this must have to be higher than the max height of the dropdown list
}
}
}
Just came across this same issue.
Ended up following with previous example, but this one works for both up/down transitions and doesn't mess with overflows in case you want to add triangles.
.dropdown-menu {
border: 1px solid #ebeef5;
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.25);
// Slide down transtion
display: block !important;
&:not(.show) {
padding: 0px;
border-width: 0px;
border-color: transparent;
box-shadow: none;
transition: padding 1.3s ease, border-width 1.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
> li {
max-height: 0px;
overflow: hidden;
transition: max-height 0.3s ease;
}
&.show {
> li {
max-height: 100px;
}
}
// Add chevron to top
&[x-placement^="bottom"] {
&::before {
content:"";
position: absolute;
right: 11px;
top: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #fff transparent;
z-index: 99999999;
}
}
// Add chevron to bottom
&[x-placement^="top"] {
&::after {
content:"";
position: absolute;
right: 11px;
bottom: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #fff transparent transparent transparent;
z-index: 99999999;
}
}
}
I would like to add dynamically image (check arrow) into a div which contains other div information (image + texte).
This adding means that users owned this "object" in the application. He can added or deselected this object on the fly.
The result of this action is appear or disappear arrow on the fly.
This process run perfectly in my vue.js component. But I can view appear an offset each time that arrow appears like this :
I try to use v-if or v-show vue.js directives but the result is the same.
I don't want to have a new offset appear when action to checked item is launch.
this is the HTML template :
<div id="container">
<div #click="checkedItem(key.id)" class="container-item" v-for="(key, value) in objects">
<div class="check" v-show="checked[key.id]">
<img height="35" width="35" src="../../../static/checked.png"></img>
</div>
<div class="image">
<img src="https://picsum.photos/75/75/?image=25" alt="logo"></img>
</div>
<div class="name">{{ key.name }}</div>
</div>
</div>
This is the CSS stylesheet component :
<style scoped>
#container
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container-item
{
display: flex;
flex-direction: row;
margin: 30px 30px 30px 30px;
}
.container-item div.check
{
z-index: 3;
position: relative;
left: 20px;
bottom: 15px;
}
.container-item div.check > img
{
height: 35px;
width: 35px;
}
.container-item div.image
{
z-index: 2;
border: 1px solid blue;
}
.container-item div.name
{
z-index: 1;
position: relative;
top: 12px;
right: 10px;
text-align: center;
line-height: 45px;
width: 150px;
max-height: 50px;
border: 1px solid blue;
background-color: yellow;
}
</style>
And the checkedItem method component :
checkedItem: function (id)
{
let isChecked = this.checked[id] ? true : false
isChecked ? this.checked[id] = false : this.checked[id] = true
},
How can "add" DOM node HTML into HTML template component vue.js whitout create a new offset on the fly ?
As we have discussed in the comments, this is purely a CSS thing. What you want is to take div.check out from the layout flow, so that it does not influence the positioning of other elements. This can be done by adding position: absolute to its ruleset. For that to work, remember to add position: relative to its parent, too:
.container-item {
display: flex;
flex-direction: row;
margin: 30px 30px 30px 30px;
/* Allow div.check to be positioned relative to its parent */
position: relative;
}
.container-item div.check {
z-index: 3;
left: 20px;
bottom: 15px;
/* Take the check icon out of layout flow */
position: absolute;
}
I have a site made of "slides" 100% height.
<div class="slide" id="one">page1</div>
<div class="slide" id="two">page2</div>
<div class="slide" id="three">page3</div>
I use waypoints to perform some animation based on the position of the scroll, and it works fine. The context used is "window" and below an example:
$('#one').waypoint(function(direction)
{
//do something
}, { offset: '75%' });
By the way, in a slide there is a button that modifies the height of an image (it becomes very big), so after the resize the height of the container changes and also the height of the "slide", too.
I need the waypoint to refresh, in order to be raised at the same percentage calculated on the new size of the slide. I tried to do
$.waypoints('refresh');
after the resize, but it seems not working.
Below a piece of my css:
html {
height: 100%;
}
body{
text-align:center;
height:100%;
margin: 0 auto;
overflow-x: hidden;
}
.slide{
height: 100%;
margin: 0 auto;
background: white;
min-height: 700px;
min-width: 1024px;
}
#home {
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
min-height: 800px;
}
Can someone help me?
This is a fluid design of 4 images (width = 160px) with ul or floated divs.
Everything is well when resizing window. It's fluid.
But when i pass to an absolute position, i find no more 160px initilally
Code:
body { position:relative;} .container {
/position:absolute; left:0; top:0;/ /* remove this comment to see
differnce */
margin: 0; padding:0; border:black 1px solid; max-width:690px; overflow: hidden/clear floated childs/;} .galleryItem { float:
left; width: 23%; margin:0 1%; padding:1% 0;} .galleryItem img {
max-width: 100%;} ul { list-style:none;} ul.thumbs
{ /position:absolute; left:0; top:100px;/ /* remove this comment to
see differnce */
display:block; margin: 0; padding:0; border:black 1px solid; max-width:690px; overflow: hidden/clear floated childs/;}
ul.thumbs>li{ display:block; float:left; width: 23%; margin:0 1%;
padding:1% 0;} ul.thumbs>li img{ display:block; max-width:100%;}
I think not to mix the % and px for the liquid design.
And knowledge that i have i can say that if position is absolute then there is something is fixed so no liquid.
if you want liquid design better to do positioning in %.
you can have the bootstrap css too for responsive design.