Changing the shape of sap.m.Button in SAPUI5
Now in this blog we will see how to create a round button. The thought behind this blog is to play with the shape of the button.We would use the a bit css to change the boundary of the button.
For that create a SAPUI5 mobile project.
In the index.html add the following code to within the <head> tag:
| index.html –<style> tag |
|---|
|
<style> .circleButton div.sapMBtnInner { height: 300%; width: 230%; border-radius: 50%; } </style> |
Now in the createContent of the view.js paste the following code:
| createContent of view.js |
|---|
|
var oPage = new sap.m.Page({ title: “Round Button Demo” }); var oButton=new sap.m.Button({ text:“Click”, press:funtion(){ sap.m.MessageToast.show(“shaped button clicked”,{duration:1000}); } }); oButton.addStyleClass(‘circleButton’); oPage.addContent(oButton); return oPage; |
Save and run the application;
Round Shape
Now in the <style> tag change the height and width and border-radius to find different shapes:
Round Edged Button
height: 300%;
width: 230%;
border-radius: 20%;
Oval Shaped Button
height: 200%;
width: 230%;
border-radius: 50%;
So, keep changing the parameters to find the shape which fits your requirement.