I'm using the official ember font-awesome library and I'm trying to add some text to an icon with the following code:
<span class="fa-layers fa-lg">
<FaIcon #icon="circle" #size="3x" />
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8">
27
</span>
</span>
From what I can see on the documentation examples that should work but no value in the data-fa-transform attribute produces any change.
Is there a different method I need to use because FA now uses SVGs?
Ember Fontawesome only handles turning <FaIcon> components into SVG icons. The reason your example isn't working is because fontawesome isn't doing anything to the <span> tag. You will need to tell fontawesome about this element in order to get the behavior you're looking for.
Do to that you need to use the dom-i2svg method from fontawesome and pass it your element using #ember/render-modifiers.
// app/components/layer-icon.js
import Component from '#glimmer/component';
import { dom } from '#fortawesome/fontawesome-svg-core';
import { next } from '#ember/runloop';
export default class LayerIconComponent extends Component {
scanDom(element) {
next(() => {
dom.i2svg({node: element});
});
}
}
//app/components/layer-icon.hbs
<span class="fa-layers fa-lg" {{did-insert this.scanDom}}>
<FaIcon #icon="circle" #size="3x" />
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8">
27
</span>
</span>
Related
given the following generated html
<a href="#" class="primaryInversed v-btn v-btn--large v-btn--round"
<div class="v-btn__content">STOP!
<i aria-hidden="true" class="v-icon v-icon--right material-icons">pause_circle_outline</i>
</div>
</a>
when I test with the .toEqual Jest matcher
console.log(playLink.text())
expect(playLink.text()).toEqual("STOP!");
test is failing because of the icon
console.log tests/unit/Heading.spec.js:46
STOP!
pause_circle_outline
It foes not fail if I use the .toMatch watcher
expect(playLink.text()).toMatch(/STOP!/);
Is it the normal test to be written or is there anyway to use the .toEqual watcher ?
NOTE : I used 'mount' and not 'shallowMount' as I need to generate html from vuetify components
thanks for feedback
One technique is to wrap the <v-btn>'s text content in a <span>, and use wrapper.find(selector) to select the <span> to get its text:
foo.vue template:
<v-btn>
<span class="text">STOP!</span>
<v-icon>pause_circle_outline</v-icon>
</v-btn>
foo.spec.js
it('contains the expected text', () => {
expect(wrapper.find('.text').text()).toEqual('STOP!');
});
demo
On this page there is a slider updating a input box with example HTML code. You can also see that same code in the source.
I would like to use this in my application so I transplanted it into my code and converted it to Jade (aka Pug). The source now looks like:
div.row
div.small-10.columns
div.range-slider(data-slider data-options="display_selector: #days-off-count; initial: 28;")
span.range-slider-handle(role="slider" tabindex="0")
span.range-slider-active-segment
div.small-2.columns
input(type="number" id="days-off-count" value="28")
And the resulting html looks like this (after prettifying it):
<div class="row">
<div class="small-10 columns">
<div data-slider data-options="display_selector: #days-off-count; initial: 28;" class="range-slider">
<span role="slider" tabindex="0" class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 columns">
<input type="number" id="days-off-count" value="28">
</div>
</div>
Which is very close that shown on in the docs. However on the resulting page the input box is not updated. If I change the input box to a span like in the
'With Label' example it updates.
span(id="days-off-count" value="28")
becomes
<span id="days-off-count" value="28"></span>
I have the foundation.js and the .slider.js included at the bottom of the page.
In addition, if I manually change the value of the input box via the keyboard the slider will jump to that position, so there is some sort of link there.
The software being used:
Ubuntu 14_04
Chrome
Node v0.10.25
Express 4.14.0
Jade 1.11.0
Foundation v5.5.0
Other things to note:
The page has more than one slider so any javascript solutions need to take this into account.
I think this is a bug (hasOwnProperty instead of hasAttribute #6221) in the version of Foundation (5.5.0) you're using. It seems that while it initially applied only to Firefox, it now applies to Chrome too.
Example with (broken) sliders from 5.5.0: jsfiddle.net/tymothytym/jth99pkw/3
Example with (working) sliders from 5.5.3: jsfiddle.net/tymothytym/tw1we8fk/3
The bug was fixed here: https://github.com/zurb/foundation-sites/commit/896e81f1275eefbbdb84ce4da9004ab059b26d45
Basically, go to foundation.slider.js and change this (line 157):
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if (this.hasOwnProperty('value')) { // this is the mistake / bug
$(this).val(value);
} else {
$(this).text(value);
}
});
}
to this:
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if (this.hasAttribute('value')) { // this should fix it
$(this).val(value);
} else {
$(this).text(value);
}
});
}
This is not my fix, it's the same as the patch, but it should mean that when you do upgrade you don't need to modify your application code to account for a workaround.
1) Maybe I be wrong... but you didn't specify the version, you give an example from Foundation v5... are you not have installed Foundation v6?
Try this example : https://foundation.zurb.com/sites/docs/slider.html
2) After you include your js files, you need to have this:
<script>
$(document).foundation();
</script>
Edit: Sorry, first time I didn't read all, maybe the problem is that the Foundation use the "value" attribute, which is an attribute designed for <input> tags:
value <button>, <input>, <li>, <option>, <meter>, <progress>, <param> Specifies the value of the element
Source: https://www.w3schools.com/tags/ref_attributes.asp
I try to get working the electron-vue boilerplate. After setting up the project everything works, but as I create a new .vue file (TopMenu.vue) I get:
vue.common.js?4eb4:2569 [Vue warn]: Unknown custom element: <topmenu> -
did you register the component correctly? For recursive components, make
sure to provide the "name" option. (found in component <landing-page>)
I use the exact syntax as the original .vue files which came with the boilerplate:
LandingPageVue.vue:
<style scoped>
img {
margin-top: -25px;
width: 450px;
}
</style>
<template>
<div>
<!-- <img src="./LandingPageView/assets/logo.png" alt="electron-vue"> -->
<h1>Welcome.</h1>
<topmenu></topmenu>
<current-page></current-page>
<versions></versions>
<links></links>
<div class="container">
</div>
</template>
<script>
import TopMenu from './LandingPageView/TopMenu'
import CurrentPage from './LandingPageView/CurrentPage'
import Links from './LandingPageView/Links'
import Versions from './LandingPageView/Versions'
export default {
components: {
TopMenu,
CurrentPage,
Links,
Versions
},
name: 'landing-page'
}
</script>
TopMenu.vue (my file):
<template>
<p>
TOPMENU
</p>
</template>
By the way, how the hack does <current-page></current-page> work (notice the "-" dash) if bellow it is declared without?
It's not working because you're not exporting anything in your vue file.
Try this in your TopMenu.vue file:
<template>
<p>
TOPMENU
</p>
</template>
<script>
export default {
}
</script>
Also change the html <topmenu></topmenu> to <top-menu></top-menu>
For your second question, HTML is case insensitive so your title case components wouldn't match with html tags. So Vue translates your title case components to a 'dash-case'.
From the documentation itself there's the explanation why:
Note that Vue does not enforce the W3C rules for custom tag names (all-lowercase, must contain a hyphen) though following this convention is considered good practice.
You can read more from the the docs
I've created a component like this:
templates/components/files-dropzone.hbs
<p>Awesome text</p>
<textarea id="drop-textarea" rows="10" cols="50">
{{value}}
</textarea>
components/files-dropzone.js
import Ember from 'ember';
export default Ember.Component.extend({
value: '',
valueChanged: function() {
console.log("yup") // is never triggered
}.observes('value'),
})
I'm using this component like this in another template:
<div class="large-7 columns padding-left-reset"
{{files-dropzone value=body}}
</div>
While the textarea contains the correct value for body when I load the page it doesn't bind it. I'm observing body and it doesn't change when I change the text inside the textarea.
EDIT: The value-attribute in the component itself doesn't change as well
What am I doing wrong?
I don't think that Ember knows that it should bind the {{value}} to the text area.
It should work, using the textarea helper:
{{textarea value=value id="drop-textarea" rows="10" cols="50"}}
Do you want to adapt the behaviour of the text area in some way?
Is it possible to have an if / else statement which does not render any html in a view similar to knockout:
<!-- ko if: someExpressionGoesHere -->
but it needs to be on an element
Yes, but if v-if conditional is false, it's not added to DOM tree.
HTML
<div id="main"></div>
JavaScript
new Vue({
el: "#main",
template: '<div v-if="name"><span v-text="name"></span></div>',
data: {
// name: "bob"
}
});
console.log(document.body.innerHTML);
// <div id="main"><!--vue-if--></div>
Still not good for you?
I know the question was already answered, but thought I would pass along something I use, now that I am writing sites with Vue (which I love.) I am a fan of Knockout and have many sites written in it using the:
<!-- ko if: someExpressionGoesHere -->
You could do a similar thing in Vue like this:
<template v-if="someExpressionGoesHere">
<p>Expression is True</p>
</template>
<template v-else>
<p>Expression is False</p>
</template>
The templates will not render anything to the page. The resulting html will be a single p of the 'Expression is xxx'.
I think it is a bit more clear of what the intent of the code is here than the actual answer to this post IMHO.
you can also use this way to write if else condition in vue.js
<template>
<div id="app">
<p v-if="someConditionHere">Condition True</p>
<p v-else>Condition False</p>
</div>
</template>