Shortcode amp list new

programming html , amp

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.

AMP.navigateTo()

Will be redirect to choosen url

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

AMP.print()

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="tap:normal-element.show">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
</div>

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.
</div>

Focus

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