Web components - button wrapper

1. Helion
1. Zdarzyło się dzisiaj
  
  Polska
  1999 – Jan Paweł II beatyfikował w Warszawie 108 męczenników.
  Świat
  1798 – Rewolucja irlandzka: zwycięstwo wojsk brytyjskich w bitwie pod Ballynahinch.
  Źródło: Wikipedia
1. Piosenka dnia
  
  Nine Inch Nails - "The Becoming"
  I beat my machine It's a part of me It's inside of me I'm stuck in this dream It's changing me I am becoming The me that you know, he had some second thoughts He's covered with scabs He is broken and sore The me that you know He doesn't come around much That part of me... Isn't here anymore All pain disappears It's the nature of... Of my circuitry Drowns out all I hear No escape from this My new consciousness The me that you know He used to have feelings But the blood has stopped pumping and he is left to decay The me that you know is now made up of wires And even when i'm right with you i'm so far away I can try to get away But I've strapped myself in I can try to scratch away The sound in my ears I can see it killing away All of my bad parts I don't want to listen But it's all too clear Hiding Backwards inside of me I feel... so unafraid Annie, hold a little tighter I might just slip away It won't give up, it wants me dead Goddamn this noise inside my head It won't give up, it wants me dead Goddamn this noise inside my head It won't give up, it wants me dead Goddamn this noise inside my head It won't give up, it wants me dead Goddamn this noise inside my head

Autor podstrony: Krzysztof Zajączkowski

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

Ten z pozoru prosty komponent umożliwia rozszerzenie możliwości standardowego komponentu przycisku o funkcje, które bardzo łatwo jest uruchomić. Podstawowa wersja wrapera wygląda w kodzie tak tak:

<obl-button-wrapper><button>Przycisk</button></obl-button-wrapper>

Zaś w praktyce tak:

Bardzo łatwo można dodać ikonkę do przycisku:

<obl-button-wrapper icon="copy"><button>Przycisk</button></obl-button-wrapper>

Po iconId:

<obl-button-wrapper icon-id="copy"><button>Przycisk</button></obl-button-wrapper>

Możliwe jest również ustawienie rozmiaru ikonki:

<obl-button-wrapper icon="copy" size="40"><button>Przycisk</button></obl-button-wrapper>

Możliwe jest również ustawienie spinnera:

<obl-button-wrapper icon="copy" loading="true"><button>Przycisk</button></obl-button-wrapper>

Można także dodać małą animację z komunikatem na kliknięcie z zablokowaniem chwilowym przycisku, coby użytkownik za dużo nie naklikał:

<obl-button-wrapper icon="copy" action-message="Skopiowane"><button>Przycisk</button></obl-button-wrapper>