Widgets - ZMYaro/holo-web GitHub Wiki

Holo Web supports the following widgets

####Action bars

• For a top action bar, create a <header class="holo-actionBar">. The class can be applied to other elements too, but <header> is preferred for the main top action bar.
• For a bottom action bar, create a <footer class="holo-actionBar">. The element for a bottom action bar must be a <footer>.
• At the moment, plain text in the action bar must be in a <span>. This requirement will be removed in later updates.
• <button>s in action bars will automatically style themselves like action bar buttons
• The activity title should have the class holo-title. If it is also given the class holo-up, it will have an up button arrow. A <button class="holo-title"> will have its text styled like a title, not a normal action bar button.

####Dialogs (NOT YET AVAILABLE)

• Create a <div class="holo-dialog">. The class can be applied to other elements too.
• Dialogs are position: fixed; by default.

####Lists

• Create a <ul class="holo-list> or <ol class="holo-list>.
• All child <li>s will automatically be styled properly.
• Place <button>s in the <li>s to create clickable targets. They will automatically style themselves like list items.
  • Note that buttons will not be full-width by default. To make a button fill the width of a list item, add the property width: calc(100% + 32px).
• You can either put the <ul> or <ol> directly on the page, or put it in a holo-dialog for a pop-up menu.