Google AMP - Tombol
Tombol adalah fitur lain dari AMP. Perhatikan bahwa tidak ada perubahan untuk tombol di AMP dan digunakan seperti standar tag tombol HTML. Satu-satunya perbedaan dengan tombol di halaman AMP adalah cara kerja peristiwa di dalamnya.
Dalam bab ini, kita akan melihat beberapa contoh untuk menunjukkan cara kerja tombol dan cara menggunakannya dengan komponen AMP.
Kode Contoh untuk Lightbox
Contoh berikut menunjukkan kepada kita bagaimana menggunakan tombol untuk menampilkan / menyembunyikan amp-lightbox seperti yang ditunjukkan di bawah ini -
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Lightbox</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content ="width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;-moz-animation:none;-ms-an
imation:none;animation:none
}
</style>
</noscript>
<script async custom-element = "amp-lightbox"
src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>
<style amp-custom>
amp-img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
button{
background-color:
#ACAD5C; color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
.lightbox {
background: rgba(211,211,211,0.8);
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Lightbox</h3>
<button on = "tap:my-lightbox">
Show LightBox
</button>
<amp-lightbox id = "my-lightbox" layout = "nodisplay">
<div class = "lightbox" on = "tap:my-lightbox.close" tabindex = "0">
<amp-img alt = "Beautiful Flower"
src = "images/flower.jpg"
width = "246"
height = "205">
</amp-img>
</div>
</amp-lightbox>
</body>
</html>Keluaran
Sekarang, Anda dapat mengklik di mana saja di layar untuk menutup lightbox.
Dalam contoh di atas, kami telah menggunakan tombol menggunakan kode seperti yang ditunjukkan di bawah ini -
<button on = "tap:my-lightbox">
Show LightBox
</button>
Next, we have added action on the button using on attribute as shown:
on = "tap:my-lightbox"Tindakan akan terjadi saat Anda mengetuk tombol. Perhatikan bahwa id lightbox diberikan padanya. Saat pengguna mengetuk tombol, lightbox akan terbuka. Demikian pula, Anda dapat menggunakan tombol dengan on action dengan komponen apa pun untuk berinteraksi dengannya.