-1

I want to show thumb-left icon on button in sapui5. thumb-left is not available. So can i choose thumb-down or thumb-up and rotate it on 90 Degree ? How I can do it. 2ndly How to set the buttons color Red, Green ,Yellow. I set button type to Accept, Reject but it just make border of buton green ,red,

    <Button id="btnNegative" type="Reject"  icon="sap-icon://thumb-down" text="Negative" press=".onSentimentFeedBackButtonclick"></Button>
    <Button id="btnNeutral" type="Accept"  icon="sap-icon://thumb-up" text="Neutral" press=".onSentimentFeedBackButtonclick"></Button>

Thumb button and color

  • What have you tried? Did you use a custom style class and add your own CSS? – Marc Nov 29 '16 at 10:52
  • how i can change "icon="sap-icon://thumb-down"" into thumb-down using css. because it generate auto classes. and if i change any thing it might effect other design in the project –  Nov 29 '16 at 11:09
  • http://stackoverflow.com/questions/29508061/openui5-js-view-addstyleclass – Marc Nov 29 '16 at 11:24

1 Answers1

2

Here is a simple example

In your XML add a custom class to your button

<Button id="btnNeutral" class="myNeutralThumb" icon="sap-icon://thumb-up" text="Neutral" press=".onSentimentFeedBackButtonclick" />

Then in your style.css (or however your CSS file is named) add the following:

button.myNeutralThumb .sapMBtnInner {
  border-color: #ff0 !important;
}

button.myNeutralThumb .sapMBtnIcon  {
  transform: rotate(90deg);
  color: #ff0 !important;
}

The first style changes the color of the button's border. Probably that should be the same color as the icon.

The second style rotates your thumb icon and changes its color.

If you also want to change the background-color of your button, put something like background-color: #fff; in the second style rule.

Edit: Replaced complicated and long and non-future-proof CSS style rule with short CSS rule + !important

Marc
  • 6,051
  • 5
  • 26
  • 56
  • Neutral –  Nov 29 '16 at 13:57
  • this is the HTML generated by browser. I can't figure out problem why your code is not working. your method is right. but I have less understanding –  Nov 29 '16 at 13:58
  • There is no DIV in your generated code between the BUTTON and the SPAN. For some reason it's also a SPAN. So it seems like my code is not really future proof. You can make the CSS style rules less specific when applying the `!important` flag – Marc Nov 29 '16 at 14:03