Shortcode amp list (new)

It turns out that in AMP there are some standard action codes or shortcodes to make it easier to give certain commands to an element such as redirect, print, show, hide, toggle, scroll to, and focus on input.
With these commands we do not need an AMP plugin to perform its function. The commands are as below.


Will be redirect to choosen url
<button on="tap:AMP.navigateTo(url='')"></button>


will be print current active pages
<button on="tap:AMP.print">Print this page</button>

Show, Hide, Toggle Visibility

show, hide text and visibility toggle function
<button on="">Show text</button>
<button on="tap:normal-element.hide">Hide text</button>
<button on="tap:normal-element.toggleVisibility">Toggle Visibility now</button>

<div id="normal-element" hidden>
  I was initially hidden. Succedeed

Scroll To

Scrolling to top, bottom, center, and slowly scrolling pages.
  <button on="tap:normal-element2.scrollTo">ScrollTo</button>
  <button on="tap:normal-element2.scrollTo('position' = 'bottom')">ScrollTo Bottom page</button>
  <button on="tap:normal-element2.scrollTo('position' = 'center')">ScrollTo Center page</button>
  <button on="tap:normal-element2.scrollTo('duration' = 5000)">ScrollTo Slowly inside page</button>

<div id="normal-element2">
  Scroll to other section pages.


focus to class="focus". This function like hyperlink page <a href=".focus">focus</a>
<button on="tap:input-element.focus">Focus to</button>

Combine The Commands

combine two of command and more. Like this combined of Scrolling and focus commands function
<button on="tap:normal-element2.scrollTo('position' = 'center'), input-element.focus">ScrollTo and Focus functions</button>

Please use as needed.
       Source: Github.

So article about Shortcode amp list (new), may be useful to increase knowledge about AMP Functions

0 Response to "Shortcode amp list (new)"

Post a comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Artikel Terkait