I have an issue with the class changing button. I use the [ngClass] directive to change the button style ( Bootstrap classes). But when I click the button, the "btn" class disappears from the code, so instead get 'btn-success btn', I get only 'btn-success'. The button also takes a part in showing and hiding a paragraph with random text.
This is TS code:
<button type="button"
(click)="onClick($event)"
[ngClass]="{'btn-success btn': showPass, 'btn-danger btn': !showPass }">{{status}}
</button>
<p [hidden]="showPass" >Secret password</p>```
and this is HTML:
onClick(event: Event) {
this.showPass=!this.showPass;
this.status = this.showPass ? "Show me!" : "Hide me!"
console.log(this.showPass)
If the btn class is always going to be there, you can just do this instead:
<button type="button"
(click)="onClick($event)"
class="btn"
[ngClass]="{'btn-success': showPass, 'btn-danger': !showPass }">{{status}}
</button>
Related
How can I toggle background color on multiple buttons.( reference images )
I have set of buttons. Once user click on any button it change the background color and if click again on same button other button the first clicked button reset to original color and change the 2nd click button.
code
<span class="input-group-btn">
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectToday('approved')"
>
Select Today
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectWeek('approved')"
>
To Current Week
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectMonth('approved')"
>
To Current Month
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="AllTime('approved')"
>
All Time
</button>
</span>
Can anyone give me clue how to bind the class with each other
image
You can make it dynamic like this:
Working Demo
TS:
selected = null
buttons = ["Selecct Today", "Current Week", "Current Week", "All Time"];
Template:
<ng-container *ngFor="let btn of buttons;let i=index">
<button [style.background-color]="selected == i ? 'green' : 'red'" (click)=" selected == i? selected = null:selected = i">
{{btn}}
</button>
</ng-container>
To change the color of next button on deselection of already selected btn, try this:
<ng-container *ngFor="let btn of buttons;let i=index">
<button [style.background-color]="selected == i ? 'green' : 'red'" (click)=" selected == i? selected = i + 1:selected = i">
{{btn}}
</button>
</ng-container>
You can use radio button and customize it's display style instead of using Button directly. I am sure i will solve your problem. Just refer to this link:
Convert Radio button to Button
Give an index or id to each button and give the index on click
(click)="enableDisableRule(2)"
in your ts, save the index:
enableDisableRule(selectedIndex:number){
...
if(this.selectedIndex = selectedIndex){
this.selectedIndex = null;
} else{
this.selectedIndex = selectedIndex;
}
}
And in your html, update you button acording to selectedIndex:
[style.background-color]="selectedIndex === 2 ? 'green' : 'red'"
Or something in this spirit.
I have a wizard with the following custom wizard buttons:
<clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
<clr-wizard-button [type]="'previous'">Previous</clr-wizard-button>
<clr-wizard-button [type]="'next'">Next</clr-wizard-button>
<clr-wizard-button [type]="'custom-save'">Save</clr-wizard-button>
Now I want to style the button of type custom-save with a custom color and for this, I need to apply a css-selector. attr.class won't work.
What is the best way to achieve this?
edit:
Formatted html output of the custom-save button:
<clr-wizard-button class="clr-wizard-btn-wrapper" _nghost-c5="" ng-reflect-type="custom-save" ng-reflect-disabled="false" aria-hidden="false">
<button _ngcontent-c5="" class="btn clr-wizard-btn" type="button">
Speichern
</button>
</clr-wizard-button>
Just place a custom class on your ClrWizardButton and it will be rendered for you.
<clr-wizard-button [type]="'custom'" class="my-custom-button">Cancel</clr-wizard-button>
This will render out as you see, where you can target the button using .my-custom-button button in your CSS.
<clr-wizard-button class="my-custom-button clr-wizard-btn-wrapper ng-star-inserted" _nghost-c1="" ng-reflect-type="custom-previous" aria-hidden="false">
<button _ngcontent-c1="" class="btn clr-wizard-btn btn-outline clr-wizard-btn--secondary" type="button">Custom</button>
</clr-wizard-button>
Assuming this renders a standard button with a type, then an attribute selector would work.
button[type="custom-save"] {
background: lightgreen;
}
<button type="custom-save">Save</button>
In this JSBin: http://jsbin.com/fitiha/10/edit?js,output
Why is the "Tweet button" to the right of the "Add Photo" button. Per the code below, I believe it should be to the left?
<button className="btn btn-primary pull-right"
disabled={this.state.text.length === 0 && !this.state.photoAdded}>Tweet
</button>
<button className="btn btn-default pull-right"
onClick={this.togglePhoto}>
{this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }
</button>
You are using the pull-right class which is essentially float:right and that's how it works.
It stacks the elements in inverted order of their occurence.
Since, Tweet occured before Add Photo, it got floated to the right, and then add photo followed.
You could read up the CSS Spec here:
http://www.w3.org/TR/CSS2/visuren.html#floats
Or this SO answer for more info on how float works.
Here is my dropdownbutton:
<xp_1:dropDownButton id="dropDownButton1">
<xp_1:this.treeNodes>
<xp_1:basicContainerNode styleClass="btn-primary" label="Tools">
<xp_1:this.children>
<xp_1:basicLeafNode label="Edit">
</xp_1:basicLeafNode>
<xp_1:basicLeafNode label="New">
</xp_1:basicLeafNode>
<xp_1:basicLeafNode label="Home">
</xp_1:basicLeafNode>
</xp_1:this.children>
</xp_1:basicContainerNode>
</xp_1:this.treeNodes>
</xp_1:dropDownButton>
How to add glyphicon to the main dropdown button?
Adding a span somewhere inside just doesn't work like for core button:
<xp:button id="button2" styleClass="btn btn-success" value="Save" title="Save">
<span class="glyphicon glyphicon-floppy-disk"></span>
</xp:button>
Once you add code in your button, i.e. an eventHandler, you can add the icon there. Here is a button I have that includes a Font Awesome icon, but Glyphicons work the same way. Once you create the button and actions, go into the source code and add the icon as below:
<xp:button
value="Submit"
id="btnSave"
styleClass="btn btn-primary"
>
<i
class="fa fa-check"
aria-hidden="true"
></i>
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete"
>
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument
var="currentDocument"
></xp:saveDocument>
<xp:openPage
name="#{sessionScope.lastPageName}"
></xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
UPDATE
I did some tests, and while you can't add the icon the way we both want to, you can use CSS. I used a page with one dropdown button, and added CSS :before to add the icon within the button:
button::before {
font-family: "Glyphicons Halflings";
content: "\e172";
}
You may have to play with the CSS a little but hopefully, this can help.
I have a button at the moment, rendered in my MVC application as:
#Html.ActionLink("Delete", "DeleteTransfer", "Transaction", new { transferId = (Model.Id) }, new { #class = "btn btn-danger", #onclick = "return confirm('Are you sure you want to delete this Transfer?')" })
I want to use the Twitter Bootstrap classes to add an icon. However, for that the code would look like this:
<button class="btn btn-danger"><i class="icon-white icon-trash"></i> Delete</button>
How can I apply this in my ActionLink? It has an Image (i) embedded in the button.
Try:
<a class="btn btn-danger"
href="#Url.Action("DeleteTransfer", "Transaction", new { transferId = (Model.Id) })"
onclick = "return confirm('Are you sure you want to delete this Transfer?');"
>
<i class="icon-white icon-trash">Delete</i>
</a>
According your routes, it's possible you need:
#Url.Action("DeleteTransfer", "Transaction", new { transferId = (Model.Id) }, null)
According to the bootstrap documentation (http://getbootstrap.com/components/#glyphicons-examples) glyphicons might be the way to go. Here is an example of putting an icon on a button:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
Since ActionLink() is an htmlHelper extension that returns an "a" element, i.e., <a>...</a>, I believe the extension needs to be overridden.
I tried the following, but it resulted in the glyphicon being above the "a" element:
<span class="glyphicon glyphicon-star"></span>#Html.ActionLink("Delete", "DeleteTransfer")
I also tried putting the ActionLink() inside the <span></span> with the same results. I tried using css with text-wrap: none; and white-space: nowrap; but that didn't work either.
So I believe the answer is the extension needs to be overridden to accept another parameter for the glyphicon. Unless, someone can show a trick to make it stop wrapping.