zoukankan      html  css  js  c++  java
  • Step 14: Custom CSS and Theme Colors

    Step 14: Custom CSS and Theme Colors
    使用自定义CSS

    webapp/css/style.css (New)

    html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn {
       margin-right: 0.125rem
    }
    
    html[dir="rtl"] .myAppDemoWT .myCustomButton.sapMBtn {
       margin-left: 0.125rem
    }
    
    .myAppDemoWT .myCustomText {
       display: inline-block;
       font-weight: bold;
    }
    

    webapp/manifest.json

    ...
      "sap.ui5": {
    	...	
    	"models": {
    	  ...
    	},
    	"resources": {
    	  "css": [
    		{
    		  "uri": "css/style.css"
    		}
    	  ]
    	}
    
      }
    

    ui5会在html的header里面加标签,应用这个css文件

    webapp/view/App.view.xml

    <mvc:View
      controllerName="sap.ui.demo.walkthrough.controller.App"
      xmlns="sap.m"
      xmlns:mvc="sap.ui.core.mvc"
      displayBlock="true">
      <Shell>
      	<App class="myAppDemoWT">
      		<pages>
      			<Page title="{i18n>homePageTitle}">
      				<content>
      					<Panel
      						headerText="{i18n>helloPanelTitle}"
      						class="sapUiResponsiveMargin"
      						width="auto">
      						<content>
      							<Button
      								text="{i18n>showHelloButtonText}"
      								press=".onShowHello"
      								class="myCustomButton"/>
      							<Input
      								value="{/recipient/name}"
      								valueLiveUpdate="true"
      								width="60%"/>
      							<FormattedText
      								htmlText="Hello {/recipient/name}"
      								class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
      						</content>
      					</Panel>
      				</content>
      			</Page>
      		</pages>
      	</App>
      </Shell>
    </mvc:View>
    

    sapThemeHighlight-asColor:字体颜色会根据主题变化

    约定:不要在CSS文件里定义颜色,应该用主题控制颜色,这样一来颜色会随着主题的不同而自动变化。

    vx:xiaoshitou5854

  • 相关阅读:
    android部分控件应用解析
    CodeForces Round #179 (295A)
    面试题27:连续子数组的最大和
    java写文件时,输出不完整的原因以及解决方法
    序列化和反序列化--转
    Java多线程编程那些事:volatile解惑--转
    转变--一个平凡人的2017年总结及2018年展望
    系列文章--批处理学习
    set命令
    bat计算两个时间差
  • 原文地址:https://www.cnblogs.com/xiaoshiwang/p/15188184.html
Copyright © 2011-2022 走看看