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();