x-tag / appbar

An Appbar lives at the top of your web application and contains a header, subheader and basic styles

X-Tag Components

Get the latest X-Tag core library and components.

Included Components:

• x-tag-core https://github.com/x-tag/core
• x-tag-accordion https://github.com/x-tag/accordion
• x-tag-appbar https://github.com/x-tag/appbar
• x-tag-code-prism https://github.com/x-tag/code-prism
• x-tag-flipbox https://github.com/x-tag/flipbox
• x-tag-growbox https://github.com/x-tag/growbox
• x-tag-leaflet-map https://github.com/x-tag/map
• x-tag-mediaquery https://github.com/x-tag/mediaquery
• x-tag-mixin-request https://github.com/pennyfx/mixin-request
• x-tag-modal https://github.com/x-tag/modal
• x-tag-panel https://github.com/x-tag/panel
• x-tag-shiftbox https://github.com/x-tag/shiftbox
• x-tag-slidebox https://github.com/x-tag/slidebox
• x-tag-spinner https://github.com/x-tag/spinner
• x-tag-switch https://github.com/x-tag/switch
• x-tag-toggle https://github.com/x-tag/toggle

More components are available on Bower.

  $ bower search x-tag

Developers

Build

This distributable files under ./dist/ are generated by running the following commands

  # Install npm dependencies.  Bower, Grunt and grunt tasks.
  $ npm install

  # Downloads all packages listed under 'dependencies' in bower.json to
  # ./components/ directory.
  $ bower install

  # Concats together the downloaded X-Tags from ./components and places
  # the results in ./dist/
  $ grunt build

Custom Build

If you would like to make a custom build you can do so by modifying the packages listed in the bower.json file and rerunning the commands above.

appbar's Issues

How is the subheading attribute supposed to work?

The current demo doesn't show the content of the subheading attribute anywhere, instead it is set up as an attribute of the h1. Are we supposed to conjure attr magic in order to show the content?

Or is this a bug? :)

I'm specifically referring to this demo: https://github.com/x-tag/appbar/blob/master/demo/testpage.html

`document.createElement('x-appbar');` causes crash

This line fails when trying to create an appbar via document.createElement: https://github.com/x-tag/appbar/blob/master/src/appbar.js#L6

Use the trigram unicode character for the menu icon in the demo/template

The trigram unicode character most like the common three-line icon that denotes a slide-in menu, let's use it in our demos instead of the janky two-line character: http://unicode-table.com/en/2630/

Enhancement: V2 update

I want to do a v2 update to this element, but I don't quite understand if the stylesheet in the demo needs to be updated.

Status: Needs attention

autousing the innerHTML if heading attribute not present?

I tried to use <x-appbar> in a naive way and just did something like

<x-appbar>hey</x-appbar>

but it didn't work properly (putting the text into <h1>) until I did this:

<x-appbar heading="hey"></x-appbar>

I wonder what do you think of just having x-appbar be more... HTMLish and use the child content if a heading is not specified.

Retool title to rely on Heading tags instead of a Header

Use of a <header> in this component is semantically incorrect, please change the code to look for the first Heading it finds in the tag and use that for title purposes.

Unknown <x-action> elements used in appbar example

I have tried to locate where these are defined but I'm failing quite miserably. Are them supposed to be "better" than a button (more semantic, awesomer in general) or is this a leftover of previous iterations?

See:

appbar/demo/testpage.html

Line 69 in f50b20b

<x-action>=</x-action>

and

appbar/demo/testpage.html

Line 80 in f50b20b

<x-action>=</x-action>

I'm trying to update the docs for appbar so they are consistent with the docs in Brick and the docs in its own demo page, so I can replace these with buttons if you're OK with this change.

No demo?

Seems like you should have a working/live demo for this.

Bower stylus compilation error (cannot find mixins)

Having a Brunch project with Bower, and after adding "x-tag-appbar": "0.2.11" to dependencies in bower.json, I get this error when launching node_modules/.bin/brunch watch --server:

17 Mar 22:40:10 - error: Compiling of 'bower_components/x-tag-appbar/src/appbar.styl' failed. bower_components/x-tag-appbar/src/appbar.styl:1
 > 1| @import 'mixins'
   2| @import 'params'
   3| 
   4| x-appbar {

failed to locate @import file mixins.styl

Enhancement: Demo update

Couldn't set the demo up on the GH page on my repo, I'm cloning currently and am going to install need package and bower dependencies.

Enable demo to be preview-able on GH pages.