Click here and follow my SAP UI5/FIORI snippets and information Page
I have shown below, how to use custom CSS(Cascading Style Sheet) in SAPUI5. Go through it and please let me know in case of any issue/doubt.
font-weight: bold;
font-size: 20px;
}
Note: Load CSS(Cascading Style Sheet) either from index.html,component.js or manifest.json
index.html
<link rel="stylesheet" type="text/css" href="css/style.css">
component.js
"includes" : ["css/style.css"]
manifest.json
"resources": {
"css": [{
"uri": "css/style.css"
}]
}
I have shown below, how to use custom CSS(Cascading Style Sheet) in SAPUI5. Go through it and please let me know in case of any issue/doubt.
Application Structure
View Part
<Page title="{i18n>title}">
<content>
<f:SimpleForm editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12"
adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
singleContainerFullSize="false">
<f:content>
<Label text="Full Name"/>
<Input></Input>
<Label text="E-mail"/>
<Input/>
<Label text="Mobile Number" class="colorClassCustom"/>
<Input></Input>
<Label text="Address"/>
<Input/>
</f:content>
</f:SimpleForm>
</content>
</Page>
style.css
// Custom CSS(Cascading Style Sheet) class....
.colorClassCustom{
color: red;font-weight: bold;
font-size: 20px;
}
Note: Load CSS(Cascading Style Sheet) either from index.html,component.js or manifest.json
index.html
<link rel="stylesheet" type="text/css" href="css/style.css">
component.js
"includes" : ["css/style.css"]
manifest.json
"resources": {
"css": [{
"uri": "css/style.css"
}]
}
No comments:
Post a Comment