Beberapa Shortcode Amp Untuk Mempermudah Menciptakan Beberapa Elemen

Ternyata pada AMP ada beberapa instruksi standar action atau shortcode untuk mempermudah menunjukkan perintah tertentu pada suatu elemen menyerupai redirect, print, show, hide, toggle, scroll to, dan focus pada input.

Dengan perintah-perintah tersebut maka kita tidak memerlukan plugin AMP untuk menjalankan fungsinya.

Perintah-perintah tersebut di antaranya menyerupai di bawah ini.

AMP.navigateTo()

 <button on="tap:AMP.navigateTo(url='http://google.com')">google.com</button>

AMP.print()

 <button on="tap:AMP.print">Print</button>

Show, Hide, Toggle Visibility

 <button on="tap:normal-element.show">Show</button>
 <button on="tap:normal-element.hide">Hide</button>
 <button on="tap:normal-element.toggleVisibility">Toggle Visibility</button>
 
 <div id="normal-element" hidden>
   I was initially hidden.
 </div>

Scroll To

   <button on="tap:normal-element2.scrollTo">ScrollTo</button>
   <button on="tap:normal-element2.scrollTo('position' = 'bottom')">ScrollTo Bottom</button>
   <button on="tap:normal-element2.scrollTo('position' = 'center')">ScrollTo Center</button>
   <button on="tap:normal-element2.scrollTo('duration' = 5000)">ScrollTo Slowly</button>
 
 <div id="normal-element2">
   You have to scroll to see me.
 </div>

Focus

 <button on="tap:input-element.focus">Focus</button>

Menggabungkan Perintah

 <button on="tap:normal-element2.scrollTo('position' = 'center'), input-element.focus">ScrollTo and Focus</button>

Silahkan gunakan sesuai kebutuhan.

Sumber: https://github.com/ampproject/amphtml/blob/master/examples/standard-actions.amp.html
Sumber https://www.kompiajaib.com/

Share this post