HTML and CSS Reference
In-Depth Information
You open the about.html page and assign the following markup to the BODY tag:
<div id="aboutContainer"
<div class="win-ui-dark win-header">
<button type="button"
<div class="win-label">About TodoList</div>
<div class="win-content">
<div class="win-settings-section">
<!-- Your content goes here -->
It is important that the page contains a root DIV bound to the SettingsFlyout component. The ID
of the DIV is unimportant but it should be unique within the application. Also the command ID you
assign through the data-win-options attribute should be unique.
To give the page a look and feel consistent with other applications, you might want to add a
child DIV element styled with the win-header CSS class. Also using the win-ui-dark class is a matter
of graphical preference. You can choose between win-ui-dark and win-ui-light . Finally, you need a
button to navigate back to the application. For this reason, you add a BUTTON element, as in the
listing above. Finally, the DIV styled with the win-label class determines the caption of the page.
Any page-specific content goes into the DIV styled as win-content . You are completely free to
structure and style this content as you like. It is purely a matter of style; it doesn't affect the behavior
of the application.
Figure 9-13 shows the look and feel of the About page.
All the steps described here for the About page can be safely replicated for any other page you
want to list in the Settings charm that doesn't require interaction with the user.
Note As a user, you can dismiss the Settings panel by clicking or tapping outside the area
or just clicking or tapping the Back button.
Search WWH ::

Custom Search