Comment on page
Part 5 — Styling your app [Customizing the UI]
In this part, you will learn how you can customize HTML in your application. We will use our Application Designer to preview the HTML files.
Remember the Part 2 from Chapter 2 — Element widgets?
We can use elements from Element when creating applications with UI.
It is enough to add the desired element to the HTML file.
Don't forget to initialize
state so the buttons work properlyExample:
<div>
<div>
<el-button type="success">Success</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
<el-button type="info">Info</el-button>
</div>
<hr/>
<div>
state.checkedList value: {{state.checkedList}}
</div>
<hr/>
<div>
<el-checkbox-group v-model="state.checkedList">
<el-checkbox label="Option A"></el-checkbox>
<el-checkbox label="Option B"></el-checkbox>
<el-checkbox label="Option C"></el-checkbox>
</el-checkbox-group>
</div>
</div>
Result:
Also you can create your own styles and apply them to elements.
Inline styles are also available.
Example:
<div id="styling-your-app">
<sly-style>
#styling-your-app .our-custom-class {
font-size: 50px;
}
</sly-style>
<div class="our-custom-class">
Text with custom class
</div>
<hr/>
<div style="font-size: 24px">
Text with custom style
</div>
<hr/>
<div>
Text without custom class
</div>
</div>
Result:
Some elements of the HTML file have properties.
They can be changed.
You can use
state to pass values to these properties!<div>
<hr/> <!-- disabling property -->
<el-button type="success" :disabled="true">i'm disabled</el-button>
<hr/> <!-- hiding(v-if) property -->
<el-button type="success" v-if="false">i'm hidden</el-button>
<el-button type="success" v-if="true">i'm not hidden</el-button>
<hr/> <!-- loading property -->
<el-button type="success" :loading="true">i'm loading</el-button>
<hr/> <!-- iterating property -->
<!--
fill the data field:
{"simpleData":
{
"now": "we",
"can": "iterate",
"in": "HTML!"
}
}
-->
<div v-for="v,k in data.simpleData" style="word-break: break-all;">
<b>{{k}}</b>: <span>{{v}}</span>
</div>
</div>
Result:
Last modified 1yr ago