-
Notifications
You must be signed in to change notification settings - Fork 50
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support dynamic CSS classes (1 per line) #6
Comments
It's not clear whether those "styles" would be applied on the text or caret, and during which phase of typing. I'd prefer to avoid multiple/complex props and keep the styling in CSS, We could support this without breaking the existing customizable CSS selector structure (but perhaps making it a bit awkward) by adding a Something like: |
A bit late but I solved it in a bit hacky way. In my version, the class is the lowercase version of the text. <vue-typer
:text="strings"
:class="klass"
@erased='onErased' /> function getNextElement (arr, i) {
if (i === arr.length - 1) {
return arr[0]
} else {
return arr[i + 1]
}
}
export default {
data () {
return {
strings: ['Foo', 'Bar'],
klass: 'policy'
}
},
components: {
VueTyper
},
methods: {
onErased (erasedString) {
const i = this.strings.indexOf(erasedString)
this.klass = getNextElement(this.strings, i).toLowerCase()
}
}
} .vue-typer {
&.foo .custom.char.typed {
color: red;
}
&.bar .custom.char.typed {
color: blue;
}
} Would be much nicer if vue-typer would emit an event |
I think this is more better. I packaged the component, then you can define your font color in parent component. Child components will inherit parent component's font color. <style lang="scss">
.vue-typer {
.typed {
color: inherit;
}
}
</style> |
Feature request for supporting the ability to give different CSS classes per text entry item.
Example:
New style would be applied before typing on a new line begins.
The text was updated successfully, but these errors were encountered: