A Polymer Element showing a paginated-list of single-result elements.
headerExtractions = [{
name: 'Built By',
data: [{
confidence: 'high',
highlight: true,
icon: 'star',
link: 'https://nextcentury.com',
text: 'Next Century'
}]
}];
details = [{
name: 'Description',
text: 'DigElements is a library of common Polymer Elements built by Next Century Corporation.'
}];
detailExtractions = [{
name: 'My Favorite DigElements',
data: [{
confidence: 'high',
highlight: true,
icon: 'link',
link: 'https://github.com/DigElements/single-result',
text: 'Single Result'
}]
}];
images = [{
link: 'https://github.com/DigElements',
source: 'dig.png'
}];
results = [{
flag: 'Important',
highlightedText: 'The <em>DigElements</em> library.',
icon: 'favorite',
link: 'https://github.com/DigElements',
rank: '0.99',
type: 'Webpage',
headerExtractions: headerExtractions,
details: details,
detailExtractions: detailExtractions,
images: images
}];
<result-list
query-results="[[results]]"
total-results="1"
loading="[[loading]]"
header="{{header}}">
</result-list>
<result-list>
provides the following custom properties and mixins for styling:
Custom property | Description | Default |
---|---|---|
--result-list-loading-spinner |
Mixin applied to the loading-spinner | none |
--result-list-max-height |
Maximum height of the list | 1500px |
--result-list-scroll-threshold |
Mixin applied to the iron-scroll-threshold | none |
--result-list-show-more-button |
Mixin applied to the show more button | none |
Dependencies are installed using Bower:
npm install -g bower
bower install
Tests are run using web-component-tester:
npm install -g web-component-tester
wct
Demonstration and documentation are viewed using polyserve:
npm install -g polyserve
polyserve