Pixelate Components

<px-grid-panel>

Defines a grid for laying out elements.

Examples

A grid panel with content spanning multiple sizes.

(0, 0)

(0, 1)

(1, 0)

(1, 1)

<px-grid-panel>
  <px-row-definitions>
    <px-row-definition height="100px"></px-row-definition>
    <px-row-definition height="200px"></px-row-definition>
  </px-row-definitions>
  <px-column-definitions>
    <px-column-definition width="100px"></px-column-definition>
    <px-column-definition width="200px"></px-column-definition>
  </px-column-definitions>
  <!-- First column -->
  <div data-column="0" data-row="0" class="red grid-item">(0, 0)</div>
  <div data-column="0" data-row="1" class="blue grid-item">(0, 1)</div>
  <!-- Second column -->
  <div data-column="1" data-row="0" class="green grid-item">(1, 0)</div>
  <div data-column="1" data-row="1" class="purple grid-item">(1, 1)</div>
</px-grid-panel>

A grid panel displaying input that contains elements spanning multiple rows.

First Name:

Last Name:

Address:

Address 2:

City:

State:

Zip:

Department

<px-grid-panel>
  <px-row-definitions>
    <px-row-definition></px-row-definition>
    <px-row-definition></px-row-definition>
    <px-row-definition></px-row-definition>
    <px-row-definition></px-row-definition>
    <px-row-definition></px-row-definition>
    <px-row-definition></px-row-definition>
    <px-row-definition></px-row-definition>
  </px-row-definitions>
  <px-column-definitions>
    <px-column-definition></px-column-definition>
    <px-column-definition></px-column-definition>
    <px-column-definition></px-column-definition>
  </px-column-definitions>
  <!-- First column -->
  <div data-column="0" data-row="0">First Name:</div>
  <div data-column="0" data-row="1">Last Name:</div>
  <div data-column="0" data-row="2">Address:</div>
  <div data-column="0" data-row="3">Address 2:</div>
  <div data-column="0" data-row="4">City:</div>
  <div data-column="0" data-row="5">State:</div>
  <div data-column="0" data-row="6">Zip:</div>
  <!-- Second column -->
  <input data-column="1" data-row="0" type="text">
  <input data-column="1" data-row="1" type="text">
  <input data-column="1" data-row="2" type="text">
  <input data-column="1" data-row="3" type="text">
  <input data-column="1" data-row="4" type="text">
  <input data-column="1" data-row="5" type="text">
  <input data-column="1" data-row="6" type="text">
  <!-- Third column -->
  <div data-column="2" data-row="0" data-rowspan="7">
    <div>Department</div>
    <select multiple size="3">
      <option>Finance</option>
      <option>Human Resources</option>
      <option>Marketing</option>
    </select>
  </div>
</px-grid-panel>

Layout

FlexPanel

GridPanel

Navigation

Accordion

Expander

ScrollViewer

Tab

TreeView

Controls

Button

ListView

ProgressBar

Tooltip

AutoComplete

Components

A set of reusable components for web applications

Examples

Layout

Navigation

Controls