Created
August 25, 2014 05:17
-
-
Save dennisseah/35eb447a02b05b1a136e to your computer and use it in GitHub Desktop.
SAPUI5: Icon cheatsheet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <style> | |
| .box { | |
| flex-wrap: wrap; | |
| } | |
| .hbox { | |
| margin: 3px; | |
| padding: 5px; | |
| border: 1px solid #333; | |
| border-radius: 8px; | |
| width: 220px; | |
| background-color: #fff; | |
| } | |
| .hbox>div { | |
| margin: 5px; | |
| flex: 1; | |
| } | |
| .hbox>div:first-child { | |
| flex: 3; | |
| } | |
| .panel { | |
| border: 1px solid #333; | |
| background-color: #fff; | |
| margin: 5px; | |
| border-radius: 8px; | |
| padding: 10px; | |
| } | |
| .example:before { | |
| content: '\e05e'; | |
| font-family: 'SAP-icons'; | |
| font-size: 15px; | |
| margin-left: 3px; | |
| margin-right: 3px; | |
| color: blue; | |
| cursor: pointer; | |
| } | |
| </style> | |
| <script id="sap-ui-bootstrap" | |
| type="text/javascript" | |
| data-sap-ui-libs="sap.m" | |
| data-sap-ui-theme="sap_bluecrystal" | |
| src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"> | |
| </script> | |
| <script> | |
| $(function() { | |
| jQuery.sap.require("sap.ui.core.IconPool"); | |
| jQuery.sap.require("sap.ui.core.Icon"); | |
| var hexCode = parseInt('e000', 16); | |
| var iconnames = sap.ui.core.IconPool.getIconNames(); | |
| var model = new sap.ui.model.json.JSONModel(); | |
| var data = []; | |
| for (var i = 0; i < iconnames.length; i++) { | |
| var name = iconnames[i]; | |
| data.push({ | |
| name : name, | |
| icon: 'sap-icon://' + name, | |
| code: '\\' + (hexCode + i).toString(16) | |
| }); | |
| } | |
| model.setData(data); | |
| var box = new sap.m.FlexBox(); | |
| box.bindAggregation('items', '/', new sap.m.HBox({ | |
| items: [ | |
| new sap.m.Text({text: '{name}'}), | |
| new sap.ui.core.Icon({src: '{icon}'}), | |
| new sap.m.Text({text: '{code}'}) | |
| ] | |
| }).addStyleClass('hbox') | |
| ).addStyleClass('box'); | |
| box.setModel(model); | |
| box.placeAt('content'); | |
| }); | |
| </script> | |
| </head> | |
| <body class="sapUiBody"> | |
| <div class="panel example">Using hex code in CSS to display icon before this div (see the bblue icon). <pre> | |
| .example:before { | |
| content: '\e05e'; | |
| font-family: 'SAP-icons'; | |
| font-size: 15px; | |
| margin-left: 3px; | |
| margin-right: 3px; | |
| color: blue; | |
| cursor: pointer; | |
| }</pre> | |
| </div> | |
| <div class="panel"> | |
| Example of using icon control: <pre>var icon = new sap.ui.icon.Icon({ | |
| src: 'sap-icon://account ' | |
| });</pre> | |
| </div> | |
| <div id="content"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment