apeman-react-list
Version:
apeman react package for list component.
437 lines (423 loc) • 54.2 kB
HTML
<html class="ap-html react-demo"><head class="ap-head"><meta class="ap-head-meta" charset="utf-8"/><title class="ap-head-title">apeman-react-list Demo</title><link rel="icon" href="https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/favicon/react-favicon.png?v=2.0.8"/><script type="text/javascript" src="./demo.js?v=2.0.8"></script><meta name="viewPort" content="width=device-width,initial-scale=1.0"/><style class="ap-style" type="text/css">@charset "UTF-8";
.react-demo body {
margin: 0;
padding: 0;
color: #555;
background-color: #FAFAFA;
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; }
.react-demo .react-demo-playground {
display: block;
padding: 40px;
min-height: 120px;
overflow-x: auto;
background-image: -moz-linear-gradient(45deg, #F0F0F0 25%, transparent 25%), -moz-linear-gradient(-45deg, #F0F0F0 25%, transparent 25%), -moz-linear-gradient(45deg, transparent 75%, #F0F0F0 75%), -moz-linear-gradient(-45deg, transparent 75%, #F0F0F0 75%);
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, #F0F0F0), color-stop(0.25, transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #F0F0F0), color-stop(0.25, transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.75, transparent), color-stop(0.75, #F0F0F0)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.75, transparent), color-stop(0.75, #F0F0F0));
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-background-size: 50px 51px;
/* override value for shitty webkit */
background-position: 0 0, 25px 0, 25px -25px, 0px 25px;
border: 1px solid #CCC;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) inset; }
.react-demo .react-demo-container {
max-width: 860px;
margin: 0 auto; }
.react-demo .react-demo-header h1 {
text-align: center;
margin: 8px 0;
font-size: 48px; }
.react-demo a:link,
.react-demo a:visited {
color: #b35600;
text-decoration: none; }
.react-demo a:link:hover,
.react-demo a:visited:hover {
text-decoration: underline; }
.react-demo .react-demo-src {
margin: 0; }
.react-demo .syntaxhighlighter {
padding: 8px;
border-radius: 4px;
border: 1px solid #EEE;
box-sizing: border-box; }
.react-demo .syntaxhighlighter table {
box-sizing: border-box; }
.react-demo .syntaxhighlighter .string, .react-demo .syntaxhighlighter .string a {
color: #FF9D43 !important; }
.react-demo .syntaxhighlighter .keyword {
color: #b35600 !important; }
/*# sourceMappingURL=react-demo.css.map */</style><style class="ap-style" type="text/css">.ap-icon{ display:inline-block;margin:0 2px; }
@media (min-width: 768px) { }
@media (min-width: 992px) { }
@media (min-width: 1200px) { }</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"/><style class="ap-style" type="text/css">.ap-spinner{ text-align:center;display:none; }
.ap-spinner.ap-spinner-enabled{ display:inline-flex;justify-content:center;align-items:center;width:100%;height:100%; }
.ap-spinner-icon{ display:inline-block;margin:0 4px;transition:opacity 100ms;opacity:1; }
.ap-spinner.ap-spinner-cover{ position:absolute;left:0;top:0;right:0;bottom:0;z-index:4;display:flex;justify-content:center;align-items:center;background:rgba(255,255,255,0.8);color:#CCC; }
@media (min-width: 768px) { }
@media (min-width: 992px) { }
@media (min-width: 1200px) { }</style></head><body class="ap-body"><div id="demo-style"></div><header class="react-demo-header"><div class="react-demo-container"><h1><a href="https://github.com/apeman-react-labo/apeman-react-list#readme">apeman-react-list</a></h1></div></header><main><div><div class="react-demo-playground"><div class="react-demo-container"><div id="demo-wrap"><div><div><style class="ap-style" type="text/css">.ap-list{ display:block;padding:0;margin:8px 0;list-style:none;position:relative;min-height:48px; }
.ap-list-spinner{ position:absolute;left:0;top:0;bottom:0;right:0;z-index:4;background-color:rgba(255,255,255,0.8); }
.ap-list-item{ display:block;border-bottom:1px solid #EEE;min-height:32px;padding:0 4px; }
.ap-list-item-tappable{ cursor:pointer; }
.ap-list-item-tappable:hover{ background-color:rgba(200,200,200,0.1); }
.ap-list-item-tappable:active{ opacity:0.8; }
.ap-list-item-inner{ display:flex;align-content:center;justify-content:flex-end; }
.ap-list-item-icon{ padding:0 4px; }
.ap-list-item-text{ display:inline-block;padding:0 8px;width:100%; }
.ap-list-item-aligner{ display:inline-block;opacity:0;width:1px;overflow:hidden;white-space:pre;color:transparent;vertical-align:middle; }
.ap-list-item-arrow-icon{ color:#AAA;font-size:24px; }
.ap-list-item-sumbnail-image{ margin-left:-4px; }
.ap-list-header{ display:block;font-size:9px;padding:2px 12px 1px;vertical-align:middle;position:relative;border-top:1px solid #F0F0F0;border-bottom:1px solid #F0F0F0;margin-bottom:-1px;color:#999;font-weight:100;background:rgba(0, 0, 0, 0.01); }
.ap-list-body{ display:block;margin:0 0 -1px;overflow:hidden; }
.ap-list-footer{ display:block;position:relative; }
.ap-list-footer-spinner{ position:absolute;left:0;top:0;bottom:0;right:0;z-index:4;background-color:rgba(255,255,255,0.8); }
.ap-list-more-button{ display:none;text-align:center;padding:16px 0;font-size:11px;color:#888;background:rgba(0, 0, 0, 0.01);border-top:1px solid #EEE; }
.ap-list-more-button:hover{ cursor:pointer;opacity:0.9; }
.ap-list-more-button:active{ cursor:pointer;opacity:0.66; }
.ap-list-more-button-enabled{ display:block; }
.ap-list-item-title-wrap{ display:inline-flex;justify-content:center;flex-direction:column; }
.ap-list-item-title{ display:block;line-height:initial; }
.ap-list-item-sub-title{ display:block;font-size:9px;line-height:initial;color:#AAA; }
.ap-list-empty .ap-list-body{ background:#F5F5F5; }
.ap-list-empty .ap-list-alt{ display:block; }
.ap-list-alt{ display:none;text-align:center;padding:32px 8px;color:#CCC; }
.ap-list-bar{ display:flex;margin:0;padding:0 8px;background:transparent;justify-content:space-between; }
.ap-list-bar .ap-form{ margin:0;display:inline-flex;align-items:center; }
.ap-list-bar-message{ line-height:36px;font-size:smaller;display:inline-block;padding:0 4px;color:#888; }</style><style class="ap-style" type="text/css">.ap-spinner{ text-align:center;display:none; }
.ap-spinner.ap-spinner-enabled{ display:inline-flex;justify-content:center;align-items:center;width:100%;height:100%; }
.ap-spinner-icon{ display:inline-block;margin:0 4px;transition:opacity 100ms;opacity:1; }
.ap-spinner.ap-spinner-cover{ position:absolute;left:0;top:0;right:0;bottom:0;z-index:4;display:flex;justify-content:center;align-items:center;background:rgba(255,255,255,0.8);color:#CCC; }
@media (min-width: 768px) { }
@media (min-width: 992px) { }
@media (min-width: 1200px) { }</style><style class="ap-style" type="text/css">.ap-form{ position:relative;margin:0; }
.ap-form-centered{ margin:8px auto;max-width:480px; }
.ap-form-spinner-cover{ position:absolute;left:0;top:0;right:0;bottom:0;text-align:center;box-sizing:border-box;padding:16px 32px;background:rgba(255,255,255,0.8);border:1px solid rgba(255, 255, 255, 0.9);z-index:8;color:#888; }
.ap-form .ap-form-errored{ border:1px solid #E11;background:#FFF0F0; }
.ap-form-error-message{ color:#E11;font-size:9px;font-style:italic;padding:4px 0 0;display:none; }
.ap-form-error-message-visible{ display:block; }
.ap-form-dummy-input{ visibility:hidden;z-index:-999;display:none;width:0;height:0;opacity:0; }</style><style class="ap-style" type="text/css">.ap-search{ display:block;padding:4px 8px 4px 22px;border:1px solid #AAA;width:100%;max-width:480px;border-radius:2px;box-sizing:border-box;outline-color:#b35600;box-shadow:1px 1px 1px rgba(0,0,0,.05) inset;transition:opacity 400ms;transition-delay:120ms; }
.ap-search-wrap{ position:relative;width:100%;margin:4px;vertical-align:middle;max-width:480px;display:block;transition:width 400ms, max-width 400ms; }
.ap-search-wrap-empty .ap-search-clear-button{ opacity:0;pointer-events:none; }
.ap-search-search-button{ position:absolute;top:0;left:-4px;display:inline-flex;align-items:center;padding:0 8px;bottom:0;cursor:pointer;color:#CCC;z-index:4;transition:color 400ms, transform 400ms;transform:scale(1, 1);transform-origin:50% 50%; }
.ap-search-search-button:active{ opacity:0.9; }
.ap-search-search-icon{ display:inline-block;vertical-align:middle; }
.ap-search-clear-button{ position:absolute;top:0;right:-4px;display:inline-flex;align-items:center;padding:0 8px;bottom:0;cursor:pointer;opacity:0.8;color:#CCC; }
.ap-search-clear-button:hover{ opacity:0.99; }
.ap-search-clear-button:active{ opacity:0.6; }
.ap-search-aligner{ display:inline-block;vertical-align:middle;width:1px;margin-right:-1px;height:100%;box-sizing:border-box;opacity:0; }
.ap-search-clear-icon{ display:inline-block;vertical-align:middle;font-size:11px;padding:2px; }
.ap-search-wrap-closed{ width:24px;max-width:24px; }
.ap-search-wrap-closed .ap-search-clear-icon{ display:none; }
.ap-search-wrap-closed .ap-search{ opacity:0;transition-delay:0; }
.ap-search-wrap-closed .ap-search-search-button{ color:#b35600;transform:scale(1.2, 1.2); }
.ap-search-wrap-closed .ap-search-search-button:hover{ color:#b35600;transform:scale(1.4, 1.4); }
.ap-search-wrap-righted{ margin:0 0 0 auto; }</style><span class="ap-search-wrap ap-search-wrap-empty ap-search-wrap-closed"><a class="ap-search-search-button"><span class="ap-search-aligner"> </span><i class="ap-icon ap-search-search-icon ion ion-search"></i></a><input type="text" class="ap-search" name="" placeholder="" value=""/><a class="ap-search-clear-button"><span class="ap-search-aligner"> </span><i class="ap-icon ap-search-clear-icon ion ion-close-round"></i></a></span><h3>Disclosure List</h3><ul class="ap-list"><div class="ap-spinner ap-list-spinner"><span class="ap-spinner-icon fa fa-spin fa-refresh" style="font-size:medium;"></span></div><li class="ap-list-item ap-list-item-tappable" style="height:48px;line-height:48px;"><div class="ap-list-item-inner"><span class="ap-list-item-aligner"> </span><div class="ap-list-item-text">Item 01</div><i class="ap-icon ap-list-item-icon ap-list-item-arrow-icon fa fa-angle-right ap-list-item-disclosure-icon" style="line-height:48px;"></i></div></li><li class="ap-list-item ap-list-item-tappable" style="height:48px;line-height:48px;"><div class="ap-list-item-inner"><span class="ap-list-item-aligner"> </span><div class="ap-list-item-text"><b>Item 02</b></div><i class="ap-icon ap-list-item-icon ap-list-item-arrow-icon fa fa-angle-right ap-list-item-disclosure-icon" style="line-height:48px;"></i></div></li><li class="ap-list-item ap-list-item-tappable" style="height:48px;line-height:48px;"><div class="ap-list-item-inner"><span class="ap-list-item-aligner"> </span><div class="ap-list-item-text ap-list-item-title-wrap"><span class="ap-list-item-title">Item 03</span><span class="ap-list-item-sub-title">Sub item 03</span></div><i class="ap-icon ap-list-item-icon ap-list-item-arrow-icon fa fa-angle-right ap-list-item-disclosure-icon" style="line-height:48px;"></i></div></li></ul></div><div><h3>Image List</h3></div><ul class="ap-list"><div class="ap-spinner ap-list-spinner"><span class="ap-spinner-icon fa fa-spin fa-refresh" style="font-size:medium;"></span></div><li class="ap-list-item" style="height:48px;line-height:48px;"><div class="ap-list-item-inner"><span class="ap-list-item-aligner"> </span><span class="ap-list-item-image ap-list-item-sumbnail-image"><div class="ap-image ap-image-loading" style="width:72px;height:48px;"><div class="ap-spinner ap-image-spinner" style="width:72px;height:48px;"><span class="ap-spinner-icon fa fa-spin fa-refresh" style="font-size:xx-large;"></span></div></div></span><div class="ap-list-item-text">Item 03</div></div></li><li class="ap-list-item" style="height:48px;line-height:48px;"><div class="ap-list-item-inner"><span class="ap-list-item-aligner"> </span><span class="ap-list-item-image ap-list-item-sumbnail-image"><div class="ap-image ap-image-loading" style="width:72px;height:48px;"><div class="ap-spinner ap-image-spinner" style="width:72px;height:48px;"><span class="ap-spinner-icon fa fa-spin fa-refresh" style="font-size:xx-large;"></span></div></div></span><div class="ap-list-item-text"><b>Item 04</b></div></div></li><li class="ap-list-item" style="height:48px;line-height:48px;"><div class="ap-list-item-inner"><span class="ap-list-item-aligner"> </span><span class="ap-list-item-image ap-list-item-sumbnail-image"><div class="ap-image ap-image-loading" style="width:72px;height:48px;"><div class="ap-spinner ap-image-spinner" style="width:72px;height:48px;"><span class="ap-spinner-icon fa fa-spin fa-refresh" style="font-size:xx-large;"></span></div></div></span><div class="ap-list-item-text ap-list-item-title-wrap"><span class="ap-list-item-title">Item 05</span><span class="ap-list-item-sub-title">Item 06</span></div></div></li></ul><div><h3>Paging List</h3></div><ul class="ap-list"><div class="ap-spinner ap-list-spinner"><span class="ap-spinner-icon fa fa-spin fa-refresh" style="font-size:medium;"></span></div><div class="ap-list-bar"><span class="ap-list-bar-message">This is list bar</span><form class="ap-form"><input type="text" name="ap_form_dummy" disabled="" placeholder="This is a dummy input to prevent submit on enter" class="ap-form-dummy-input"/><span class="ap-search-wrap ap-search-wrap-empty ap-search-wrap-closed ap-search-wrap-righted"><a class="ap-search-search-button"><span class="ap-search-aligner"> </span><i class="ap-icon ap-search-search-icon ion ion-search"></i></a><input type="text" class="ap-search" name="" placeholder="" value=""/><a class="ap-search-clear-button"><span class="ap-search-aligner"> </span><i class="ap-icon ap-search-clear-icon ion ion-close-round"></i></a></span></form></div><div class="ap-list-header">This is the header</div><div class="ap-list-body"><li class="ap-list-item ap-list-item-tappable" style="height:48px;line-height:48px;"><div class="ap-list-item-inner"><span class="ap-list-item-aligner"> </span><div class="ap-list-item-text ap-list-item-title-wrap"><span class="ap-list-item-title">Item 01</span><span class="ap-list-item-sub-title"></span></div><i class="ap-icon ap-list-item-icon ap-list-item-arrow-icon fa fa-angle-right ap-list-item-disclosure-icon" style="line-height:48px;"></i></div></li></div><div class="ap-list-footer"><div class="ap-spinner ap-list-footer-spinner"><span class="ap-spinner-icon fa fa-spin fa-refresh" style="font-size:medium;"></span></div><a class="ap-list-more-button ap-list-more-button-enabled">Load More</a></div></ul><div><h3>Empty List</h3></div><ul class="ap-list ap-list-empty" style="min-height:64px;"><div class="ap-spinner ap-list-spinner"><span class="ap-spinner-icon fa fa-spin fa-refresh" style="font-size:medium;"></span></div><div class="ap-list-bar"><span class="ap-list-bar-message">This is list bar</span><form class="ap-form"><input type="text" name="ap_form_dummy" disabled="" placeholder="This is a dummy input to prevent submit on enter" class="ap-form-dummy-input"/><span class="ap-search-wrap ap-search-wrap-empty ap-search-wrap-closed ap-search-wrap-righted"><a class="ap-search-search-button"><span class="ap-search-aligner"> </span><i class="ap-icon ap-search-search-icon ion ion-search"></i></a><input type="text" class="ap-search" name="" placeholder="" value=""/><a class="ap-search-clear-button"><span class="ap-search-aligner"> </span><i class="ap-icon ap-search-clear-icon ion ion-close-round"></i></a></span></form></div><div class="ap-list-alt">Oops! No data available.</div></ul></div></div></div></div></div><div class="react-demo-container"><div><pre class="react-demo-src"><div><style scoped="scoped">.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
background: none !important;
border: 0 !important;
bottom: auto !important;
float: none !important;
height: auto !important;
left: auto !important;
line-height: 1.1em !important;
margin: 0 !important;
outline: 0 !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
right: auto !important;
text-align: left !important;
top: auto !important;
vertical-align: baseline !important;
width: auto !important;
box-sizing: content-box !important;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 1em !important;
min-height: inherit !important;
min-height: auto !important;
}
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
}
.syntaxhighlighter.source {
overflow: hidden !important;
}
.syntaxhighlighter .bold {
font-weight: bold !important;
}
.syntaxhighlighter .italic {
font-style: italic !important;
}
.syntaxhighlighter .line {
white-space: pre !important;
}
.syntaxhighlighter table {
width: 100% !important;
}
.syntaxhighlighter table caption {
text-align: left !important;
padding: .5em 0 0.5em 1em !important;
}
.syntaxhighlighter table td.code {
width: 100% !important;
}
.syntaxhighlighter table td.code .container {
position: relative !important;
}
.syntaxhighlighter table td.code .container textarea {
box-sizing: border-box !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
border: none !important;
background: white !important;
padding-left: 1em !important;
overflow: hidden !important;
white-space: pre !important;
}
.syntaxhighlighter table td.gutter .line {
text-align: right !important;
padding: 0 0.5em 0 1em !important;
}
.syntaxhighlighter table td.code .line {
padding: 0 1em !important;
}
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
padding-left: 0em !important;
}
.syntaxhighlighter.show {
display: block !important;
}
.syntaxhighlighter.collapsed table {
display: none !important;
}
.syntaxhighlighter.collapsed .toolbar {
padding: 0.1em 0.8em 0em 0.8em !important;
font-size: 1em !important;
position: static !important;
width: auto !important;
height: auto !important;
}
.syntaxhighlighter.collapsed .toolbar span {
display: inline !important;
margin-right: 1em !important;
}
.syntaxhighlighter.collapsed .toolbar span a {
padding: 0 !important;
display: none !important;
}
.syntaxhighlighter.collapsed .toolbar span a.expandSource {
display: inline !important;
}
.syntaxhighlighter .toolbar {
position: absolute !important;
right: 1px !important;
top: 1px !important;
width: 11px !important;
height: 11px !important;
font-size: 10px !important;
z-index: 10 !important;
}
.syntaxhighlighter .toolbar span.title {
display: inline !important;
}
.syntaxhighlighter .toolbar a {
display: block !important;
text-align: center !important;
text-decoration: none !important;
padding-top: 1px !important;
}
.syntaxhighlighter .toolbar a.expandSource {
display: none !important;
}
.syntaxhighlighter.ie {
font-size: .9em !important;
padding: 1px 0 1px 0 !important;
}
.syntaxhighlighter.ie .toolbar {
line-height: 8px !important;
}
.syntaxhighlighter.ie .toolbar a {
padding-top: 0px !important;
}
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
background: none !important;
}
.syntaxhighlighter.printing .line .number {
color: #bbbbbb !important;
}
.syntaxhighlighter.printing .line .content {
color: black !important;
}
.syntaxhighlighter.printing .toolbar {
display: none !important;
}
.syntaxhighlighter.printing a {
text-decoration: none !important;
}
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
color: black !important;
}
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
color: #008200 !important;
}
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
color: blue !important;
}
.syntaxhighlighter.printing .keyword {
color: #006699 !important;
font-weight: bold !important;
}
.syntaxhighlighter.printing .preprocessor {
color: gray !important;
}
.syntaxhighlighter.printing .variable {
color: #aa7700 !important;
}
.syntaxhighlighter.printing .value {
color: #009900 !important;
}
.syntaxhighlighter.printing .functions {
color: #ff1493 !important;
}
.syntaxhighlighter.printing .constants {
color: #0066cc !important;
}
.syntaxhighlighter.printing .script {
font-weight: bold !important;
}
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
color: gray !important;
}
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
color: #ff1493 !important;
}
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
color: red !important;
}
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
color: black !important;
}
.syntaxhighlighter {
background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
background-color: white !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
color: black !important;
}
.syntaxhighlighter table caption {
color: black !important;
}
.syntaxhighlighter .gutter {
color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {
border-right: 3px solid #6ce26c !important;
}
.syntaxhighlighter .gutter .line.highlighted {
background-color: #6ce26c !important;
color: white !important;
}
.syntaxhighlighter.printing .line .content {
border: none !important;
}
.syntaxhighlighter.collapsed {
overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
color: blue !important;
background: white !important;
border: 1px solid #6ce26c !important;
}
.syntaxhighlighter.collapsed .toolbar a {
color: blue !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
color: red !important;
}
.syntaxhighlighter .toolbar {
color: white !important;
background: #6ce26c !important;
border: none !important;
}
.syntaxhighlighter .toolbar a {
color: white !important;
}
.syntaxhighlighter .toolbar a:hover {
color: black !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
color: black !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #008200 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
color: blue !important;
}
.syntaxhighlighter .keyword {
color: #006699 !important;
}
.syntaxhighlighter .preprocessor {
color: gray !important;
}
.syntaxhighlighter .variable {
color: #aa7700 !important;
}
.syntaxhighlighter .value {
color: #009900 !important;
}
.syntaxhighlighter .functions {
color: #ff1493 !important;
}
.syntaxhighlighter .constants {
color: #0066cc !important;
}
.syntaxhighlighter .script {
font-weight: bold !important;
color: #006699 !important;
background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
color: gray !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
color: #ff1493 !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
color: red !important;
}
.syntaxhighlighter .keyword {
font-weight: bold !important;
}
</style><div id="highlighter_258866" class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="string">'use strict'</code></div><div class="line number2 index1 alt1"> </div><div class="line number3 index2 alt2"><code class="plain">import React, {PropTypes as types} from </code><code class="string">'react'</code></div><div class="line number4 index3 alt1"> </div><div class="line number5 index4 alt2"><code class="plain">import ApList from </code><code class="string">'../../lib/ap_list'</code></div><div class="line number6 index5 alt1"><code class="plain">import ApListStyle from </code><code class="string">'../../lib/ap_list_style'</code></div><div class="line number7 index6 alt2"><code class="plain">import ApListBody from </code><code class="string">'../../lib/ap_list_body'</code></div><div class="line number8 index7 alt1"><code class="plain">import ApListHeader from </code><code class="string">'../../lib/ap_list_header'</code></div><div class="line number9 index8 alt2"><code class="plain">import ApListFooter from </code><code class="string">'../../lib/ap_list_footer'</code></div><div class="line number10 index9 alt1"><code class="plain">import ApListItem from </code><code class="string">'../../lib/ap_list_item'</code></div><div class="line number11 index10 alt2"><code class="plain">import ApListItemIcon from </code><code class="string">'../../lib/ap_list_item_icon'</code></div><div class="line number12 index11 alt1"><code class="plain">import ApListItemText from </code><code class="string">'../../lib/ap_list_item_text'</code></div><div class="line number13 index12 alt2"><code class="plain">import ApListItemArrowIcon from </code><code class="string">'../../lib/ap_list_item_arrow_icon'</code></div><div class="line number14 index13 alt1"><code class="plain">import ApListMoreButton from </code><code class="string">'../../lib/ap_list_more_button'</code></div><div class="line number15 index14 alt2"><code class="plain">import ApListBar from </code><code class="string">'../../lib/ap_list_bar'</code></div><div class="line number16 index15 alt1"><code class="plain">import ApListBarMessage from </code><code class="string">'../../lib/ap_list_bar_message'</code></div><div class="line number17 index16 alt2"><code class="plain">import {ApSpinnerStyle} from </code><code class="string">'apeman-react-spinner'</code></div><div class="line number18 index17 alt1"><code class="plain">import {ApForm, ApFormStyle} from </code><code class="string">'apeman-react-form'</code></div><div class="line number19 index18 alt2"><code class="plain">import {ApSearch, ApSearchStyle} from </code><code class="string">'apeman-react-search'</code></div><div class="line number20 index19 alt1"> </div><div class="line number21 index20 alt2"><code class="plain">const Demo = React.createClass({</code></div><div class="line number22 index21 alt1"><code class="undefined spaces"> </code><code class="plain">getInitialState () {</code></div><div class="line number23 index22 alt2"><code class="undefined spaces"> </code><code class="keyword">return</code> <code class="plain">{</code></div><div class="line number24 index23 alt1"><code class="undefined spaces"> </code><code class="plain">spinning: </code><code class="keyword">false</code></div><div class="line number25 index24 alt2"><code class="undefined spaces"> </code><code class="plain">}</code></div><div class="line number26 index25 alt1"><code class="undefined spaces"> </code><code class="plain">},</code></div><div class="line number27 index26 alt2"><code class="undefined spaces"> </code><code class="plain">render () {</code></div><div class="line number28 index27 alt1"><code class="undefined spaces"> </code><code class="plain">const s = </code><code class="keyword">this</code><code class="plain">,</code></div><div class="line number29 index28 alt2"><code class="undefined spaces"> </code><code class="plain">{ state } = s</code></div><div class="line number30 index29 alt1"><code class="undefined spaces"> </code><code class="keyword">return</code> <code class="plain">(</code></div><div class="line number31 index30 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number32 index31 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number33 index32 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListStyle</code> <code class="color1">highlightColor</code><code class="plain">=</code><code class="string">'#b35600'</code><code class="plain">/></code></div><div class="line number34 index33 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApSpinnerStyle</code> <code class="color1">highlightColor</code><code class="plain">=</code><code class="string">'#b35600'</code> <code class="plain">/></code></div><div class="line number35 index34 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApFormStyle</code> <code class="color1">highlightColor</code><code class="plain">=</code><code class="string">'#b35600'</code> <code class="plain">/></code></div><div class="line number36 index35 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApSearchStyle</code> <code class="color1">highlightColor</code><code class="plain">=</code><code class="string">'#b35600'</code> <code class="plain">/></code></div><div class="line number37 index36 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApSearch</code> <code class="color1">highlightColor</code><code class="plain">=</code><code class="string">'#b35600'</code> <code class="plain">/></code></div><div class="line number38 index37 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">h3</code><code class="plain">>Disclosure List</</code><code class="keyword">h3</code><code class="plain">></code></div><div class="line number39 index38 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApList</code><code class="plain">></code></div><div class="line number40 index39 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListItem</code> <code class="plain">onTap={ (e) => { s.handleTap(e, </code><code class="string">'disclosure 01'</code><code class="plain">) } }</code></div><div class="line number41 index40 alt2"><code class="undefined spaces"> </code><code class="plain">data={ {id: 1} }</code></div><div class="line number42 index41 alt1"><code class="undefined spaces"> </code><code class="plain">disclosure={ </code><code class="keyword">true</code> <code class="plain">}></code></div><div class="line number43 index42 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListItemText</code><code class="plain">>Item 01</</code><code class="keyword">ApListItemText</code><code class="plain">></code></div><div class="line number44 index43 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ApListItem</code><code class="plain">></code></div><div class="line number45 index44 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListItem</code> <code class="plain">onTap={ (e) => { s.handleTap(e, </code><code class="string">'disclosure 02'</code><code class="plain">) } }</code></div><div class="line number46 index45 alt1"><code class="undefined spaces"> </code><code class="plain">data={ {id:2} }</code></div><div class="line number47 index46 alt2"><code class="undefined spaces"> </code><code class="plain">disclosure={ </code><code class="keyword">true</code> <code class="plain">}></code></div><div class="line number48 index47 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListItemText</code><code class="plain">></code></div><div class="line number49 index48 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">b</code><code class="plain">>Item 02</</code><code class="keyword">b</code><code class="plain">></code></div><div class="line number50 index49 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ApListItemText</code><code class="plain">></code></div><div class="line number51 index50 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ApListItem</code><code class="plain">></code></div><div class="line number52 index51 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListItem</code> <code class="plain">onTap={ (e) => { s.handleTap(e, </code><code class="string">'disclosure 03'</code><code class="plain">) } }</code></div><div class="line number53 index52 alt2"><code class="undefined spaces"> </code><code class="plain">data={ { id: 3 } }</code></div><div class="line number54 index53 alt1"><code class="undefined spaces"> </code><code class="plain">disclosure={ </code><code class="keyword">true</code> <code class="plain">}</code></div><div class="line number55 index54 alt2"><code class="undefined spaces"> </code><code class="plain">title=</code><code class="string">'Item 03'</code></div><div class="line number56 index55 alt1"><code class="undefined spaces"> </code><code class="plain">subTitle=</code><code class="string">'Sub item 03'</code></div><div class="line number57 index56 alt2"><code class="undefined spaces"> </code><code class="plain">/></code></div><div class="line number58 index57 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ApList</code><code class="plain">></code></div><div class="line number59 index58 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number60 index59 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number61 index60 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">h3</code><code class="plain">>Image List</</code><code class="keyword">h3</code><code class="plain">></code></div><div class="line number62 index61 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number63 index62 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApList</code> <code class="plain">spinning={ state.spinning }></code></div><div class="line number64 index63 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListItem</code> <code class="color1">imgSrc</code><code class="plain">=</code><code class="string">'./images/04.jpg'</code><code class="plain">></code></div><div class="line number65 index64 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListItemText</code><code class="plain">>Item 03</</code><code class="keyword">ApListItemText</code><code class="plain">></code></div><div class="line number66 index65 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ApListItem</code><code class="plain">></code></div><div class="line number67 index66 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListItem</code> <code class="color1">imgSrc</code><code class="plain">=</code><code class="string">'./images/05.jpg'</code><code class="plain">></code></div><div class="line number68 index67 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListItemText</code><code class="plain">></code></div><div class="line number69 index68 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">b</code><code class="plain">>Item 04</</code><code class="keyword">b</code><code class="plain">></code></div><div class="line number70 index69 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ApListItemText</code><code class="plain">></code></div><div class="line number71 index70 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ApListItem</code><code class="plain">></code></div><div class="line number72 index71 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListItem</code> <code class="color1">imgSrc</code><code class="plain">=</code><code class="string">'./images/05.jpg'</code></div><div class="line number73 index72 alt2"><code class="undefined spaces"> </code><code class="color1">title</code><code class="plain">=</code><code class="string">'Item 05'</code></div><div class="line number74 index73 alt1"><code class="undefined spaces"> </code><code class="color1">subTitle</code><code class="plain">=</code><code class="string">'Item 06'</code><code class="plain">/></code></div><div class="line number75 index74 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ApList</code><code class="plain">></code></div><div class="line number76 index75 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number77 index76 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">h3</code><code class="plain">>Paging List</</code><code class="keyword">h3</code><code class="plain">></code></div><div class="line number78 index77 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number79 index78 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApList</code><code class="plain">></code></div><div class="line number80 index79 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListBar</code><code class="plain">></code></div><div class="line number81 index80 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListBarMessage</code><code class="plain">>This is list bar</</code><code class="keyword">ApListBarMessage</code><code class="plain">></code></div><div class="line number82 index81 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApForm</code><code class="plain">></code></div><div class="line number83 index82 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApSearch</code> <code class="plain">righted={ </code><code class="keyword">true</code> <code class="plain">}/></code></div><div class="line number84 index83 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ApForm</code><code class="plain">></code></div><div class="line number85 index84 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ApListBar</code><code class="plain">></code></div><div class="line number86 index85 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListHeader</code><code class="plain">></code></div><div class="line number87 index86 alt2"><code class="undefined spaces"> </code><code class="plain">This is the header</code></div><div class="line number88 index87 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ApListHeader</code><code class="plain">></code></div><div class="line number89 index88 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListBody</code><code class="plain">></code></div><div class="line number90 index89 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListItem</code> <code class="plain">onTap={ (e) => { s.handleTap(e, </code><code class="string">'page list'</code><code class="plain">) } }</code></div><div class="line number91 index90 alt2"><code class="undefined spaces"> </code><code class="plain">disclosure={ </code><code class="keyword">true</code> <code class="plain">}</code></div><div class="line number92 index91 alt1"><code class="undefined spaces"> </code><code class="plain">title=</code><code class="string">'Item 01'</code><code class="plain">/></code></div><div class="line number93 index92 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ApListBody</code><code class="plain">></code></div><div class="line number94 index93 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListFooter</code> <code class="plain">spinning={state.spinning}></code></div><div class="line number95 index94 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApListMoreButton</code> <code class="plain">enabled={ </code><code class="keyword">true</code> <code class="plain">}</code></div><div class="line number96 index95 alt1"><code class="undefined spaces"> </code><code class="plain">onTap={ (e) => { s.handleTap(e, </code><code class="string">'paging list'</code><code class="plain">) } }/></code></div><div class="line number97 index96 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ApListFooter</code><code class="plain">></code></div><div class="line number98 index97 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">ApList</code><code class="plain">></code></div><div class="line number99 index98 alt2"> </div><div class="line number100 index99 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number101 index100 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">h3</code><code class="plain">>Empty List</</code><code class="keyword">h3</code><code class="plain">></code></div><div class="line number102 index101 alt1"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number103 index102 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">ApList</code> <code class="plain">minHeight={64}</code></div><div class="line number104 index103 alt1"><code class="undefined spaces"> </code><code class="plain">empty={ </code><code class="keyword">true</code> <code class="plain">}</code></div><div class="line number105 index104 alt2"><code class="undefined spaces"> </code><code class="color1">alt</code><code class="plain">=</code><code class="string">'Oops! No data available.'</code><code class="plain">></code></div><div class="line number106 index105 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyw