I can't change style in ant-tooltip on nuxtjs. I access to class ant-tooltip-inner but it don't changing.
<div class="box-form-input">
<a-tooltip placement="topRight" trigger="focus">
<template slot="title">
<span>Please fill in your Fullname</span>
</template>
<a-input
v-model="full_name"
/>
</a-tooltip>
</div>
<style>
.ant-tooltip-inner {
background-color: red;
}
</style>
Overriding Antd tooltip in vue.js works as expected.
<template>
<div id="app">
<!-- remove h3 tag causes wrong arrow direction -->
<h3>try to remove this element.
<br>After removed, the tooltip arrow changed direction.
</h3>
<a-tooltip placement="left" title="wrong arrow direction">
<span>why don't use popper.js</span>
</a-tooltip>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld
}
};
</script>
<style>
.ant-tooltip-inner {
background-color: red;
}
</style>
See working CodeSandBox.
Related
I work with Vue 3 and Bootstrap 5. I have a props called number (get me integers from 1 - 10).
Now I want to work with with my number in my scrollbar-class.
I've tried as following but it's not working. I get no error - it's simply not working.
How can I fix that? Thank You!
<template>
<div class="scrollbar"
</div>
</template>
<script>
export default {
props: {
number: Number,
}
}
</script>
<style>
.scrollbar {
height: calc(500px + (var(--number) * 20 px));
}
</style>
You can use v-bind in your <style> tag to bind a data property to your CSS.
It will also reactivly update, if your state changes.
<template>
<div class="scrollbar">
</div>
</template>
<script>
export default {
props: {
number: Number,
}
}
</script>
<style>
.scrollbar {
height: calc(500px + (v-bind(number) * 20px));
}
</style>
Demo
I'm new to Vaadin and trying to create an instance that hides the vaadin-text-field from the component vaadin-date-picker.
I started out by reading the documentation for vaadin-date-picker about the shadow DOM property stated here.
I tried with "Scoping Styles in a Theme Module" but the whole thing including the calendar icon disappeared.
Current code as below,
render() {
return html`
<dom-module id="trim-inputbox" theme-for="vaadin-date-picker">
<template>
<style>
:host(.special_field) [part="text-field"] {
visibility:hidden;
}
</style>
</template>
</dom-module>
<vaadin-date-picker class="special_field"></vaadin-date-picker>
`;
}
Thanks so much again for any kind help.
As you noticed already a calendar icon is part of a text-field itself.
In Styling section there is an example of using <vaadin-date-picker-light>:
<style>
.my-input2 input {
border: none;
font-size: 14px;
background: none;
}
</style>
<vaadin-date-picker-light>
<div class="my-input2">
<iron-icon icon="event"></iron-icon>
CHECK-IN:
<iron-input>
<input size="10">
</iron-input>
</div>
</vaadin-date-picker-light>
Maybe you could use this instead?
I created a form component Form.vue which is a child from PostPage.vue.
Inside 'Form.vue' i want to send a $emit for the parent to change a Prop value btn-text.
Parent Component PostPage.vue:
<template>
<div id="post-page">
<div class="header-text pt-5 text-center">
<div class="h2 font-weight-bold">
Welcome to the DevTribe Community
</div>
<div class="h5 font-weight-bold">
Ask questions, share content, introduce yourself. Be nice!
</div>
</div>
<Form />
<!-- textarea-not-clear isn't catched here below -->
<Posts
:btn-text="btnText"
#textarea-not-clear="changeBtnText()"
/>
</div>
</template>
<script>
import Form from './PostPage/Form.vue';
import Posts from './PostPage/Posts.vue';
export default {
name: 'PostPage',
components: {
Form,
Posts
},
data() {
return {
}
},
methods: {
changeBtnText() {
console.log('tss');
}
}
}
</script>
<style lang="scss" scoped>
#post-page {
background-color: #ffffff;
height: 100%;
padding: 0 20%;
}
</style>
The emit will be fired in a watch, if the textarea is empty
Child Component Form.vue:
<template>
<div id="form">
<form class="text-area text-center mt-5 mx-auto w-100">
<div class="row">
<div class="col-12">
<textarea
v-model="textarea"
name="post-text"
rows="6"
class="w-100"
placeholder="Create a post..."
/>
</div>
<div class="col text-left">
<button
type="button"
class="btn btn-outline-primary"
>
Send
</button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'Form',
data() {
return {
textarea: ''
}
},
watch: {
textarea: function() {
if (this.textarea !== '') {
this.$emit('textarea-not-clear', 'Join Discussion');
}
}
}
}
</script>
<style lang="scss" scoped>
.text-area {
height: 300px;
textarea {
border: solid black 1px;
}
button {
width: 120px;
}
}
</style>
I can see the event fired in Vue extension for DevTool:
but for some reason it is not possible to catch that event, the changeBtnText() function inside PostPage.vue won't be triggered and gives not even a console.log('test')
First things first. Form is not a good name for a component as it clashes with a standard HTML element. I'm surprised you aren't getting a warning about this. See https://v2.vuejs.org/v2/style-guide/#Multi-word-component-names-essential
Next up, the problem with your event is that you're listening to the wrong component.
<Form />
<!-- textarea-not-clear isn't catched here below -->
<Posts
:btn-text="btnText"
#textarea-not-clear="changeBtnText()"
/>
The event is being fired by the Form component but your listener is on the Posts component.
I would also highly recommend that you stop using ids on your components and uses classes for styling instead.
I'm writing a Vue component, which accepts 2 slots:
<template>
<div class="Component">
<div class="Component-Label">
<slot
name="label"
class="Component-LabelInner"
/>
</div>
<div class="Component-Input">
<slot
name="input"
class="Component-InputInner"
/>
</div>
</div>
</template>
<style scoped>
.Component { ... }
.Component-Label { ... }
.Component-LabelInner { ... }
.Component-Input { ... }
.Component-InputInner { width: 100%; ... }
</style>
For layout purposes, I absolutely need to apply some styles to the <slot> elements - the ones with Component-LabelInner and Component-InputInner classes.
(To be precise I need to apply a rule width: 100% to the Component-InputInner, as usually I'll pass there <input> element and I want everything I pass there to stretch to the container.)
The problem is that after <slot> elements get replaced by the content provided to the slots, class attribute isn't inherited (it seems no attributes are inherited on slots) and CSS selectors for .Component-LabelInner and .Component-InputInner don't work.
Can you somehow add CSS classes to the element that <slot> gets replaced with?
You can not bind class to slot tag. There are some solutions to handle this case:
With Vue mounted hook (it works but looks as bad practice):
Vue.component("slots-comp", {
template: "#slotsCompTemplate",
mounted() {
// each slot is an array, because you can pass a set of nodes wrap them with template tag
// I use only first VNode for example
this.$slots.one && this.$slots.one[0].elm.classList.add("one");
this.$slots.two && this.$slots.two[0].elm.classList.add("two");
}
});
new Vue({
el: "#app",
data: {}
})
.one {
color: red
}
.two {
color: blue
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<slots-comp>
<div slot="one">One</div>
<div slot="two">Two</div>
</slots-comp>
</div>
<script type="text/x-template" id="slotsCompTemplate">
<div>
<slot name="one"></slot>
<slot name="two"></slot>
</div>
</script>
Pass neccessary classes as props to scoped slot(it is not fully encapsulated solution):
Vue.component("slots-comp", {
template: "#slotsCompTemplate",
data() {
return {
classes: {
one: ["one"],
two: ["two"]
}
}
}
});
new Vue({
el: "#app",
data: {}
})
.one {
color: red
}
.two {
color: blue
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<slots-comp>
<div slot-scope="props" :class="props.classes.one" slot="one">One</div>
<div slot-scope="props" :class="props.classes.two" slot="two">Two</div>
</slots-comp>
</div>
<script type="text/x-template" id="slotsCompTemplate">
<div>
<slot :classes="classes" name="one"></slot>
<slot :classes="classes" name="two"></slot>
</div>
</script>
Add changes to CSS to apply styles on all internal elements:
.Component-Input > *
{
/* my rules for child elements */
}
.Component-Label> *
{
/* my rules for child elements */
}
Or add wrapper element for slots with classes Component-InputInner etc. and add similar styles for them.
Hope it will help.
Disclaimer: I have tried to read the docs before opening this question.
I have this component:
<template>
<accordion id="facilities-menu" :one-at-atime="true">
<template v-for="facilities in facilitiesGroups">
<panel class="accordion-toggle" :header="`Facilities #${$index+1}`" :is-open="$index === 0">
<ul>
<li v-for="facility in facilities">
{{facility}}
</li>
</ul>
</panel>
</template>
</accordion>
</template>
<style lang="scss" scoped>
#import "../../../styles/theme-colors.scss";
.panel {
background: #5E6466;
border: none;
}
</style>
<script>
import { accordion, panel } from 'vue-strap'
module.exports = {
components: {
accordion, panel
},
data () {
return {
'facilitiesGroups': [['Continente Alfragide', 'Jumbo Almada', 'Portugália'], ['Pingo Doce', 'Lidl', 'Allegro'], ['Casa']]
}
}
}
</script>
And then I instantiate this component like this:
<template>
<div class="user">
<user></user>
</div>
<facilities></facilities>
</template>
<style lang="scss" scoped>
#import "../../../styles/theme-colors";
.user {
width: 100%;
height: auto;
margin-top: 8%;
margin-bottom: 5%;
}
</style>
<script>
import User from './userProfile'
import Facilities from './groupedFacilities'
module.exports = {
components: {
'user': User,
'facilities': Facilities
}
}
</script>
However, you can see that in the first component I am defining the data to be { 'facilitiesGroups': [['Continente Alfragide', 'Jumbo Almada', 'Portugália'], ['Pingo Doce', 'Lidl', 'Allegro'], ['Casa']] }. But i want this to be passed as an argument, not to be statically defined in the component as it is now.
I have read the docs about how could this be done here. But their example...
Vue.component('child', {
// declare the props
props: ['msg'],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: '<span>{{ msg }}</span>'
})
...Resembles nothing to what I have in my code... I don't even use Vue.component() anywhere!
How come I am using a different "style" of coding with Vue JS (I started from their boilerplate)?
How can I map Vue JS official documentation to this "style"?
How can pass that array as an argument/property?
Thanks!
Your component needs to declare the data you want passed in as 'props'
<script>
import { accordion, panel } from 'vue-strap'
module.exports = {
components: {
accordion, panel
},
props: ['facilitiesGroups']
}
</script>
... then in your parent component template you pass your data as an attribute. Below is an example where "facilitiesGroups" is a data element of your parent component:
<template>
<div class="user">
<user></user>
</div>
<facilities :facilities-groups="facilitiesGroups"></facilities>
</template>