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

  • 相关阅读:
    Spring-10-AOP先验知识之代理模式
    Spring-09-使用Java的方式配置Spring
    Spring-08-使用注解开发
    Spring-07-Bean自动配置
    Spring-06-依赖注入(DI)
    Spring-05-配置之别名、bean、import
    Spring-04-IOC创建对象的方式
    Spring-02-IOC理论推导
    Spring-01-初见spring
    h5
  • 原文地址:https://www.cnblogs.com/xiaoshiwang/p/15188184.html
Copyright © 2011-2022 走看看