SAPUI5學習第五天-----（09）終于到CSS了！

Custom CSS and Theme Colors

官網代碼

有時我們需要定義一些更細粒度的布局，這時我們可以通過向控制元件添加自定義樣式類來使用 CSS 的靈活性，并根據需要設定它們的樣式，

警告：
如兼容性規則所述，由SAPUI5生成的HTML和CSS不是公共API的一部分，在補丁和小版本中可能會更改，如果您決定覆寫樣式，那么您有義務在SAPUI5每次更新時測驗和更新您的修改，這樣做的先決條件是您可以控制正在使用的 SAPUI5 版本，例如在獨立場景中，在 SAP Fiori launchpad 中運行您的應用程式時，這是不可能的，其中 SAPUI5 為所有應用程式集中加載，因此，SAP Fiori launchpad 應用程式不應覆寫樣式，

webapp/css/style.css

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;
}

我們創建一個css檔案夾，它將包含我們的css檔案，在css檔案夾內的新樣式定義檔案中，我們創建了與自定義命名空間類相結合的自定義類，這確保樣式將只應用在我們的應用程式中使用的控制元件上，

一個按鈕的默認外邊距是0，我們想要覆寫它：我們通過用樣式類myCustomButton給按鈕添加一個自定義外邊距2px(或相對于默認字體大小16px計算出的0.125rem)，我們添加了CSS類sapMBtn來讓我們的選擇器更具體：在CSS中，擁有最具體選擇器的規則 “wins”，

對于 right-to-left (rtl)的語言，比如阿拉伯語，當應用程式顯示為倒轉時，您可以設定左側外邊距，并重置右側外邊距，如果你只使用標準的SAPUI5控制元件，你不需要關心這個，在本例，我們使用自定義CSS，你必須添加這個資訊，

在另一個類myCustomText中，我們定義了一個粗體文本，并將display 設定為inline-block，現在我們只定義了自定義類，沒有任何額外的選擇器，我們在這里還沒有設定顏色值，我們將在視圖中進行設定，

webapp/manifest.json

{
	"_version": "1.21.0",
	"sap.app": {
		"id": "sap.ui.demo.walkthrough",
		"type": "application",
		"i18n": {
			"bundleUrl": "i18n/i18n.properties",
			"supportedLocales": [
				""
			],
			"fallbackLocale": ""
		},
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.ui": {
		"technology": "UI5",
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		}
	},
	"sap.ui5": {
		"rootView": {
			"viewName": "sap.ui.demo.walkthrough.view.App",
			"type": "XML",
			"async": true,
			"id": "app"
		},
		"dependencies": {
			"minUI5Version": "1.60",
			"libs": {
				"sap.m": {}
			}
		},
		"config": {
			"invoiceLocal": "/Invoices.json"
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.ui.demo.walkthrough.i18n.i18n",
					"supportedLocales": [
						""
					],
					"fallbackLocale": ""
				}
			}
		},
		"resources": {
			"css": [
				{
					"uri": "css/style.css"
				}
			]
		}
	}
}

其中

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

  }

在sap.ui5命名空間的資源部分，可以加載應用的其他資源，我們通過定義一個相對于組件的URI來加載CSS樣式，然后SAPUI5將該檔案作為標記添加到HTML頁面的header，就像普通Web頁面一樣，瀏覽器會自動加載它，

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>

應用程式控制元件配置了我們的自定義命名空間類myAppDemoWT，這個類沒有設定樣式規則，在CSS規則的定義中被用來定義CSS選擇器，這些選擇器只對這個應用有效，

我們將自定義CSS類添加到按鈕中，以精確地定義按鈕和輸入欄位之間的空間，現在我們為面板內容設計了一個像素完美的設計，

為了突出顯示輸出文本，我們使用FormattedText控制元件，該控制元件可以通過使用自定義CSS或HTML代碼來單獨設定樣式，我們添加了自定義CSS類(myCustomText)，并添加了一個依賴于主題的CSS類來設定在主題中定義的突出顯示顏色，

實際的顏色現在取決于所選擇的主題，這確保了顏色總是適合主題，語意上是清楚的，有關可用CSS類名稱的完整串列，請參閱CSS類的主題引數，

約定：
不要在自定義CSS中指定顏色，而是使用標準的主題相關類代替，

按鈕和輸入欄位之間的空間現在更小，輸出文本為粗體

端午，歐耶！閃人