Beberapa Shortcode AMP Untuk Mempermudah Membuat Beberapa Elemen

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/28/2017

Ternyata pada AMP ada beberapa kode standar action atau shortcode untuk mempermudah memberikan perintah tertentu pada suatu elemen seperti 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 seperti di bawah ini.

AMP.navigateTo()

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

google.com

AMP.print()

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

Print This Page

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>

Show me!
Hide me!
Toggle Visibility

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>

ScrollTo
ScrollTo Bottom
ScrollTo Center
ScrollTo Slowly

Focus

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

Focus

Menggabungkan Perintah

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

ScrollTo and Focus











































Silahkan gunakan sesuai kebutuhan.

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