A Simple List

A simple, clean list by Burke Holland.

  •         
     <grid-layout columns="*">
      <list-view items="" class="listview">
          <list-view.itemTemplate>
              <stack-layout class="item" col="0" class="item">
                  <label text="" col="1"/>
              </stack-layout>
          </list-view.itemTemplate>
      </list-view>
    </grid-layout>
            
          
  •         
     .background-color-light {
      background-color: #ffffff; }
    
    .background-color-accent {
      background-color: #FF404B; }
    
    .background-color-dark {
      background-color: #243044; }
    
    .color-light {
      color: black; }
    
    .color-accent {
      color: #FF404B; }
    
    .color-dark {
      color: #243044; }
    
    .action-bar-light {
      background-color: #ffffff;
      color: #FF404B; }
    
    navigation-button {
      color: #FF404B; }
    
    .action-bar-accent {
      background-color: #FF404B;
      color: white; }
    
    .action-bar-dark {
      background-color: #243044;
      color: white; }
    
    .h1 {
      font-size: 36;
      margin-bottom: 10; }
    
    .h2 {
      font-size: 30;
      margin: 10 0 10 0; }
    
    .h3 {
      font-size: 24;
      margin: 10 0 10 0; }
    
    .h4 {
      font-size: 18;
      margin: 10 0 10 0; }
    
    .h5 {
      font-size: 14;
      margin: 10 0 10 0; }
    
    .h6 {
      font-size: 12;
      margin: 10 0 10 0; }
    
    .p {
      font-size: 14;
      margin: 0 0 10 0; }
    
    .background-color-light {
      background-color: #ffffff; }
    
    .background-color-accent {
      background-color: #FF404B; }
    
    .background-color-dark {
      background-color: #243044; }
    
    .color-light {
      color: black; }
    
    .color-accent {
      color: #FF404B; }
    
    .color-dark {
      color: #243044; }
    
    .button {
      padding: 10 12 10 10;
      min-width: 52;
      border-radius: 2; }
      .button .button-accent {
        background-color: #FF404B;
        color: #ffffff; }
        .button .button-accent .button-outline {
          background-color: #ffffff;
          color: #FF404B;
          border-color: #FF404B;
          border-width: 1; }
    
    .button-full {
      padding: 0; }
    
    .button-small {
      padding: 2 4 1 4;
      min-width: 28;
      min-height: 30;
      font-size: 12; }
    
    .button-large {
      padding: 0 16 0 16;
      min-width: 68;
      min-height: 59;
      font-size: 20; }
    
    .button-light {
      background-color: #ffffff;
      color: #FF404B;
      border-color: #b2b2b2;
      border-width: 1; }
    
    .button-dark {
      background-color: #243044;
      color: #ffffff; }
      .button-dark .button-outline {
        color: #243044;
        border-color: #243044;
        border-width: 1; }
    
    .listview {
      color: black; }
      .listview .item {
        padding: 10 10 10 10;
        font-size: 16;
        color: #444; }
        .listview .item .h2 {
          margin: 0;
          margin: 0;
          font-size: 20; }
        .listview .item .p {
          font-size: 14;
          color: #666;
          margin: 0; }
    
    .listview-inset {
      margin: 10;
      border-width: 1;
      border-color: #DDDDDD;
      border-radius: 10; }
    
    .item-avatar image {
      border-radius: 25;
      width: 50;
      height: 50; }
    
    .item-avatar stacklayout, .item-thumbnail stacklayout {
      padding-left: 16; }
    
    .form {
      margin: 0 0 20 0;
      padding: 0; }
      .form .button {
        margin: 0 0 0 10;
        padding: 0; }
      .form switch {
        margin-right: 16; }
      .form .form-item {
        padding: 10 16 10 16; }
      .form .input {
        padding-top: 2; }
      .form .input-inset {
        background-color: #EEEEEE;
        border-radius: 2;
        padding: 8; }
      .form .input-label {
        font-size: 18;
        padding: 4 0 5 0;
        color: #444; }
    
    .form-inset {
      margin: 10;
      border-width: 1;
      border-color: #DDDDDD; }
    
    .background-color-light {
      background-color: #ffffff; }
    
    .background-color-accent {
      background-color: #FF404B; }
    
    .background-color-dark {
      background-color: #243044; }
    
    .color-light {
      color: black; }
    
    .color-accent {
      color: #FF404B; }
    
    .color-dark {
      color: #243044; }
    
    .switch-accent {
      background-color: #FF404B; }
    
    .switch-dark {
      background-color: #243044; }
    
    .background-color-light {
      background-color: #ffffff; }
    
    .background-color-accent {
      background-color: #FF404B; }
    
    .background-color-dark {
      background-color: #243044; }
    
    .color-light {
      color: black; }
    
    .color-accent {
      color: #FF404B; }
    
    .color-dark {
      color: #243044; }
    
    .slider-light {
      background-color: #ffffff; }
    
    .slider-accent {
      background-color: #FF404B; }
    
    .slider-dark {
      background-color: #243044; }
    
    .background-color-light {
      background-color: #ffffff; }
    
    .background-color-accent {
      background-color: #FF404B; }
    
    .background-color-dark {
      background-color: #243044; }
    
    .color-light {
      color: black; }
    
    .color-accent {
      color: #FF404B; }
    
    .color-dark {
      color: #243044; }
    
    .segmented-bar {
      height: 50; }
      .segmented-bar .segmnted-bar-light {
        background-color: #ffffff; }
      .segmented-bar .segmented-bar-accent {
        background-color: #FF404B;
        color: #ffffff; }
      .segmented-bar .segmented-bar-dark {
        background-color: #243044;
        color: #ffffff; }
    
    textfield {
      font-size: 14; }
    
    .fa {
      font-family: 'FontAwesome', FontAwesome; }
    
    .fa-large {
      font-family: 'FontAwesome', FontAwesome;
      font-size: 26; }
    
    .padding {
      padding: 10; }
    
    .edges {
      margin-left: 10;
      margin-right: 10; }
    
    .left {
      horizontal-align: left;
      text-align: left; }
    
    .right {
      text-align: right;
      horizontal-align: right; }
    
    .center {
      horizontal-align: center;
      text-align: center; }
    
    .hr {
      height: 1;
      background-color: #CDCDCD; }
    
    .debug {
      border-width: 1;
      border-color: red; }
    
    
            
          
  •         import { ObservableArray } from 'data/observable-array';
    import { Observable, EventData } from 'data/observable';
    import { Page } from 'ui/page';
    
    let viewModel = new Observable({
        fakeListItems: new ObservableArray([
            { artist: 'Anberlin', title: 'New Surrender', img: 'new-surrender.jpg' },
            { artist: 'Anberlin', title: 'Vital', img: 'vital.jpg' },
            { artist: 'Anberlin', title: 'Dark Is The Way, Light Is A Place', img: 'dark-is-the-way.jpg' },
            { artist: 'Anberlin', title: 'Lowborn', img: 'lowborn.jpg' },
            { artist: 'Anberlin', title: 'Cities', img: 'cities.jpg' },
            { artist: 'Anberlin', title: 'Lost Songs', img: 'lost-songs.jpg' },
            { artist: 'Anberlin', title: 'Never Take Friendship Personal', img: 'never-take-friendship-personal.jpg' },
            { artist: 'Anberlin', title: 'Blueprints for City Friendships: The Anberlin Anthology', img: 'blueprints-for-city-friendships.jpg' },
            { artist: 'Anberlin', title: 'Blueprints for The Black Market', img: 'blueprints-for-the-blackmarket.jpg' },
            { artist: 'Anberlin', title: 'Dancing Between The Fibers Of Time', img: 'dancing-between-the-fibers-of-time.jpg' },
            { artist: 'Anberlin', title: 'Devotion', img: 'devotion.jpg' },
            { artist: 'Anberlin', title: 'Vital (The Remixes)', img: 'vital-the-remixes.jpg' }
        ])
    });
    
    class SimpleListView extends BasePage {
        loaded(args: EventData) {
          args.object.bindingContext = viewModel;
        }
    }
    
    module.exports = new SimpleListView();