Web components - komponent icon

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 542 razy

Komponent obl-icon umożliwia łatwe osadzanie ikon na stronie. Informacje o ikonie są zapisane na BE.

Wstawianie w kodzie HTML po name:

<obl-icon name="home_sm" size="50"></obl-icon>

Wstawianie w kodzie po icon-id:

<obl-icon icon-id="1" size="50"></obl-icon>

Dynamiczne tworzenie ikonek:

<script> setTimeout(() => { for (let i = 1; i < 117; i++) { const icon = document.createElement('obl-icon'); icon.iconId = i; document.body.querySelector('.icons').append(icon); } }, 1000); </script>

Po jednokrotnym załadowaniu następne wywołanie ikonki nie uruchomi pobierania ścieżki do ikony:

<script> setTimeout(() => { for (let i = 1; i < 117; i++) { const icon = document.createElement('obl-icon'); icon.iconId = i; icon.size = 50; document.body.querySelector('.bigger-icons').append(icon); } }, 2000); </script>