McPringle/java-aktuell-code
1
0
Fork 0
Code Activity

docs: Dateien zum Polymer-Artikel in Ausgabe 17/04

Browse source
This commit is contained in:
Marcus Fihlon 2025-05-25 10:08:16 +02:00
parent d0d5280021
commit 3e6091a025
Signed by: McPringle
GPG key ID: C6B7F469EE363E1F
6 changed files with 140 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

42
1704-polymer/bookworm_components/bookworm-detail/bookworm-detail.html Normal file
View file

@ -0,0 +1,42 @@
<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="import" href="../../bower_components/paper-card/paper-card.html" />
<dom-module id="bookworm-detail">
<template>
<style>
paper-card {
margin: 1em;
padding: 0.5em;
width: 20em;
--paper-card-header-image-text : {
color: white;
font-weight: bold;
text-shadow: 1px 1px 1px black,
1px -1px 1px black,
-1px 1px 1px black,
-1px -1px 1px black;
}
}
#subtitle {
font-size: 1.2em;
font-weight: bold;
}
#details {
font-style: italic;
}
</style>
<paper-card heading="{{bookdata.volumeInfo.title}}" image="{{bookdata.volumeInfo.imageLinks.thumbnail}}">
<div id="subtitle">{{bookdata.volumeInfo.subtitle}}</div>
<div id="details">{{bookdata.volumeInfo.pageCount}} Pages ({{bookdata.volumeInfo.publishedDate}})</div>
</paper-card>
</template>
<script>
Polymer({
is: "bookworm-detail",
properties: {
bookdata: {
type: Object
}
}
});
</script>
</dom-module>

32
1704-polymer/bookworm_components/bookworm-search/bookworm-search.html Normal file
View file

@ -0,0 +1,32 @@
<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html" />
<link rel="import" href="../../bower_components/paper-input/paper-input.html" />
<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
<link rel="import" href="../../bower_components/paper-styles/typography.html" />
<link rel="import" href="../bookworm-detail/bookworm-detail.html" />
<dom-module id="bookworm-search">
<template>
<style>
* {
@apply(--paper-font-common-base);
}
paper-material {
padding: 1em;
}
</style>
<paper-material>
<paper-input label="enter a search term" value="{{searchterm}}"></paper-input>
<iron-ajax auto debounce-duration="500"
url="https://www.googleapis.com/books/v1/volumes?q={{searchterm}}"
handle-as="json" last-response="{{searchresult}}"></iron-ajax>
<template is="dom-repeat" items="{{searchresult.items}}">
<bookworm-detail bookdata="{{item}}"></bookworm-detail>
</template>
</paper-material>
</template>
<script>
Polymer({
is: "bookworm-search"
});
</script>
</dom-module>