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"
data-win-control="WinJS.UI.SettingsFlyout"
data-win-options="{settingsCommandId:'about'}">
<div class="win-ui-dark win-header">
<button type="button"
onclick="WinJS.UI.SettingsFlyout.show()"
class="win-backbutton"></button>
<div class="win-label">About TodoList</div>
</div>
<div class="win-content">
<div class="win-settings-section">
<!-- Your content goes here -->
<h1>v1.0.0.0.1</h1>
</div>
</div>
</div>
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