patek/patek-logo-custom-element
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added fallback value usage.

Browse Source
This commit is contained in:
Greenscreener 2020-05-12 11:43:31 +02:00
parent 73b5844991
commit 2661c6da1c
2 changed files with 31 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -10,10 +10,13 @@ Include the patek-logo.js file into your HTML file.
## Usage
```html
<patek-logo title="<your title here>" subtitle="<your subtitle here>"></patek-logo>
<patek-logo title="<your title here>" subtitle="<your subtitle here>">Fallback value here</patek-logo>
```
If no `title` or `subtitle` attribute is set, it defaults to `"Pátek"` and `""` respectively.
The fallback value is used only in browsers without support for custom elements
or with JavaScript disabled.
The logo **will** obey all CSS rules.
## Examples
You can find examples in [examples.html](examples.html).

54
examples.html
View File

@ -5,36 +5,36 @@
<title>PátekLogo Examples</title>
</head>
<body>
<p><patek-logo></patek-logo></p>
<p><patek-logo title="Custom" subtitle="Text" style="font-size: 50px;"></patek-logo></p>
<p><patek-logo style="font-size: 100px;"></patek-logo></p>
<p><patek-logo style="font-size: 75px;"></patek-logo></p>
<p><patek-logo style="font-size: 60px;"></patek-logo></p>
<p><patek-logo style="font-size: 50px;"></patek-logo></p>
<p><patek-logo style="font-size: 40px;"></patek-logo></p>
<p><patek-logo style="font-size: 32px;"></patek-logo></p>
<p><patek-logo style="font-size: 24px;"></patek-logo></p>
<p><patek-logo style="font-size: 16px;"></patek-logo></p>
<p><patek-logo style="font-size: 11px;"></patek-logo></p>
<p><patek-logo style="font-size: 8px;"></patek-logo></p>
<p><patek-logo style="font-size: 5px;"></patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: #0b2a37;"></patek-logo></p>
<p><patek-logo>Pátek</patek-logo></p>
<p><patek-logo title="Custom" subtitle="Text" style="font-size: 50px;">Custom Text</patek-logo></p>
<p><patek-logo style="font-size: 100px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 75px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 60px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 40px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 32px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 24px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 16px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 11px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 8px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 5px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: #0b2a37;">Pátek</patek-logo></p>
<br>
<p><patek-logo style="font-size: 50px; color: white; background-color: red;"></patek-logo><patek-logo style="font-size: 50px; color: red;"></patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: orangered;"></patek-logo><patek-logo style="font-size: 50px; color: orangered;"></patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: yellow;"></patek-logo><patek-logo style="font-size: 50px; color: yellow;"></patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: lime;"></patek-logo><patek-logo style="font-size: 50px; color: lime;"></patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: green;"></patek-logo><patek-logo style="font-size: 50px; color: green;"></patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: darkcyan;"></patek-logo><patek-logo style="font-size: 50px; color: darkcyan;"></patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: blue;"></patek-logo><patek-logo style="font-size: 50px; color: blue;"></patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: blueviolet;"></patek-logo><patek-logo style="font-size: 50px; color: blueviolet;"></patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: purple;"></patek-logo><patek-logo style="font-size: 50px; color: purple;"></patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: red;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: red;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: orangered;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: orangered;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: yellow;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: yellow;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: lime;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: lime;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: green;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: green;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: darkcyan;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: darkcyan;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: blue;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: blue;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: blueviolet;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: blueviolet;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: purple;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: purple;">Pátek</patek-logo></p>
<br>
<p><patek-logo title="Print" subtitle="Pátek" style="font-size: 50px; color: black; background-color: #ff7300;"></patek-logo></p>
<p><patek-logo title="Talks" subtitle="Pátek" style="font-size: 50px; color: red; background-color: white;"></patek-logo></p>
<p><patek-logo title="Space" subtitle="Pátek" style="font-size: 50px; color: white; background-color: #24007f;"></patek-logo></p>
<p><patek-logo title="Print" subtitle="Pátek" style="font-size: 50px; color: black; background-color: #ff7300;">PátekPrint</patek-logo></p>
<p><patek-logo title="Talks" subtitle="Pátek" style="font-size: 50px; color: red; background-color: white;">PátekTalks</patek-logo></p>
<p><patek-logo title="Space" subtitle="Pátek" style="font-size: 50px; color: white; background-color: #24007f;">PátekSpace</patek-logo></p>
<br>
<div style="font-size: 20px;"> Vae, germanus ausus! Fermiums observare, tanquam domesticus luna. Heu. Animalis regius advena est. Pol, a bene axona. Pes, itineris tramitem, et lixa. Hydras sunt orexiss de flavum demolitione. Cur homo <patek-logo title="cadunt?"></patek-logo> Absolutios mori, tanquam regius gallus. Zirbus, imber, et orexis. Ventuss sunt apolloniatess de emeritis lapsus. Apolloniates neuter onus est. Aususs tolerare! Cur visus trabem? Vae. <a href="https://example.com"> <patek-logo title="Example!"></patek-logo></a> Exemplar, cacula, et scutum. Byssus trabems, tanquam velox danista. Calceuss assimilant!</div>
<div style="font-size: 20px;"> Vae, germanus ausus! Fermiums observare, tanquam domesticus luna. Heu. Animalis regius advena est. Pol, a bene axona. Pes, itineris tramitem, et lixa. Hydras sunt orexiss de flavum demolitione. Cur homo <patek-logo title="cadunt?">cadunt?</patek-logo> Absolutios mori, tanquam regius gallus. Zirbus, imber, et orexis. Ventuss sunt apolloniatess de emeritis lapsus. Apolloniates neuter onus est. Aususs tolerare! Cur visus trabem? Vae. <a href="https://example.com"> <patek-logo title="Example!">Example!</patek-logo></a> Exemplar, cacula, et scutum. Byssus trabems, tanquam velox danista. Calceuss assimilant!</div>
<script src="patek-logo.js"></script>
</body>
</html>