I want to bind multiple class by vueJs but the code does not work. I am following the vue documentation of class binding topics. I am not able to find my error.
<a href="#" :class="[badge, badge-primary, ladda-button]>
It's just formatted incorrectly.
:class="badge badge-primary ladda-button"
or....
:class="['badge', 'badge-primary', 'ladda-button']
Related
I am writing a custom TagHelper that should change its behavior based on what child elements its owner tag has. This will be used for substituting custom html elements in a localized string.
Here's a simple example of what I'm trying to do:
<h2 locale-key="Hello, %1!">
<span class="bold" locale-parameter="1">#userName</span>
</h2>
In the example above, the TagHelper for LocaleKey will change the content of the <h2> tag to a localized string. If this is a simple string with no parameters, then I can just simply use output.Content.SetHtmlContent() in the TagHelper to set the h2's content to the string. However in this case, the localized string has a parameter (%1), and I want the corresponding child element (<span parameter="1">) to be substituted in the final output. So the final rendered html would look like this:
<h2>Hello, <span class="bold">Lázár Zsolt</span>!<h2/>
To achieve this, I should be able to see all the child elements in the DOM from the LocaleKey TagHelper, so I can generate the correct HTML code. In the TagHelper's ProcessAsync method I can access the TagHelperContext and the TagHelperOutput, but I couldn't find any information about child elements in either of these objects while debugging. Is this possible somehow?
Another approach is to leave the string as is, with the %1 parameter key, and then use the child ParameterTagHelper to substitute itself into the parameterized string. To do this, I'd have to see the siblings of the current tag from the TagHelper.
Recursion would also be fun (e.g. the <span> is also localized and has its own parameters), but for the scope of this question, I'd be happy if I could get this to work without recursion.
I posted too soon again... There is a GetChildContentAsync() method in TagHelperOutput that will... get the child content asynchronously.
I want to create an extendable list of links with flux. That means I want a backend form to create and add as many links as needed. Using TYPO3 8.7, Flux, Fluidcontent, VHS. How do I do that?
Output Html shall look like this:
<h3>Links Headline </h3>
<ul class="mylist">
<li>Linktext one</li>
<li>Linktext two</li>
...
</ul>
Seems to be very simple, but I haven´t found a solution for it yet.
Thanks for advices
You can do this by creating a section in your flux configuration.
<flux:form.section name="settings.linklist" label="Definitions">
<flux:form.object name="listitem" label="Definition">
<flux:field.input name="label" label="Label"/>
<flux:field.input name="link" label="Link">
<flux:wizard.link/>
</flux:field.input>
</flux:form.object>
</flux:form.section>
Rendering the list in the frontend with:
<f:for each="{settings.linklist}" as="item">
For further information see the documentation: https://fluidtypo3.org/viewhelpers/flux/master/Form/SectionViewHelper.html
I am trying to write CSS using two attributes the element looks like this:
<div class="bet-tab-left bet-tab tab-event bet-tab-half bet-tab-last-tab active" data-tab-index="1">
How do I write CSS element locator by.css("x") for this?
As per the HTML you have shared, you can use the class attributes to identify the WebElement as follows :
driver.findElement(By.cssSelector("div.bet-tab-left.bet-tab.tab-event.bet-tab-half.bet-tab-last-tab.active"));
Still if you want to use both the class and data-tab-index attributes, you can use:
driver.findElement(By.cssSelector("div[class='bet-tab-left bet-tab tab-event bet-tab-half bet-tab-last-tab active'][data-tab-index='1']"));
Try like this using data-tab-index="1":
driver.findElement(By.cssSelector("div[data-tab-index=1]"));
Is it possible to conditionally add an attribute to an element using binding syntax? I am aware of if.bind, but that targets elements. Rather I am interested in targeting a specific attribute on an element.
Example:
<a href.bind="model.link">${model.text}</a>
If model.link is falsy, then I don't want the href at all--just treat the <a /> as a container element.
I realize I could create two <a /> tags--one with the attribute and one without--and use an if.bind on both, but that seem clunky and un-aurelia like.
I don't think it's supported in Aurelia currently (issue 1, issue 2)
This,
<a href.bind="addLink ? link : ''">Link</a>.
will produce
<a href>Link</a>
if addLink is false.
It won't remove the attribute entirely. If you are using a library which will check the existence of an attribute to manipulate the element, then this won't work. Another option would be to create a custom attribute like this. But that seems like an overhead.
I am trying to automate test case using Protractor and Jasmine. The problem is I have an "article" web element tag that gets created at runtime and this web-element has a as sub element. This div element has a "id" tag associated with it. The structure of the code is below.
<article class="a b c d" data-ng-repeat="xyz repeat">
<div id="THIS IS WHAT I WANT" class="class name">
</article>
Now I am able to get get hold of the article web-element. but I am not able to get the ID attribute in the div. The ID values is generated dynamically. Kindly suggest how I can get the ID value.
Thank you
You can use a CSS Selector like this:
article > div
This will get you a div inside of an article. Now you can use this to play around and specify the selector further with classes or other stuff.
If you managed to get the div element you can then pull out the idea using (not sure if the syntax is correct but you should get the idea):
element.getAttribute('id')
1) element(by.xpath(//div[#class='class name'])).getAttribute('id')
2) element(by.xpath(//article [#class='abcd']//div[#id='THIS IS WHAT I WANT'])).getAttribute('id')
You can use chains like this:
element(by.classname('')).element(by.className('classname'));
or
element(by.css('css of parent')).element(by.css('child css'));
or you can use element(by.repeater('repeat in reapeats')).element(by.css(''));