Links
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.

Table of contents

Step 1 — Element widgets, again

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.
warning
Don't forget to initialize state so the buttons work properly
Example:
<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:

Step 2 — HTML Styles

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:

Step 3 — Elements properties (Disabling, Hiding, Loading, Iterating)

Some elements of the HTML file have properties. They can be changed.
warning
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: