Pixelate Components

<px-tree-view>

Examples

A simple tree view. Elements can be expanded or collapsed by double clicking the header, or by clicking the expansion icon.

<px-tree-view>
  <px-tree-view-node header="Components (double click to expand)">
    <px-tree-view-node header="Layout">
      <px-tree-view-node header="FlexPanel"></px-tree-view-node>
      <px-tree-view-node header="GridPanel"></px-tree-view-node>
    </px-tree-view-node>
    <px-tree-view-node header="Navigation">
      <px-tree-view-node header="TreeView"></px-tree-view-node>
      <px-tree-view-node header="ListView"></px-tree-view-node>
    </px-tree-view-node>
  </px-tree-view-node>
</px-tree-view>

A customized tree view where icons are added to the header. A tree view like this is common in modeling programs.

Meshes

Orc.skeleton

root

Lights

Sun

Point Light

Cameras

Player Camera

Replay Camera

Top View Camera

<px-tree-view>
  <!-- Meshes -->
  <px-tree-view-node>
    <px-flex-panel orientation="horizontal" class="tree-view-header">
      <div class="icon mesh-icon"></div>
      <div>Meshes</div>
    </px-flex-panel>

    <!-- Skeleton -->
    <px-tree-view-node>
      <px-flex-panel orientation="horizontal" class="tree-view-header">
        <div class="icon skeleton-icon"></div>
        <div>Orc.skeleton</div>
      </px-flex-panel>

      <!-- Root node -->
      <px-tree-view-node>
        <px-flex-panel orientation="horizontal" class="tree-view-header">
          <div class="icon bone-icon"></div>
          <div>root</div>
        </px-flex-panel>
      </px-tree-view-node>
    </px-tree-view-node>
  </px-tree-view-node>

  <!-- Lights -->
  <px-tree-view-node>
    <px-flex-panel orientation="horizontal" class="tree-view-header">
      <div class="icon light-icon"></div>
      <div>Lights</div>
    </px-flex-panel>

    <!-- Sun -->
    <px-tree-view-node>
      <px-flex-panel orientation="horizontal" class="tree-view-header">
        <div class="icon light-icon"></div>
        <div>Sun</div>
      </px-flex-panel>
    </px-tree-view-node>

    <!-- Point Light -->
    <px-tree-view-node>
      <px-flex-panel orientation="horizontal" class="tree-view-header">
        <div class="icon light-icon"></div>
        <div>Point Light</div>
      </px-flex-panel>
    </px-tree-view-node>
  </px-tree-view-node>

  <!-- Cameras -->
  <px-tree-view-node>
    <px-flex-panel orientation="horizontal" class="tree-view-header">
      <div class="icon camera-icon"></div>
      <div>Cameras</div>
    </px-flex-panel>

    <!-- Player Camera -->
    <px-tree-view-node>
      <px-flex-panel orientation="horizontal" class="tree-view-header">
        <div class="icon camera-icon"></div>
        <div>Player Camera</div>
      </px-flex-panel>
    </px-tree-view-node>

    <!-- Replay Camera -->
    <px-tree-view-node>
      <px-flex-panel orientation="horizontal" class="tree-view-header">
        <div class="icon camera-icon"></div>
        <div>Replay Camera</div>
      </px-flex-panel>
    </px-tree-view-node>

    <!-- Top View Camera -->
    <px-tree-view-node>
      <px-flex-panel orientation="horizontal" class="tree-view-header">
        <div class="icon camera-icon"></div>
        <div>Top View Camera</div>
      </px-flex-panel>
    </px-tree-view-node>
  </px-tree-view-node>
</px-tree-view>

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