polymer-tile-window

A tile component using Polymer.

Demo

Install

Install the component using Bower:

$ bower install teaegg/polymer-tile-window --save

Or download as ZIP.

Usage

Import Web Components' polyfill:

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

Import polymer-tile-window:

<link rel="import" href="bower_components/polymer-tile-window/polymer-tile-window.html">

Start using it!

<style>
  polymer-tile {
    padding: 5% 10% 5% 10%;background:blue;
  }

  .tile-1,
  .tile-2,
  .tile-4 {
    box-sizing: border-box;
    position: relative;
  }
  .tile-1 {
    width: 120px;
    height: 120px;
    float: left;
  }
  .tile-2 {
    width: 248px;
    height: 120px;
    margin: 4px;
  }
  .tile-2 .tile-1:nth-child(even) {
    margin-left: 8px;
  }
  .tile-4 {
    width: 248px;
    height: 248px;
    margin: 4px;
  }
</style>

<polymer-tile-window fit transitions="hero-transition">

  Do not set 'hero' attribute to any tag for first section, 
  the tile-window will automatically controll 'hero' for you.
  'linkto' attribute will make the tile links to a window in another section by id.
  clicking 'closeButton' will call the 'restore' method.

  <section>
    <polymer-tile fit> 
      <div class="tile-2">
        <div class="tile-1" style="background: yellow;"></div>
        <div class="tile-1" style="background: red;" linkto="popup2" hero-id="popup2">
          <button hero-id="btn2">click me</button>
        </div>
      </div>
      <div class="tile-2" style="background: orange;" linkto="popup1" hero-id="popup1">
          <button hero-id="btn1">click me</button>
      </div>
      <div class="tile-4" double style="background: purple;"></div>
    </polymer-tile>
  </section>

  <section window id="popup1" >
    <div fit style="background: orange;" hero-id="popup1" hero>
      <button closeButton hero-id="btn1">click me</button>
    </div>
  </section>

  <section window id="popup2">
    <div fit style="background: red;" hero-id="popup2" hero>
      <button closeButton hero-id="btn2">click me</button>
    </div>
  </section>
</polymer-tile-window>

Options

Method	Params	return	Description
`restore`	none	none	Navigate to the startup page.

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -m 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

License

MIT License