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