-
Notifications
You must be signed in to change notification settings - Fork 0
ShortTermMission
matjung edited this page Sep 15, 2020
·
7 revisions
We build a customized html element named action-bar which will simulate the behavior and UI of a mobile devices action bar.
<html><head><meta charset="UTF-8"><title>Hello Android</title>
<script type='module' src='actionbar.js'></script></head>
<body>
<header><action-bar id='actionbar'></action-bar></header>
<main><p>Skipped</p>
<footer></footer></body></html>
That will get displayed as
<nav id='action-bar-nav'><span id='action-bar-title'>Hello Android</span></nav>
The action-bar supports a few default icons and actions.
<action-bar id='actionbar' menu='h b t g s i ? o m'></action-bar>
This will get displayed as
<nav id='action-bar-nav'>
<span id='action-bar-home' class='action-bar-item' title='Homepage'>🏠</span>
<span id='action-bar-back' class='action-bar-item' title='Backpage'>🡄</span>
<span id='action-bar-title' class='action-bar-item action-bar-title'>Hello Android</span>
<span id='action-bar-search' class='action-bar-item' title='Search'>🔎</span>
<span id='action-bar-settings' class='action-bar-item' title='Settings'>⚙</span>
<span id='action-bar-info' class='action-bar-item' title='Info'>🛈</span>
<span id='action-bar-help' class='action-bar-item' title='Help'>❔</span>
<span id='action-bar-options' class='action-bar-item' title='Options'>┇</span>
<span id='action-bar-menu' class='action-bar-item' title='Menu'>☰</span>
</nav>
hints: hints='false' will prevent the title attributes from appearing.
title: title='My new title', instead of sourcing title from document.title it will come from the attribute.
onclick: TODO
E.g. <action-bar id='actionbar' menu='h b t g s i ? o m' title='Hello Webbrowser' hints='false'></action-bar>
TODO
TODO