I am using Ionic/Angular and also animate.css to give some fancy touches.
At first I was using this type of tabs and everything was working properly
<a class="tab-item has-badge" href="#/app/bet-slip">
<span class="badge badge-assertive animated"
ng-class="picksCount?'rubberBand':'bounceIn'">{{betSlipCount}}</span>
<i class="icon ion-code-download"></i>
</a>
but the requirements says that I need to use <ion-tabs></ion-tabs> and thats what I am trying.
In the first type of tabs above you can see that there is a <span> that actually holds a badge with an ng-class and at the end {{betSlipCount}}, that ng-class it is been applied every time that {{betSlipCount}} which is an integer changes thru a boolean named picksCount. now I am using the type of tabs I mentioned before and now I have:
<ion-tab title="BetSlip"
class="animated"
ng-class="picksCount?'rubberBand':'bounceIn'"
badge="betSlipCount"
badge-style="badge-assertive">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
as you can see some stuff change there, the badege now is inside the same first tap I do not know how to apply the ng-class correctly in this case, and I need the same behavior, I need that class applied to the badge every time that the betSlipCount changes.
I think you don't need the ng-class condition there at all. That condition should be in your controller and just store the calculated class in your controller and use that variable in your ng-class statement in the html. The value change should be automatically updated in the html when that scope variable changes.
Haven't tried, but it might solve the issue.
Related
How to select Actions Button followed by the Div class containing known Text ( for example, card_header-title"Addresses" in this case) in Robot Test Framework?
The page contains several span table sections and each of them has its own actions and show-history buttons. To select the specific Actions button, I could use its xpath, but I am trying to access all sections in a for loop and the xpath of actions button in one section changes from the other, so hard coding is not an option for me. Would someone please help.
<div class="attribute-group-header card__header">
<h3 class="attribute-group-title card__header-title">Addresses</h3>
<div class="floatright">
<input type="button" class="action small btn" value="Actions">
<input type="button" class="showHistory action small btn" value="ShowHistory">
</div>
</div>
I know you say you don't want to use Xpaths but maybe one of these examples could help. I don't see any other way of achieving what you're asking for other than having id's supplied on the buttons.
You could use an xpath locator that first finds the text of the "attribute-group-title card__header-title" element and then selects the following sibling div, followed by the input:
//*[contains(text(),'Addresses')]/following-sibling::div[1]//input[#value='Actions']
Assume that I am using the following icon in multiple places in my code to represent delete icon:
<i class="fas fa-trash-alt"></i>
If after a while I decide to change the icon to something else like:
<i class="fas fa-eraser"></i>
I have to go and find all the instances of the first icon and change the class name to fas fa-eraser which may be painful if the source code is huge.
What I like to do is to have a class name like delete-icon and add it to every delete icon element that I have like:
<i class="delete-icon"></i>
and then somehow in my css styles, have a rule like:
.delete-icon {
?....[add fas]
?....[add fa-eraser]
}
Is it possible to have such rule in css?
Have a look at sass which is a great css pre-processor.It allows you to write css code and has great features like variable,inheritance among others
I heard, but cannot find any document to double check, that this technique helps reduce the computer processes with specificity of CSS, when the browser has to calculate which class to apply when a tag has IDs or Classes in the document.
This is an extract from Google Material Design Lite, which uses the technique such:
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
You will notice the class
mdl-button
This one is used as an ID basically. While
mdl-button--colored
is the ID mentioned above, with the class
colored
So, practically this is the same to:
#mdl-button.colored
With the difference that the computer wont have to process the specificity with the ID and Class, because now we only have a unique class.
So again.. the question is "how is this technique called" or if there is no name, maybe can someone post a link to documents that explain deeply the concept?
Cheers guys!
You might want to check out the Block Element Modifier methodology for CSS. The idea behind it helps you achieve reusable components and code sharing in the front-end.
Check out this link for more information:
http://getbem.com/introduction/
descendant, child or adjacent, and overly qualified selectors
Which are what Google says not to use.
I have a simple problem here. What I need to do is that I need to place a class after span in a button. Like if:
<button class="test-button">
<span>This is button</span>
</button>
<span class="custom"> I need to place this after Test button using :after </span>
So if its not clear, I need to place the custom class after the span of text-button class. I was trying to accomplish this by using
.test-button span:after {
content:attr([class=".custom"]);
}
but its not working ...
content:attr doesn't work quite like that; it fetches the value of an attribute, rather than setting one (see example). I believe you can't set an attribute in that way - you'll have to apply the individual properties of .custom in the :after declaration manually.
When I validate this page with the w3c validator, I am told that "the name attribute is obsolete," however, I cannot find an alternative. Every article I can find about linking within a page still seems to specify using the name attribute. And the method that is mentioned on the validator (linking to an "id") doesn't seem to work for me.
Anyone know the correct alternative, or how to correctly link to an id?
Also, I'd like to be able to link to a specific point just above where the anchor points currently are...is there any way to be more specific about where the page scrolls/jumps to?
http://firewalkcreative.com/2012/2012.html
You can skip to any element with specified identifier like that:
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
Skip to navigation
you can use a class name or an id:
<a id="top"></a>
<a class="top"></a>
or you can assign multiple class to make it more specific
<a class="link top"></a>
or with html5 you can do this:
<a data-name="top" ></a>
in the old days, speek html 4, you could to internal links like:
link
and the target would be
<a name="bottom"></a>
Now this days we do it like that:
link
target:
<foo id="bottom"></foo>
You see i use foo, because it can be whatever element you like