@lrnwebcomponents/word-count
Version:
Automated conversion of word-count/
51 lines (49 loc) • 1.79 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>word-count demo</title>
<script src="../../../node_modules/@lrnwebcomponents/deduping-fix/deduping-fix.js"></script>
<script type="module">
import "@polymer/iron-demo-helpers/demo-pages-shared-styles.js";
import "@polymer/iron-demo-helpers/demo-snippet.js";
import "@polymer/marked-element/marked-element.js";
import "../word-count.js";
</script>
</head>
<body lang="es">
<div class="vertical-section-container centered">
<h3>Basic word-count demo</h3>
<demo-snippet>
<template>
<word-count>
<marked-element>
<script type="text/markdown">
So put in some words and get a count
</script>
</marked-element>
</word-count>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Basic word-count demo with some basic CSS variables</h3>
<style>
#another {
--word-count-color: orange;
--word-count-color-hover: green;
--word-count-font-size: 20px;
--word-count-font-size-hover: 28px;
}
</style>
<word-count id="another" words-prefix="Do not translate me">
<p>So put in some words and get a count.
So put in some words <a href="http://google.com">and get</a> a count.
So put in some words and get a count.
So put in some words and get a count.So put in some words and get a count.So put in some words and get a
count.</p>
</word-count>
</div>
</body>
</html>