I have a bar component. It is used like this:
<template>
<div>
<!-- stuff -->
<bar></bar>
<!-- stuff -->
<!-- stuff -->
<!-- stuff -->
<bar></bar>
<!-- stuff -->
<bar></bar>
<!-- stuff -->
</div>
</template>
<style lang="scss" scoped>
#media (max-width: 1300px) {
// this selector doesn't work, but it would be nice if it did
bar {
display: none;
}
}
</style>
I would like to hide the bar elements when the screen is 1300px or narrower. It would be nice if there was a bar element selector, just like there are p and h1 element selectors. However, there doesn't seem to be, and I have to add class="bar" in order to select them.
My question is if there is a cleaner way to select the bar elements.
It wouldn't be good to add the CSS code inside of the bar component because when the bars are used inside of other components, I don't want to hide them at all.
A class seems to be the best way to go. Put it on the root element of the component if you want it to be universal for the component, or only on the component tag if you want it to be specific to that use.
Also, there is no reason you couldn't use a custom tag as the root element of your component; as long as the tag didn't map to a component, it would be left in the DOM, and you could use it for CSS selection. I don't recommend it, though, as I don't think this use case is a good reason for introducing a new tag.
If your component template looked like this, for example:
<template>
<bar-container>
Hi there
</bar-container>
</template>
and you had no bar-container component defined, you would be able to use CSS to select bar-container, which would be the container element for every bar component. But it's just as easy to use <div class="bar-container"> instead.
After better understanding the problem at hand, would this work?
<div class="someClass">
<bar v-bind:width="draw.probability" type="draw" ref="myComponent"></bar>
</div>
Related
You can see the issue I'm having here:
https://codepen.io/ryanrapini/pen/LYeWZKR?editors=1010
Essentially, I have several dialogs which I have contained into their own custom "vue components" i.e. order-dialog.vue. In an ideal world, I could simply include this <order-dialog> component wherever I need it, and it would render the activator button and then handle all of the dialog state inside the component, so the parent doesn't need to worry.
Unfortunately, if I do this in a v-card-actions section I get spacing issues. Is this a bug with Vuetify or am I doing something wrong?
I thought that by moving the activator out of the <v-dialog> tag it might fix the issue, but it still doesn't unless I break my component up into a v-dialog component and a separate activator, which means I now need to manage the state of the dialog in the parent.
Thanks for any help.
I don't think you are doing something wrong, and I'm not sure that it's a Vuetify bug.
This comes from CSS rule in Vuetify library:
.v-application--is-ltr .v-card__actions>.v-btn.v-btn+.v-btn {
margin-left: 8px;
}
I think the authors assumed that this block should contain only buttons. But in your case (in 2nd and 3rd approach) an output HTML looks like this:
<div class="v-card__actions">
<button class="v-btn ...">
...
</button>
<div class="v-dialog__container"><!----></div>
<button type="button" class="v-btn ...">
...
</button>
<button type="button" class="v-btn ...">
...
</button>
</div>
So v-dialog__container breaks this rule.
You can fix you issue, by example, with an additional rule:
.v-application--is-ltr .v-card__actions>.v-btn:not(:first-child) {
margin-left: 8px !important;
}
Or you can also apply helper classes (ml-2) into specific buttons.
I got some problems with overriding the CSS on slots inside an autocomplete.
I read this thread and tried multiple solutions, but none work that are feasible (since they globally change the style for vuetify components):
How to override vuetify styles?
How would I override the autocomplete styles? E.g right now my problem is that I'm adding an append-slot with a button inside the search field, but the padding of the text field pushes it too much to the left & no padding is applied on the bottom.
Some things I tried:
Creating a parent element with an ID and then manually trying to create a class for it.
Example:
#handlesearch > div > div > div.v-input__slot > div.v-select__slot > div {
margin-top: 4px !important;
}
<template id="handlesearch" slot="append">
<v-btn
>Sök</v-btn
>
</template>
If you inspect your html, you'll notice that adding ID on <template> is not working. If you move your id="handlesearch" to actual html element inside your slot, which is in this case v-btn.
<template slot="append">
<v-btn id="handlesearch">Sök</v-btn>
</template>
with next scoped style
<style scoped>
#handlesearch {
background: red;
}
</style>
Produces next result:
If I move id="handlesearch" to <template> as <template id="handlesearch"> style will not be applied since in my DOM there is no HTML element with that id.
Solution
Move your ID to actual element inside your slot, and add scoped style according to that.
Moving my styling to a locale setup but seeing that when I insert element into slot containers they will not work. I guess this is normal if so is there a way to solve this, keep in mind NO I am not going to place the parent (.child) styling in the parent component and NO I want to keep my CSS in seperate scss files.
component (parent)
<template>
<wrapper>
<div class="child">Hello</div>
</wrapper>
</template>
component (wrapper called)
<template>
<div class="wrapper">
<slot></slot>
</div>
</template>
<style lang="scss" scoped>
#import "../../../sass/components/_container.scss";
</style>
container.scss
.wrapper{
background-color:#333;
.child{
background-color:#fff;// not doing anything
}
}
You can use the v-deep combinator to target child elements/components e.g.:
.wrapper::v-deep .child { background-color:#fff; }
See the Deep Selectors documentation for more detail.
Update
It seems ::v-deep .child has been deprecated. Use ::v-deep(.child) {} or :deep(.child) {} instead. See the RFC for more detail.
I'm looking for a way to create a slot that allows me to wrap its content with arbitrary markup, instead of replacing the content...
Consider a Template like this (obviously doesn't work):
<!-- this slot ... -->
<slot name="wrapper">
<SomeComplexComponent ... />
</slot>
<!-- becomes -->
<div class="wrapper" style="background: red;">
<SomeComplexComponent ... />
</div>
This is for example needed for Table components, wrapping the table header in a sticky component, to allow scrolling while keeping the header visible (see the DetailsList Fabric example: https://codepen.io/johannes-z/pen/QWbZvqx?editable=true).
In React, and Fabric, they circumvent this problem by using render functions, and passing the original render function to the slotable render function. This way they can wrap the original render function with arbitrary markup/components.
Is there a way to achieve this with Vue? Preferably using template syntax and not render functions / tsx.
I have a custom element that defines a general purpose UI widget frame with various bindable default options, a template part for adding some additional 'toolbar' options and general-purpose <content /> for the body.
I then have another custom element for some administrative functionality. The latter element should present itself as a widget, and it too has various template parts.
However, if I try to embed the former widget element into the latter administrative element none of the content gets rendered.
Here's a simplified example:
eg-block (Widget) element
<template>
<div style="padding: 10px; background-color: #bbffff">
<content></content>
</div>
</template>
eg-list (Admin) element
<template>
<require from="./eg-block"></require>
<eg-block>
<div>Start of List</div>
<content></content>
<template replaceable part="list-part">Default List Part</template>
<div>End of List</div>
</eg-block>
</template>
Containing Page
<template>
<require from="./eg-list"></require>
<eg-list>
<template replace-part="list-part">Replaced List Part content</template>
<div>Replaced regular content</div>
</eg-list>
</template>
I was hoping the results of that to be:
<div style="padding: 10px; background-color: #bbffff">
<div>Start of List</div>
<div>Replaced regular content</div>
<div>Replaced List Part content</div>
<div>End of List</div>
</div>
But instead it gives me:
<div style="padding: 10px; background-color: #bbffff">
<div>Start of List</div>
<div>End of List</div>
<div>Default List Part</div>
</div>
So it doesn't render the list's content or replaced template part that is specified in the containing page. But additionally, the default content of the list's template part is actually rendered after the list.
Is this the expected behaviour? And if so, is there any way to retain the use of the widget/block element within the admin/list element but to have it render the way I was hoping?
I'm mostly copy/pasting my answer from this question here, but here goes:
Let me preface this answer by saying that content projection is changing completely (and for the better) in Aurelia RC1. We are moving to slot based content projection to match up with the newest version of the shadow DOM specs. This spec is much more powerful than the selector based setup that Aurelia has current (which is based on an earlier version of the Shadow DOM spec). This is the only breaking change we have planned between now and the full 1.0 of Aurelia.
So everything I'm telling you will be obsolete very soon.
In the meantime, the element in your custom element view needs to be at the root of the template. As to the why Aurelia is acting this way, well it's a bug:-) It has been fixed in the new implementation.
We just released a blog post regarding the new slot implementation, if you'd like to see how things will work.