I am using the flex box in vue.js but the project cannot perform the functionality. the code is
<div class="d-flex">
<div class="p-2"><p>Resturants</p></div>
<div class="ml-auto p-2"><b-icon icon="three-dots-vertical"></b-icon></div>
</div>
and the output is the output image is
can you elaborate how to solve this task.
Can't comment, so i'll try to create an answer.
As other have suggested, it's strange that your box looks like this, without any css applied on.
What might be, is that the box is taking css from other components.
In every vue component, write the tag as follows
<style scoped>
this will apply the css only to that certain component.
Regarding your question, you could do something like this
<div class="row row-flex">
<div class="col-6">Content1</div>
<div class="col-6">Content2</div>
</div>
And then add your css.
Hope it helped
Related
I tried to animate addition and deletion of element in v-for loop.
I searched some similar quesitons here and mainly the answers were about
class name change in vue3 from vue2.
I'm sure my case is not related to class name.
My code is as below.
Component name: VueOnly
<transition-group tag='div' class='VueOnly' name='fade'>
<div class='graphs' v-for="boro in lotteriesByBorough" :key="boro['value']">
<div>{{boro[0]}}</div>
<div class="bargraph" :style="{width: xScale(boro[1]) + 'px'}"></div>
</div>
</transition-group>
<div style='display:none'>{{console}}</div>
</template>
*css
.fade-enter-active{
animation:fade-in 1s
}
.fade-leave-active{
animation:fade-in 1s reverse
}
#keyframes fade-in {
from{
opacity:0 ;
width:0 ;
background-color:blue ;
}
to{
opacity:1;
width:100%;
}
}
I strongly believe I am following the syntax of
why is this not working?
It works only when 'leave' event is triggered.
Temporary class is added when 'leave' events are running while no class is added when 'enter' events are running.
So I think there is a problem in enter process in general.
Does it have anything to do with addition logic?
My addition logic is as below.
App.vue
<div class="filters">
<el-checkbox-group v-model="filters">
<el-checkbox label="1"></el-checkbox>
<el-checkbox label="2"></el-checkbox>
<el-checkbox label="3"></el-checkbox>
<el-checkbox label="4"></el-checkbox>
</el-checkbox-group>
</div>
<div class="section" :style="{width:`${width}px`,height:`${height}px`}">
<vue-only
:lotteries="filteredLotteries"
:lottery-stats="lotteryStats"
:width="width"
>
</vue-only>
</div>
The entire code can be seen in the following link.
https://github.com/jotnajoa/studioquestion/tree/main/d3vue
Set the appear property on <transition-group>:
<transition-group tag="div" class="VueOnly" name="fade" appear>
demo
I stumbled upon the same problem. It seems that the class animation_name-enter-active is not applied to new items (regardless of using appear or not). But the class animation_name-enter-to will be applied normally, so I moved my animation css to this class and it worked. Probably more a workaround than a real solution.
As part of becoming a better Vue programmer, I am trying to implement a popup similar to Popper with a clean and Vueish architecture. Here is a simple schematic that I came up with:
So basically there is a target component, which is the reference for the popup's position. The popup can be positioned above, below, right and left of the target, therefore I will need to have access to the target element in my popup. Also, the target can be an arbitrary component. It can be a simple button or span, but also something much more complex.
Then there is the popup itself, which will be put into a modal at the end of the body, It contains the actual content. The content again can be an arbitrary component.
I have a working implementation of the popup, but the basic structure seems to be far from perfect. I am using two slots, one for the target element and one for the content.
Here is what I have come up with so far for the template:
<template>
<div ref="targetContainer">
<slot name="target"></slot>
</div>
<teleport to="body">
<div v-show="show" class="modal" ref="modal">
<div ref="popover" class="popover" :style="{top: popoverTop + 'px', left: popoverLeft + 'px'}">
<slot name="content"></slot>
</div>
</div>
</teleport>
</template>
There are several issues with this that I am not really happy with.
Using the popup is not very simple
When using this popup in another component, two <template> tags are rquired. This is ungly and not very intuitive. A very simple use case looks like this:
<modal :show="showPopup" #close="showPopup=false">
<template v-slot:target>
<button #click="showPopup=true"></button>
</template>
<template v-slot:content>
<div>Hello World!</div>
</template>
</modal>
The target is wrapped in another <div>
This is done to get access to the target element, that I need for the layout. In mounted() I am referencing the target element like this:
let targetElement = this.$refs.targetContainer.children[0];
Is this really the best way to do this? I would like to get rid of the wrapping <div> element, which just asks for unintended side effects.
The best solution would be to get rid of one slot and somehow reference the target element in another way because I only need its layout information, it does not have to be rendered inside the popover component.
Can someone point me in the right direction?
Here is my solution, which was inspired by a comment on my question and which I think is worth sharing.
Instead of putting the target element into a slot, I am now passing its ref as a prop, which makes things much cleaner.
The popover component's template now looks like this.
<template>
<teleport to="body">
<div v-show="show" class="modal" ref="modal">
<div ref="popover" class="popover" :style="{top: popoverTop + 'px', left: popoverLeft + 'px'}">
<slot ref="content"></slot>
</div>
</div>
</teleport>
</template>
I has a targetRefprop, so the component can be simply used like this:
<div ref="myTargetElement" #click="isPopupVisible=true">
</div>
<modal :show="isPopupVisible" #close="isPopupVisible=false" targetRef="myTargetElement">
<!-- popup content goes here -->
</modal>
And after mounting I can access the target element like this:
let targetElement = this.$parent.$refs[this.targetRef];
I like this solution a lot. However, ideas, advice or words of caution are still highly welcome.
In other words one might have an html at some point which looks like this:
<bloglink blogposturl="http://a.link" blogposttitle="my title" ></bloglink>
And the template attribute like so:
...
template: '<h3><i><a style="text-decoration: underline; cursor: pointer;" v-on:click="load_blog_page(blogposturl)">{{blogposttitle}}</a></i></h3>',
...
But what if one wanted to express instead
<bloglink blogposturl="http://a.link" blogposttitle="my title" >
<p>.....complex html in here.... which is not dynamic....</p>
</bloglink>
One would want to keep this html when loading the webpage instead of being completely replaced.
One way would be to take this complex html and insert it as a parameter being careful with escaping properly etc. but this does not seem very elegant.
What is the recommended way?
Vue component slot.
for example:
ParentComponent:
<template>
<div>
<slot></slot>
</div>
</template>
SomeOtherComponent:
<template>
<div>
<parent>
<p>whatever</p>
</parent>
</div>
</template>
I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/
I'm trying to make a mixin to inherit from different bootstrap classes so in order to clarify my code.
So, instead of writing
<div class="row-fluid col-lg-12 page-header">
I would like to write something like
<div class="myGroup">
I've create a .less file:
#import 'bootstrap/less/bootstrap.less';
.myGroup{
.row-fluid; //Undeclared mixin
.col-lg-12; //Undeclared mixin
.page-header; //Loads Ok.
}
I'm compiling client-side. I receive "undeclared mixin".
Any idea? Thanks!
Columns in Bootstrap LESS source are generated dynamically via mixins in mixins.less.
This is the reason you can't call them directly as mixins.
Anyway I think it's better practice to give .col-lg-12 as a class to the element and not hiding it to your stylesheet. You shouldn't use .row and .col-* in same element either.
There is no such thing as .row-fluid in Bootstrap 3.
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="page-header"> ... </div>
</div>
</div>
</div>