CINXE.COM

<!doctype html><html amp lang="ar" i-amphtml-binding i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="preload" href="/static/fonts/poppins-v5-latin-700.woff2" as="font" crossorigin><link rel="preload" href="/static/fonts/noto-sans-v7-latin-700.woff2" as="font" crossorigin><meta name="theme-color" content="#005af0"><meta name="description" content="Allows elements to mutate in response to user actions or data changes via data binding and simple JS-like expressions."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="Allows elements to mutate in response to user actions or data changes via data binding and simple JS-like expressions."><meta name="twitter:title" content="المستندات: amp-bind"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/docs-component-600x314.png"><meta property="og:title" content="المستندات: <amp-bind>"><meta property="og:url" content="https://amp.dev/ar/documentation/components/amp-bind/"><meta property="og:image" content="https://amp.dev/static/img/sharing/docs-component-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites,email,ads"><meta name="page-locale" content="ar"><meta http-equiv="origin-trial" content="AviuuiVhVdQ3GpVtxSpyMT+XsL/qGGYmyiyLvYSKPL3rRDLipe/ard5x+DXVlrATtolwX75VtpSKc9IEzLDd4AkAAABmeyJvcmlnaW4iOiJodHRwczovL2FtcC5kZXY6NDQzIiwiZmVhdHVyZSI6IkV4cGVyaW1lbnRhbEF1dG9wbGF5RHluYW1pY0RlbGVnYXRpb24iLCJleHBpcnkiOjE1NzA1Nzg0NDF9"><style amp-runtime i-amphtml-version="012502032353000">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y pinch-zoom;touch-action:pan-y pinch-zoom}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#000!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom],amp-script[sandboxed]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden} /*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill),body noscript>*{display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}body noscript>*{position:absolute!important;width:100%;height:100%;z-index:2}body noscript{display:inline!important}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block;line-height:normal}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}amp-img[i-amphtml-ssr]:not(.i-amphtml-element)>[placeholder]{z-index:auto}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-layout-size-defined>[overflow]{position:absolute}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}amp-story{visibility:hidden!important}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}@media (min-width:1px){:where(amp-accordion>section)>:first-child{margin:0;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}:where(amp-accordion>section)>:last-child{margin:0}}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important} /*# sourceURL=/css/ampshared.css*/</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" custom-element="amp-analytics" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async src="https://cdn.ampproject.org/v0/amp-animation-0.1.mjs" custom-element="amp-animation" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" crossorigin="anonymous" custom-element="amp-animation"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" custom-element="amp-bind" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" crossorigin="anonymous" custom-element="amp-bind"></script><script async src="https://cdn.ampproject.org/v0/amp-consent-0.1.mjs" custom-element="amp-consent" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-consent-0.1.js" crossorigin="anonymous" custom-element="amp-consent"></script><script async src="https://cdn.ampproject.org/v0/amp-geo-0.1.mjs" custom-element="amp-geo" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-geo-0.1.js" crossorigin="anonymous" custom-element="amp-geo"></script><script custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" crossorigin="anonymous" custom-element="amp-iframe"></script><script async src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.mjs" custom-element="amp-install-serviceworker" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js" crossorigin="anonymous" custom-element="amp-install-serviceworker"></script><script async src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.mjs" custom-element="amp-position-observer" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js" crossorigin="anonymous" custom-element="amp-position-observer"></script><script async src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.mjs" custom-element="amp-sidebar" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" crossorigin="anonymous" custom-element="amp-sidebar"></script><script async src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.mjs" custom-element="amp-user-notification" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js" crossorigin="anonymous" custom-element="amp-user-notification"></script><script custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js" crossorigin="anonymous" custom-element="amp-youtube"></script><link rel="shortcut icon" href="/static/img/favicon.png"><link rel="canonical" href="https://amp.dev/ar/documentation/components/amp-bind/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/documentation/components/amp-bind/"><link rel="alternate" hreflang="fr" href="https://amp.dev/fr/documentation/components/amp-bind/"><link rel="alternate" hreflang="es" href="https://amp.dev/es/documentation/components/amp-bind/"><link rel="alternate" hreflang="it" href="https://amp.dev/it/documentation/components/amp-bind/"><link rel="alternate" hreflang="id" href="https://amp.dev/id/documentation/components/amp-bind/"><link rel="alternate" hreflang="ja" href="https://amp.dev/ja/documentation/components/amp-bind/"><link rel="alternate" hreflang="ko" href="https://amp.dev/ko/documentation/components/amp-bind/"><link rel="alternate" hreflang="pt_BR" href="https://amp.dev/pt_br/documentation/components/amp-bind/"><link rel="alternate" hreflang="tr" href="https://amp.dev/tr/documentation/components/amp-bind/"><link rel="alternate" hreflang="zh_CN" href="https://amp.dev/zh_cn/documentation/components/amp-bind/"><title>المستندات: <amp-bind> - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/ar/documentation/components/amp-bind/ ","name":"amp.dev","headline":"المستندات: \u0026lt;amp-bind\u0026gt;","description":"Allows elements to mutate in response to user actions or data changes via data binding and simple JS-like expressions.","mainEntityOfPage":{"@type":"WebPage","@id":"https://amp.dev"},"publisher":{"@type":"Organization","name":"AMP Project","logo":{"url":"https://amp.dev/static/img/icons/icon-512x512.png","width":512,"height":512,"@type":"ImageObject"}},"image":{"@type":"ImageObject","url":"https://amp.dev/static/img/sharing/docs-component-600x314.png","width":600,"height":314}}</script><style amp-custom>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Light Italic"),local("Segoe UI Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Italic"),local("Segoe UI Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium"),local("Segoe UI Semibold"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium Italic"),local("Segoe UI Semibold Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Segoe UI Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Segoe UI Bold Italic"),local("Tahoma Bold")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:optional;src:local("Noto Sans"),local("NotoSans"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff) format("woff")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:700;font-display:optional;src:local("Noto Sans Bold"),local("NotoSans-Bold"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff) format("woff")}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:optional;src:local("Poppins Bold"),local("Poppins-Bold"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff) format("woff")}@font-face{font-family:Fira Mono;font-style:normal;font-weight:400;font-display:optional;src:local("Fira Mono"),local("FiraMono"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2) format("woff2"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff) format("woff")}*{box-sizing:border-box}body,html{padding:0;margin:0;min-width:240px;color:#48525c;background-color:#fff;font-size:16px;font-family:Noto Sans,system;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}@media(max-width:240px){body,html{font-size:14px}}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button{width:3em;height:3em;border-radius:50%;box-shadow:0 10px 15px 0 rgba(0,0,0,.4);transition:.4s;background-color:#fff;position:relative;box-sizing:border-box;margin:1em;border-style:none;background-position:50% 50%;background-repeat:no-repeat;z-index:10;pointer-events:all}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button:hover{cursor:pointer;box-shadow:0 20px 30px 0 rgba(0,0,0,.2);background-color:#fff}:target:before{content:"";display:block;visibility:hidden;height:120px;margin-top:-120px}@media(min-width:1024px){h1:target:before{height:75px;margin-top:-75px}h2:target:before{height:81px;margin-top:-81px}h3:target:before{height:87px;margin-top:-87px}h4:target:before{height:90px;margin-top:-90px}h5:target:before{height:93px;margin-top:-93px}h6:target:before{height:97px;margin-top:-97px}}h1,h2,h3,h4,h5{margin-top:1.5rem;margin-bottom:.75em;font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}h1{font-size:2.2rem;margin-top:3rem}section.-t h1:first-of-type{margin-top:0}@media(min-width:768px){section.-t h1:first-of-type{margin-bottom:2rem}}h2{font-size:1.8rem;margin-top:2rem}h3{font-size:1.414rem;margin-top:1.8rem}h4{font-size:1.2rem}h5{font-size:1rem}.-t .intro,.ap--section .intro{font-size:1rem;padding:0}.-t .intro *,.ap--section .intro *{font-size:inherit}.-t p,.ap--section p{line-height:1.6rem;font-weight:400;color:#48525c;display:block;margin-top:1.1em;margin-bottom:0;font-size:1rem}.-t p small,.ap--section p small{font-size:.875rem}.-t code,.ap--section code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em}.-t code,.-t p,.ap--section code,.ap--section p{overflow-wrap:break-word}.-t a,.ap--section a{position:relative;z-index:10}.-t a code,.ap--section a code{color:#005af0;z-index:-1}.-t pre,.ap--section pre{font-family:Fira Mono,monospace;font-weight:500;font-size:1rem;white-space:pre-wrap}.-t>ol,.-t>ul,.ap--section>ol,.ap--section>ul{line-height:1.6rem;font-weight:400;color:#48525c;display:block;padding-left:2em;margin:1.5em 0}.-t>ol ol,.-t>ol ul,.-t>ul ol,.-t>ul ul,.ap--section>ol ol,.ap--section>ol ul,.ap--section>ul ol,.ap--section>ul ul{padding-left:2em;margin:0}.-t>ol li,.-t>ul li,.ap--section>ol li,.ap--section>ul li{padding-left:.5em}.-t>ol li p,.-t>ul li p,.ap--section>ol li p,.ap--section>ul li p{font-size:1em}.-t figure figcaption,.ap--section figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;margin-top:.3em}.-t hr,.ap--section hr{height:1px;margin:.75em 0;background-color:#ebebf0;border:none}.-n{display:flex;align-items:center;text-decoration:none;padding:0 0 1.5em;margin:0}.-r{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;color:#005af0;line-height:1.3;transition:transform .3s ease}.-i{fill:#005af0;padding:.438em 0;margin-bottom:auto;margin-right:.625em;box-sizing:initial;transition:transform .3s ease}.-n:hover .-i,.-n:hover .-r{transform:translateX(10px)}.-s{border-bottom:1px solid #ebebf0}.-s .-r{font-size:1rem;font-family:Poppins,system;font-weight:700;color:#000;padding-left:10px}.-s .-i{width:1.375em;height:1.375em;fill:#fff;background-color:#005af0;overflow:hidden;padding:.563em}.-s .-i,.-s:hover .-i{box-shadow:0 10px 20px 0 rgba(0,0,0,.25)}.-s:hover .-i svg{animation:duepduep .3s ease}a{font-weight:700;text-decoration:none;color:#005af0}a code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}.ap-a-ico{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:1em;height:1em}.ap-a-btn{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1em;color:#fff;display:inline-block;max-width:100%;width:auto;height:auto;padding:.75em 1.75em;margin:0;text-decoration:none;text-align:center;border-radius:3px;background-color:#005af0;border:none;cursor:pointer;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease}.ap-a-btn:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,0,0,.15)}@media(min-width:768px){.ap-a-btn{padding:1em 2em}}.-o{right:20px;left:auto;bottom:20px;width:calc(100% - 40px);padding:15px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;background-color:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,.15);border-radius:8px}@media(min-width:768px){.-o{max-width:500px}}.-u{position:absolute;right:15px;top:15px;-webkit-appearance:none;background-color:transparent;border:none;padding:0}.-u svg{width:10px;height:10px}.-o button{cursor:pointer}.ap--footer{position:relative;z-index:15;padding:3em 0 2em;line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem;color:#fff;background:linear-gradient(45deg,#48525c,#20202a)}.-a{width:100%;max-width:1440px;padding:0 20px;margin:0 auto}.-f{padding-bottom:4em}@media(min-width:768px){.-f{display:flex;align-items:center}}.-l{display:flex;flex-direction:column;margin-left:auto}@media(min-width:1024px){.-l{flex-direction:row}}.-c{margin:3em 2em 1em 0;color:#fff}@media(min-width:768px){.-c{margin:auto 2em auto 1em}}.-h{display:flex;list-style:none;padding:0;margin:0}.-p{flex:1 0 auto}@media(min-width:768px){.-p{margin:16px}}.-d{width:2.5em;height:2.5em;fill:#fff}@media(max-width:240px){.-d{font-size:14px}}@media(min-width:768px){.-v{display:grid;grid-gap:30px;grid-template-columns:repeat(12,1fr)}}.-m{flex:1 1 100%}.-m:nth-child(odd){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(odd){grid-column:span 6}}.-m:nth-child(2n+2){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(2n+2){grid-column:span 6}}.-g{color:#fff}.-y{list-style:none;padding:0}@media(min-width:768px){.-y+.-g{margin-top:2.5em}}.-b{position:relative}.-w{padding-left:35px;font-size:.8125rem;color:#fff}.-x{position:absolute;left:10px;top:8px;width:12px;height:12px;fill:#fff}.-k{display:flex;flex-direction:column;padding-top:4em}@media(min-width:768px){.-k{flex-direction:row;align-items:flex-end}}.-_{width:50%;max-width:200px;margin-bottom:40px;margin-right:auto}@media(min-width:768px){.-_{margin-bottom:0}}.-j{list-style:none;padding:0;margin:0}.-q{display:inline-block;margin-right:1em}.-z{font-size:.8125rem;font-weight:400;color:#fff}.-te{display:block;font-size:.875rem;margin-top:2em;color:#e2e5e6}.-te a{color:#fafafc}.ap-m-format-toggle{position:-webkit-sticky;position:sticky;top:0;margin:0 10px;padding:10px 0 0;width:100%;max-width:85%;z-index:12}@media(min-width:768px){.ap-m-format-toggle{padding:0;margin:0 15px 0 0;max-width:100%}}.ap-m-format-toggle-selected{border:0}.amp-mode-touch .ap-m-format-toggle-selected{position:relative}.ap-m-format-toggle-selected:focus:after,.ap-m-format-toggle-selected:hover:after{position:absolute;top:0;left:0;content:"";display:block;height:300%;width:100%}.ap-m-format-toggle-link,.ap-m-format-toggle-selected{z-index:3;display:flex;align-items:center;width:100%;margin:0 0 2px;padding:5px 8px;overflow:hidden;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Poppins,system;font-weight:700;font-size:12px;text-align:left;border-radius:4px;color:#000;background:#ebebf0;transition:opacity .2s ease;box-shadow:0 5px 15px -5px rgba(0,0,0,.25)}.ap-m-format-toggle-link .ap-a-ico,.ap-m-format-toggle-selected .ap-a-ico{width:14px;height:14px;margin-right:8px;fill:#000}.ap-m-format-toggle-link{color:#000;background:#ebebf0}.ap-m-format-toggle-link .ap-a-ico{fill:#000}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected,.ap-m-format-toggle-link-websites:hover{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-websites:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected,.ap-m-format-toggle-link-stories:hover{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);color:#20202a}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-stories:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected,.ap-m-format-toggle-link-ads:hover{background:linear-gradient(225deg,#eb49e1,#5500d7 75%);color:#fff}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-ads:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected,.ap-m-format-toggle-link-email:hover{background:linear-gradient(225deg,#09a600,#e1eb64 75%);color:#20202a}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-email:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-angle{margin-right:0;margin-left:auto}.ap-m-format-toggle-formats{position:absolute;width:100%;z-index:2;pointer-events:none;opacity:0;transform:translateY(-20px);transition:all .2s ease;transition-delay:.05s}.ap-m-format-toggle-formats:focus-within,.ap-m-format-toggle-formats:hover,.ap-m-format-toggle-selected:focus+.ap-m-format-toggle-formats,.ap-m-format-toggle-selected:hover+.ap-m-format-toggle-formats{pointer-events:auto;opacity:1;transform:translateY(0)}body{top:0;left:0;background-repeat:no-repeat;background-size:100% auto;background-position:100% 0;background-attachment:fixed}body.ap--websites{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' y1='855.23' x2='606.28' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d5e6f2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--ads{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ddd3eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--stories{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ebdfd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d7ebd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}.ap--ampsidebar{width:100%;max-width:90vw;background:#fafafc}.ap--ampsidebar-toolbar{top:86px;height:100vh;max-height:calc(100vh - 86px)}@media(min-width:768px){.ap--ampsidebar-toolbar{position:-webkit-sticky;position:sticky;overflow:auto}}.ap--ampsidebar-toolbar>ul{-webkit-overflow-scrolling:touch;margin:0;padding:0}@media(min-width:768px){.ap--ampsidebar-toolbar>ul{overflow:auto;max-height:100%}}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar{width:6px;height:6px}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-corner{background-color:transparent}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}.ap-o-sidebar-component{max-width:100%}@media(min-width:768px){.ap-o-sidebar-component .ap-o-sidebar{width:auto;min-height:400px;padding-bottom:0;margin-right:0;margin-left:-10px;background:0 0;box-shadow:none}}.ap-o-sidebar-component .nav{margin:15px 0 0;padding-bottom:15px}.ap-o-sidebar-component .nav-list{max-width:300px;list-style:none;padding:0;margin:0}.ap-o-sidebar-component .nav-list.level-1{margin:0 15px}.ap-o-sidebar-component .nav-list .nav-list{padding-bottom:10px;margin-bottom:10px}.ap-o-sidebar-component .nav-item{position:relative;margin:0;padding:0}.ap-o-sidebar-component .nav-item.level-1{pointer-events:none}.ap-o-sidebar-component .nav-item.level-1 .nav-link{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1.8rem;padding:0;margin:0;line-height:1;word-break:break-all;pointer-events:auto;color:#e2e5e6}.ap-o-sidebar-component .nav-item.level-1 .nav-link:only-child:not(a){margin:-20px;font-size:0;pointer-events:none;z-index:-1}.ap-o-sidebar-component .nav-item.level-1>.nav-link{padding-top:10px;pointer-events:none;z-index:1;transition:color .15s ease}.ap-o-sidebar-component .nav-item.level-1.active>.nav-link,.ap-o-sidebar-component .nav-item.level-1:hover>.nav-link{color:#91979d}.ap-o-sidebar-component .nav-item.level-2 .nav-link{text-transform:unset;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Noto Sans,system;font-size:.875rem;line-height:1.4em;padding:3px 25px 3px 0;margin:0}.ap-o-sidebar-component .nav-item.active>.nav-link{font-weight:700;color:#005af0}.ap-o-sidebar-component .nav-item:hover>.nav-link{color:#005af0}.ap-o-sidebar-component .nav-link{position:relative;display:block;padding:0;margin:0;color:rgba(0,0,0,.75);border:none;background-color:transparent}.ap-a-img{position:relative}.image-preview-1 .ap-a-img{overflow:hidden;border-radius:50%}.image-preview-2 .ap-a-img{margin-right:-30px;filter:drop-shadow(0 30px 30px -15px rgba(0,0,0,.25))}@media(min-width:768px){.image-preview-2 .ap-a-img{margin-right:0}}.-so{display:block;width:100%;height:1px;margin-bottom:.813em;background-color:#fafafc}@media(min-width:768px){.-so{display:none}.-su{display:block}}.-li{padding:84px 15px 0}@media(min-width:768px){.-li{padding-left:0;padding-right:0}}.-ls{margin-bottom:.75em;font-size:1.8rem;margin-top:2rem;padding:20px 0}.-ls,.-lo{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}.-lo{margin-top:1.5rem;font-size:1.2rem;padding-left:20px;margin-bottom:0}.-lu{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}.-la{display:block;background-color:#ebebf0;height:1px;margin:30px 20px 30px 0}.ap-m-clip{position:relative}.ap-m-clip-expand{position:absolute;z-index:10;bottom:0;left:0;display:flex;justify-content:center;align-items:flex-end;height:65px;width:100%;border:none;background:#fff;background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff 40%);cursor:pointer}.ap-m-clip-expand-icon{max-height:21px;max-width:21px;margin-top:35px;fill:#48525c;transition:transform .3s}.ap-m-clip-expand:hover .ap-m-clip-expand-icon{fill:#005af0;transform:translate3d(0,-2px,0)}.ap-a-copy-script{display:flex;align-items:center;flex-basis:100%}.ap-a-copy-script pre{overflow-x:scroll;flex:1 0;margin:6px 8px 6px 0;padding:4px 6px;white-space:wrap;background:#e2e5e6;font-size:12.6px}.ap-a-copy-script pre::-webkit-scrollbar{width:6px;height:6px}.ap-a-copy-script pre::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap-a-copy-script pre::-webkit-scrollbar-corner{background-color:transparent}.ap-a-copy-script pre::-webkit-scrollbar{height:4px}.ap-a-copy-script pre::-webkit-scrollbar-thumb{border-radius:0}.ap-o-component-intro-row{padding:15px;background-color:#fff;border:1px solid #e2e5e6}.ap-o-component-intro-row+.ap-o-component-intro-row{margin-top:10px}@media(min-width:768px){.ap-o-component-intro-row-inline{display:flex;align-items:baseline;flex-wrap:wrap}}.ap-o-component-intro-headline{font-size:16px;margin:0 0 10px}.ap-o-component-intro-row-inline .ap-o-component-intro-headline{white-space:nowrap;margin-right:10px}.ap-o-component-intro-headline .active{color:#00f}.ap-o-component-intro-filter{margin-left:auto}.ap-o-component-intro-filter *{font-size:.875rem}.ap-o-component-intro-text{margin:5px 0}.ap-o-component-intro-list{max-height:142px;overflow:hidden}@media(min-width:768px){.ap-o-component-intro-list{display:flex;flex-wrap:wrap}}.ap-o-component-intro-list-item{display:block;margin-bottom:6px;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:768px){.ap-o-component-intro-list-item{width:50%;padding-right:12px}}.expanded .ap-o-component-intro-list{max-height:none}.ap-m-tip{display:flex;padding:15px;margin-bottom:20px;border-radius:4px;background-color:#ebebf0;border:1px solid #e2e5e6}@media(min-width:768px){.ap-m-tip{padding:30px}}.ap-m-tip code{white-space:normal}.ap-m-tip-icon{width:36px;height:36px;margin-top:5px;margin-right:14px}@media(min-width:768px){.ap-m-tip-icon{margin-right:26px}}.ap-m-tip-content{font-size:.875rem;min-width:0}.ap-m-tip-content h4{font-size:1rem;margin:0 0 .75em}.ap-m-tip-content ol,.ap-m-tip-content p,.ap-m-tip-content ul{font-size:.875rem}.ap-m-tip-content ol:first-child,.ap-m-tip-content p:first-child,.ap-m-tip-content ul:first-child{margin-top:0}.ap-breadcrumbs,.-ue{display:flex;align-items:center;font-family:Poppins,system;font-weight:700;font-size:.8125rem}.ap-breadcrumbs-angle,.-ut{width:10px;height:10px;margin:0 6px;transform:rotate(-90deg)}.ap--toc{width:100%}@media(min-width:1024px){.ap--toc{background:0 0;box-shadow:none;padding-right:10px}}.ap-o-toc{--spacing-top:90px;position:relative;z-index:1;top:0;right:0;width:calc(100% - 20px);overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07);border-radius:8px;padding:15px;margin-bottom:10px}.ap-o-toc::-webkit-scrollbar{width:6px;height:6px}.ap-o-toc::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap-o-toc::-webkit-scrollbar-corner{background-color:transparent}.ap-o-toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}@media(min-width:768px){.ap-o-toc{width:100%}}@media(min-width:1024px){.ap-o-toc{position:-webkit-sticky;position:sticky;z-index:1;padding:0 10px 0 0;margin:0;height:auto;top:var(--spacing-top);right:auto;padding-bottom:var(--spacing-top);background:0 0;box-shadow:none;overflow-y:scroll;max-height:calc(100vh - var(--spacing-top))}}.ap-o-toc-hl{font-family:Poppins,system;font-weight:700;cursor:pointer;width:100%;margin-bottom:0}@media(min-width:1024px){.ap-o-toc-hl{margin-bottom:10px}}.ap-o-toc-toggle{display:flex;align-items:center;justify-content:space-between;outline:0}@media(min-width:1024px){.ap-o-toc-toggle{position:-webkit-sticky;position:sticky;top:0;background:#fafafc}}.ap-o-toc ul{list-style:none;margin:0;padding:0;transition:.4s}.ap-o-toc ul>li a{display:block;padding-bottom:20px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;font-weight:700;line-height:1rem}.ap-o-toc ul>li>ul{padding-left:10px;text-transform:none}.ap-o-toc ul>li>ul li a{font-weight:400}@media(max-width:1023px){.ap-o-toc .-un:not(:checked)+ul{display:none;transition:.2s}.ap-o-toc .-un:checked+ul{margin-top:15px}}.ap-o-toc .nav-icon svg{width:15px;height:15px}@media(min-width:1024px){.ap-o-toc .nav-icon{display:none}}.ap-o-toc .nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.ap-o-toc.contentmenuopen .nav-icon .ap-a-ico{transform:rotate(0)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur{animation:moveSidebarToggleBackwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur .label-icon svg{transform:rotate(180deg)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur .label-title{transform:translateX(0) scaleX(1);transform-origin:left center}#sidebar-left[open]~.ap--main .-ur{left:0;margin-left:0;animation:moveSidebarToggleForwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[open]~.ap--main .-ur .label-icon svg{transform:rotate(0)}#sidebar-left[open]~.ap--main .-ur .label-title{transform:translateX(-150vw) scaleX(0);transform-origin:left center}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur,#sidebar-left[open]~.ap--main .-ur{z-index:9999999999}.-ui{position:absolute;top:50px}.-us{position:fixed;top:-99px}.-uo{position:fixed;z-index:15;font-size:12px;font-family:Poppins,system;font-weight:700;color:#fff;fill:#fff;cursor:pointer;display:flex;align-items:center}.-uo .label-icon{border-radius:4px;background:#005af0;height:35px;width:32px;padding-left:2px;display:flex;justify-content:center;align-items:center;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);z-index:1}.-uo .label-icon svg{height:14px;width:14px;transition:transform .233s cubic-bezier(0,0,.21,1)}.-uo .label-title{left:32px;display:flex;align-items:center;height:35px;margin-left:-5px;padding:5px 10px 5px 5px;white-space:nowrap;border-radius:0 4px 4px 0;background:#005af0;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);transform:scaleX(0);transform-origin:left;transition:transform .233s cubic-bezier(0,0,.21,1)}.-uu{position:fixed;top:-99px}.-ur{margin-top:-52px;margin-left:-25px}@media(min-width:768px){.-ur{display:none}}.-ur .label-icon svg{transform:rotate(180deg)}.-ua{display:none}.-uf{position:fixed;top:-99px}.-ul{display:none}@media(min-width:768px)and (max-width:1440px){.-ua{display:inline-block}.-ul{position:-webkit-sticky;position:sticky;top:138px;display:inline-flex;transform:translate(-40px,-52px)}.-uf:checked~.-uc{grid-column:1/2}.-uf:checked~.-uc nav{display:none}.-uf:checked~.-uc svg{transform:rotate(180deg)}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-uf:checked~.ap--toc{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-uf:checked~.ap--toc~.-t{padding-left:80px;padding-right:80px;grid-column:2/20}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-uf:checked~.ap--toc~.-t{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-uf:checked~.-t,.-uf:checked~.ap--help{grid-column-start:2;padding-left:80px;padding-right:80px}.-uf:checked~.-t .-ul,.-uf:checked~.ap--help .-ul{margin-left:-88px}.-uf:checked~.-t .-ul .label-icon svg,.-uf:checked~.ap--help .-ul .label-icon svg{transform:rotate(180deg)}}.-lf{display:none}.-ll.amp-active~.-lf{height:42px;max-width:2020px;margin:0 auto;color:#fff;background-color:#20202a;font-size:.875rem;z-index:100;position:absolute;width:100%;left:0;right:0}@media(min-width:768px){.-ll.amp-active~.-lf{display:block}}.-ll.amp-active~.-lf .-lc{position:relative;display:flex;align-items:center;width:100%;height:100%;max-width:1440px;padding:0 30px;margin:0 auto}@media(min-width:1024px){.-ll.amp-active~.-lf .-lc{padding:0 15px}}.-ll.amp-active~.-lf .-lc:after{position:absolute;content:"";top:42px;left:50px;width:0;height:0;border-color:#20202a transparent transparent;border-style:solid;border-width:8px 10px 0}.-ll.amp-active~.-lf .-lh{flex:1 0;padding-right:10px}.-ll.amp-active~.-lf .-lp{height:20px;width:20px;background-color:transparent;border:0;cursor:pointer;padding:3px}.-ll.amp-active~.-lf .-lp svg{fill:#fff;width:100%;height:100%}.ap-o-burger-menu{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;padding:110px 20px 80px;z-index:16;background-color:#fff}@media(max-width:240px){.ap-o-burger-menu{padding:37px 20px 0}.has-banner~.ap-o-burger-menu{padding:calc(37px + 31px) 0 0 20px}}.ap-o-burger-menu-label{position:fixed;z-index:1001;top:12px;right:20px;cursor:pointer}.ap-o-burger-menu-label.mainmenuopen{z-index:1004}.has-banner+.ap-o-burger-menu-label{top:calc(12px + 31px)}.amp-hidden+.has-banner+.ap-o-burger-menu-label,amp-user-notification[hidden]+.has-banner+.ap-o-burger-menu-label{top:12px}@media(min-width:768px){.ap-o-burger-menu-label{right:30px}}@media(min-width:1024px){.ap-o-burger-menu-label{display:none}}.ap-o-burger-menu-icon{width:30px;height:30px}@media(min-width:1024px){.ap-o-burger-menu{display:none}}.ap-o-burger-menu.mainmenuopen{display:block;z-index:1003}.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px)}.has-banner+.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px - 31px)}.ap-o-burger-menu.mainmenuopen~.ap--footer{display:none}.-th{list-style:none;display:flex;flex-direction:column;height:100%;margin:1rem 0 0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:240px){.-th{padding:1rem 0}}.-th .-th{margin-top:1rem}.-th .-th .-tp:last-child{margin-bottom:0}.-tp{margin-bottom:1rem;position:relative}.-tp:last-child{margin-top:auto}.-tp ul{display:none}.-td{position:absolute;left:0;top:0;width:100%;height:36px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer;-webkit-appearance:none}.-td:focus{outline:5px auto -webkit-focus-ring-color}.-td:checked~ul{display:block}.-td:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.-td+.nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.-tp .ap-a-ico{height:.6em;margin-bottom:.3em;margin-left:.3em;width:.6em}.-tv{position:relative;margin-right:20px;padding-bottom:10px;display:none}@media(max-width:240px){.-tv{margin-right:0}}@media(min-width:1024px){.-tv{margin-right:0;padding-right:30px;display:block}}.-tm{display:flex;align-items:center;font-size:11px;border:none;background:0 0}.-tm:hover{color:#005af0}.-tg{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:0;-webkit-appearance:none}@media(min-width:1024px){.-tg{width:calc(100% - 30px)}}.-ty{width:10px;height:10px;margin-left:5px}.-tb{list-style:none;display:none;position:absolute;right:15%;margin:0;padding:2px 8px;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(max-width:240px){.-tb{overflow:auto;max-height:calc(100vh - 55px - 31px)}}.-tb:hover,.-tg:checked~.-tb,.-tg:hover~.-tb,.-tv .-tw{display:block}.-tb:focus-within{display:block}.mainmenuopen .-tv{display:block}.-tw{font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#000}@media(min-width:1024px){.-tw{font-size:1rem}}.-tx{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}@media(min-width:1024px){.-tx{font-size:.875rem}}.-tx.active{text-decoration:underline}.-tw:hover{color:#005af0}.-tw.active{font-weight:700;color:#005af0}.ap--header{width:100%;max-width:2020px;margin:0 auto;position:-webkit-sticky;position:sticky;top:0;z-index:1001;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}.ap--header.mainmenuopen{z-index:1004}.ap--header.mainmenuopen~.ap--main{max-width:100vw;overflow-x:hidden}@media(min-width:1024px){.ap--header{top:0}.ap--header.has-banner{top:-31px}}.ap-o-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;max-width:1460px;padding:10px 0 0 20px;margin:0 auto}@media(min-width:1024px){.ap-o-header{display:flex;padding-left:30px}}.ap-o-header-home{position:-webkit-sticky;position:sticky;top:10px;display:flex;align-items:center;margin-right:auto;padding-bottom:10px;overflow:hidden}.ap-o-header-home-logo{height:30px;margin-right:6px;width:30px}.ap-o-header-home-sub-title,.ap-o-header-home-title{margin-left:4px;font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#005af0}@media(min-width:1024px){.ap-o-header-home-sub-title,.ap-o-header-home-title{font-size:1.125rem}}.ap-o-header-home-sub-title{color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ap-o-header-main{display:none;flex:1 1 auto;padding:0 30px}@media(min-width:1024px){.ap-o-header-main{display:flex}}.ap-o-header-main-item{position:relative;display:flex;align-items:center;margin:0 18px -5px}.ap-o-header-main-link{display:flex;align-items:center;padding:0 0 14px;border:0;background:0 0}.ap-o-header-main-link-icon{font-size:8px;margin-left:5px;transform:rotate(0);transition:transform .2s ease}.ap-o-header-flyout:hover,.ap-o-header-main-link:focus~.ap-o-header-flyout,.ap-o-header-main-link:hover~.ap-o-header-flyout{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout:focus-within{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);position:absolute;top:95%;left:0;margin:0;padding:0 0 10px;pointer-events:none;opacity:0;list-style:none;background:#fff;border-radius:0 0 4px 4px;transition:opacity .2s ease}.ap-o-header-flyout:before{content:"";display:block;background:linear-gradient(180deg,rgba(0,0,0,.07) 0,hsla(0,0%,100%,.07));height:8px;margin-bottom:10px}.ap-o-header-flyout-item-secondary{margin:20px 0;white-space:nowrap;min-width:200px}.ap-o-header-flyout-item-secondary a:hover{color:#005af0}.ap-o-header-flyout-item-title{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-family:Poppins,system;font-weight:700;color:#000;line-height:1.4em}.ap-o-header-flyout-item-title.secondary{padding:0 15px}.ap-o-header-flyout-item-description{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;opacity:.75;line-height:1.25em}.ap-o-header-flyout-primary-item{position:relative;width:300px}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);background-color:#005af0}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info>*{color:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon{fill:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.email,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.stories{fill:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.email{background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-o-header-flyout-primary-item-link{display:flex;align-items:center;border-radius:4px;padding:10px;margin:0 5px}.ap-o-header-flyout-primary-item-link-info{margin:0 20px 0 15px}.ap-o-header-flyout-primary-item-link-icon{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:2em;height:2em}.ap-o-header-flyout-primary-item-link-icon.websites{fill:url(#gradient-websites) #000}.ap-o-header-flyout-primary-item-link-icon.stories{fill:url(#gradient-stories) #000}.ap-o-header-flyout-primary-item-link-icon.ads{fill:url(#gradient-ads) #000}.ap-o-header-flyout-primary-item-link-icon.email{fill:url(#gradient-email) #000}#blm-banner{background:#111;color:#eee;display:block;text-align:center;padding:.5em}.ap--main>.-tf:first-child{padding-top:54px;padding-bottom:3rem}body{background-color:#fafafc}.-ld .-tf{position:relative;display:flex;flex-wrap:wrap;width:100%;max-width:1440px;padding:0 20px;margin-left:auto;margin-right:auto}@media(max-width:767px){.-ld .-tf{padding:0 15px}.-ld .-tf>div,.-ld .-tf section{min-width:0}}@media(min-width:768px){.-ld .-tf{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0 30px;grid-gap:0}}@media(min-width:1024px){.-ld .-tf{padding:0 15px}}.-ld .-t,.-ld .ap--help{grid-column:1;position:relative;width:100%;background:#fafafc;box-shadow:0 25px 40px 0 rgba(0,0,0,.05);padding-left:0;padding-right:0}@media(min-width:768px){.-ld .-t,.-ld .ap--help{grid-column:9/25}}@media(min-width:1024px){.-ld .-t,.-ld .ap--help{grid-column:7/25}.-ld .-t p.limit,.-ld .ap--help p.limit{max-width:70%}}@media(min-width:768px){.-ld .-t,.-ld .ap--help{grid-column:8/25}}@media(min-width:1024px){.-ld .-t,.-ld .ap--help{grid-column:6/25}}.-ld .-uc{grid-column:auto;padding:0}@media(min-width:768px){.-ld .-uc{grid-column:1/8;grid-row:span 6;margin-right:20px}}@media(min-width:1024px){.-ld .-uc{grid-column:1/6}}.-ld .ap--toc{box-shadow:20px 25px 40px 0 rgba(0,0,0,.05)}.-ld .ap--toc~.-t{box-shadow:-30px -5px 30px -20px rgba(0,0,0,.05)}@media(min-width:768px){.-ld .ap--toc{grid-column:8/25}.-ld .ap--toc~.-t{padding-top:0}}@media(min-width:768px)and (min-width:768px){.-ld .ap--toc~.-t{grid-column:8/25;padding-left:30px}}@media(min-width:768px)and (min-width:1024px){.-ld .ap--toc~.-t{grid-column:6/20;padding-left:30px;padding-right:30px}}@media(min-width:768px)and (min-width:768px){.-ld .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:768px)and (min-width:1024px){.-ld .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:1024px){.-ld .ap--toc{background:#fafafc;grid-column:20/25;grid-row:span 3;padding-top:93px;padding-bottom:25px}.-ld .ap--toc~.-t{padding-top:62px}}@media(min-width:1024px)and (max-width:767px){.-ld .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-ld .-uc+.-t,.-ld .ap--toc+.-t{padding-top:62px}@media(max-width:767px){.-ld .-uc+.-t,.-ld .ap--toc+.-t{padding-left:15px;padding-right:15px}}@media(min-width:1024px){.-ld .-uc+.-t:nth-of-type(2),.-ld .-uc+.-t:nth-of-type(3),.-ld .ap--toc+.-t:nth-of-type(2),.-ld .ap--toc+.-t:nth-of-type(3){grid-row:1}}.-ld .ap--versions{position:relative;display:inline-flex;align-items:center;background:#fff;border:1px solid #e2e5e6;margin-top:5px}.-ld .ap--versions-toggle{border:0;padding:0 32px 0 8px;background:#fff;font-family:inherit;font-size:inherit;font-weight:inherit;-moz-appearance:none;-webkit-appearance:none;appearance:none}.-ld .ap--versions:after{content:"";position:absolute;right:8px;width:16px;height:35px;background:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%2320202A'%3E%3Cpath d='M59.863 17.14l4.137 5.488-32 24.232-32-24.232 4.137-5.488 27.863 21.108z'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;pointer-events:none}.-ld .ap--component-tags{margin-top:-1.5rem;margin-bottom:2rem}@media(min-width:768px){.-ld .-t,.-ld .ap--help{padding-left:30px;padding-right:30px}}.-ta{display:flex;overflow-x:auto;margin:1.1rem 0 0;padding:0 1em;color:#fff;line-height:1.3em;background:#20202a;font-size:.9em}.-ta:after{content:" ";-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.-ta::-webkit-scrollbar{width:6px;height:6px}.-ta::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.-ta::-webkit-scrollbar-corner{background-color:transparent}.-ta::-webkit-scrollbar-thumb{border-radius:0}@media(min-width:768px){.-ta{max-width:100%;margin-right:-30px}}.-ta code,.-ta pre{font-family:Fira Mono,monospace;font-weight:500;white-space:pre;font-size:.9rem;padding:unset;word-break:normal;color:inherit;background:0 0}.-ta .hll{background-color:#49483e}.-ta .c{color:#75715e}.-ta .k{color:#66d9ef}.-ta .l{color:#ae81ff}.-ta .n{color:#f8f8f2}.-ta .o{color:#f15a5a}.-ta .p{color:#f8f8f2}.-ta .c1,.-ta .ch,.-ta .cm,.-ta .cp,.-ta .cpf,.-ta .cs{color:#75715e}.-ta .gd{color:#f15a5a}.-ta .ge{font-style:italic}.-ta .gi{color:#a6e22e}.-ta .gs{font-weight:700}.-ta .gu{color:#75715e}.-ta .kc,.-ta .kd{color:#66d9ef}.-ta .kn{color:#f15a5a}.-ta .kp,.-ta .kr,.-ta .kt{color:#66d9ef}.-ta .ld{color:#e6db74}.-ta .m{color:#ae81ff}.-ta .s{color:#e6db74}.-ta .na{color:#a6e22e}.-ta .nb{color:#f8f8f2}.-ta .nc{color:#a6e22e}.-ta .no{color:#66d9ef}.-ta .nd{color:#a6e22e}.-ta .ni{color:#f8f8f2}.-ta .ne,.-ta .nf{color:#a6e22e}.-ta .nl,.-ta .nn{color:#f8f8f2}.-ta .nx{color:#fff}.-ta .py{color:#f8f8f2}.-ta .nt{color:#f15a5a}.-ta .nv{color:#f8f8f2}.-ta .ow{color:#f15a5a}.-ta .w{color:#f8f8f2}.-ta .mb,.-ta .mf,.-ta .mh,.-ta .mi,.-ta .mo{color:#ae81ff}.-ta .dl,.-ta .s2,.-ta .sa,.-ta .sb,.-ta .sc,.-ta .sd{color:#e6db74}.-ta .se{color:#ae81ff}.-ta .s1,.-ta .sh,.-ta .si,.-ta .sr,.-ta .ss,.-ta .sx{color:#e6db74}.-ta .bp{color:#f8f8f2}.-ta .fm{color:#a6e22e}.-ta .vc,.-ta .vg,.-ta .vi,.-ta .vm{color:#f8f8f2}.-ta .il{color:#ae81ff}table{table-layout:fixed;width:100%;position:relative;border-collapse:collapse;padding:0 0 0 20px;margin:1.5em -20px 2em;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem}@media(min-width:768px){table{padding:0;margin:1.5em 0 2em}}thead{font-weight:700}thead tr{text-align:left}thead tr th{padding:20px}tbody tr,thead tr th{border-bottom:1px solid #e2e5e6}tbody tr:nth-child(odd){background-color:hsla(0,0%,100%,.5)}tbody tr td:first-child{border-right:1px solid #e2e5e6}tbody td{padding:10px 20px;text-align:left;vertical-align:top;width:50%}@media(min-width:768px){tbody td{padding:20px}}@media(min-width:1024px){tbody td{width:25%}}tbody td code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}</style><link rel="manifest" href="/manifest.json"></head><body class="ap--websites"> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="stackoverflow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 25"><path d="M14.2 14.7h1.6V25H0V14.7h1.6v8.6h12.5c.1-2.8.1-5.7.1-8.6zM9.5 3.2c1.8 2.7 3.6 5.4 5.4 8.2.6-.4 1.1-.8 1.7-1.2C14.8 7.5 13 4.8 11.2 2c-.5.5-1.1.8-1.7 1.2zm5.1 8.5c-2.8-1.7-5.5-3.3-8.2-5-.4.6-.7 1.2-1.1 1.8 2.7 1.7 5.5 3.3 8.2 5 .4-.6.8-1.2 1.1-1.8zM17.4 0c-.7.1-1.3.2-2 .4.5 3.2 1.1 6.5 1.6 9.7.7-.1 1.3-.2 2-.4-.5-3.2-1.1-6.5-1.6-9.7zm-4 14.1c-3.1-.9-6.2-1.7-9.2-2.6-.2.7-.4 1.4-.5 2 3.1.9 6.2 1.7 9.2 2.6.1-.6.3-1.3.5-2zm-.9 5.5H3v2.1h9.5v-2.1zm.3-2.7c-3.2-.3-6.3-.6-9.5-.9-.1.7-.1 1.4-.2 2.1 3.2.3 6.3.6 9.5.9 0-.8.1-1.4.2-2.1z"/></symbol><symbol id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M32 0.792c-17.68 0-32 14.328-32 32 0 14.141 9.168 26.133 21.88 30.36 1.6 0.301 2.187-0.688 2.187-1.539 0-0.76-0.027-2.773-0.040-5.44-8.901 1.931-10.779-4.293-10.779-4.293-1.456-3.693-3.56-4.68-3.56-4.68-2.899-1.984 0.224-1.944 0.224-1.944 3.213 0.224 4.901 3.296 4.901 3.296 2.853 4.893 7.491 3.48 9.32 2.661 0.288-2.069 1.112-3.48 2.027-4.28-7.107-0.8-14.576-3.552-14.576-15.813 0-3.493 1.24-6.347 3.293-8.587-0.36-0.808-1.44-4.061 0.28-8.469 0 0 2.68-0.859 8.8 3.28 2.56-0.712 5.28-1.064 8-1.080 2.72 0.016 5.44 0.368 8 1.080 6.080-4.139 8.76-3.28 8.76-3.28 1.72 4.408 0.64 7.661 0.32 8.469 2.040 2.24 3.28 5.093 3.28 8.587 0 12.293-7.48 15-14.6 15.787 1.12 0.96 2.16 2.923 2.16 5.92 0 4.283-0.040 7.723-0.040 8.763 0 0.84 0.56 1.84 2.2 1.52 12.803-4.197 21.963-16.197 21.963-30.317 0-17.672-14.328-32-32-32z"/> </symbol><symbol id="wordpress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M57.251 18.2A28.688 28.688 0 0 1 60.766 32c0 10.611-5.749 19.883-14.301 24.867l8.787-25.405c1.64-4.107 2.187-7.389 2.187-10.304 0-1.08-.069-2.08-.187-2.96zm-21.283.277c1.725-.08 3.285-.28 3.285-.28 1.552-.2 1.371-2.48-.179-2.397 0 0-4.68.36-7.68.36-2.837 0-7.6-.4-7.6-.4-1.56-.08-1.763 2.28-.2 2.36 0 0 1.44.163 3 .24l4.48 12.28-6.32 18.88L14.277 18.4c1.731-.08 3.291-.267 3.291-.267 1.56-.2 1.376-2.48-.173-2.389 0 0-4.656.368-7.664.368-.533 0-1.168-.021-1.84-.04C13.096 8.4 21.96 3.24 32 3.24a28.642 28.642 0 0 1 19.429 7.555c-.123-.008-.243-.024-.376-.024-2.827 0-4.832 2.461-4.832 5.104 0 2.373 1.368 4.381 2.827 6.749 1.096 1.92 2.373 4.381 2.373 7.939 0 2.44-.944 5.317-2.189 9.277l-2.867 9.56-10.4-30.96.003.037zM32 60.757c-2.824 0-5.549-.408-8.128-1.165l8.632-25.083 8.84 24.232c.064.141.133.269.208.397A28.794 28.794 0 0 1 32 60.762zM3.229 32c0-4.171.896-8.133 2.493-11.707L19.439 57.89C9.85 53.226 3.231 43.389 3.228 31.999zM32 0C14.36 0 0 14.36 0 32s14.36 32 32 32 32-14.36 32-32S49.64 0 32 0z"/></symbol><symbol id="youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M62.664 16.542c-.773-2.708-2.862-4.797-5.514-5.556l-.057-.014c-4.989-1.336-25.065-1.336-25.065-1.336s-20.026-.027-25.065 1.337c-2.708.773-4.797 2.862-5.556 5.514l-.014.057C.507 21.107 0 26.354 0 31.72l.001.327v-.017.252a83.84 83.84 0 0 0 1.475 15.695l-.083-.521c.773 2.708 2.862 4.797 5.513 5.556l.057.014c4.983 1.339 25.065 1.339 25.065 1.339s20.023 0 25.065-1.339c2.708-.773 4.797-2.862 5.556-5.514l.014-.057c.85-4.469 1.336-9.609 1.336-14.863l-.002-.595v.03c.002-.184.002-.403.002-.621 0-5.255-.486-10.396-1.416-15.38l.08.515zM25.621 41.608V22.42l16.71 9.609z"/></symbol><symbol id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M63.875 12.186c-2.36 1.037-4.88 1.744-7.533 2.067 2.704-1.629 4.784-4.197 5.768-7.261-2.536 1.48-5.346 2.557-8.338 3.157-2.389-2.557-5.794-4.157-9.576-4.157-7.245 0-13.119 5.874-13.119 13.111 0 1.040 0.12 2.040 0.339 2.997-10.906-0.515-20.572-5.752-27.042-13.669-1.139 1.925-1.776 4.162-1.776 6.6 0 4.56 2.32 8.568 5.834 10.922-2.152-0.069-4.176-0.661-5.941-1.643v0.163c0 6.36 4.514 11.663 10.522 12.871-1.101 0.296-2.264 0.456-3.456 0.456-0.837 0-1.64-0.080-2.443-0.229 1.683 5.208 6.52 9.005 12.277 9.112-4.48 3.517-10.157 5.613-16.271 5.613-1.040 0-2.077-0.061-3.12-0.179 5.837 3.717 12.714 5.89 20.151 5.89 24.143 0 37.329-19.989 37.329-37.294 0-0.557 0-1.12-0.040-1.68 2.563-1.837 4.8-4.16 6.56-6.794l-0.125-0.053z"/> </symbol><symbol id="download" viewBox="0 0 64 64"> <path d="M8.8 62.32c0-0.88 0.72-1.68 1.68-1.68 10.8 0 32.32 0 43.040 0 0.88 0 1.68 0.72 1.68 1.68 0 0.88-0.72 1.68-1.68 1.68-10.8 0-32.32 0-43.040 0-0.96 0-1.68-0.72-1.68-1.68z"/> <path d="M49.44 34.56c0.72-0.72 0.72-1.84 0-2.56s-1.84-0.72-2.56 0l-13.040 13.040v-43.28c0-0.96-0.88-1.76-1.84-1.76-1.040 0-1.84 0.8-1.84 1.76v43.28l-13.040-13.12c-0.72-0.72-1.84-0.72-2.56 0s-0.72 1.84 0 2.56l16.24 16.24c0.72 0.72 1.84 0.72 2.56 0l16.080-16.16z"/> </symbol><symbol id="internal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M43.16 10.18c-0.881-0.881-2.322-0.881-3.203 0s-0.881 2.322 0 3.203l16.335 16.335h-54.051c-1.281 0-2.242 1.041-2.242 2.242 0 1.281 0.961 2.322 2.242 2.322h54.051l-16.415 16.335c-0.881 0.881-0.881 2.322 0 3.203s2.322 0.881 3.203 0l20.259-20.259c0.881-0.881 0.881-2.322 0-3.203l-20.179-20.179z"/></symbol><symbol id="external" viewBox="0 0 64 64"> <path d="M28.879 11.24c-0.841-0.841-2.206-0.841-3.048 0s-0.841 2.207 0 3.048l15.543 15.543h-39.241c-1.219 0-2.133 0.987-2.133 2.133 0 1.219 0.914 2.207 2.133 2.207h39.241l-15.616 15.543c-0.841 0.841-0.841 2.206 0 3.048 0.835 0.841 2.206 0.841 3.048 0l19.273-19.279c0.841-0.841 0.841-2.206 0-3.048l-19.2-19.194zM59.429 27.392c2.511 0 4.571 2.060 4.571 4.571s-2.060 4.571-4.571 4.571-4.571-2.060-4.571-4.571 2.060-4.571 4.571-4.571z"/> </symbol><symbol id="speech-bubble" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><path stroke="#005AF0" stroke-width="1.94" d="M1.544 19.002c0 9.64 7.816 17.457 17.457 17.457 3.707 0 6.783-.838 9.61-2.809.936-.653 7.057 3.628 7.848 2.809.71-.737-3.264-7.394-2.69-8.247 1.868-2.78 2.69-5.61 2.69-9.21C36.459 9.36 28.642 1.544 19 1.544c-9.639 0-17.456 7.817-17.456 17.458z"/><path fill="#005AF0" fill-rule="nonzero" d="M17.621 28.71h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362l6.272-10.46 1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L17.621 28.71z"/></g></symbol><symbol id="warning-sign" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><path stroke="#F3C000" stroke-width="2" d="M19.843 2.29l16.643 33.671c.177.356.03.788-.326.964-.1.05-.208.075-.319.075H2.171c-.398 0-.72-.322-.72-.72 0-.113.026-.224.077-.325l17.028-33.67c.179-.355.612-.497.967-.318.139.07.251.184.32.324z"/><path fill="#F3C000" fill-rule="nonzero" d="M17.621 32.71h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362l6.272-10.46 1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L17.621 32.71z"/></g></symbol><symbol id="sidebar-toggle" viewBox="0 0 64 64"> <path d="M36.032 7.9c0.985-0.996 2.624-0.996 3.643 0 0.985 0.963 0.985 2.565 0 3.526l-18.471 18.060h40.246c1.421 0.002 2.55 1.107 2.55 2.496s-1.129 2.529-2.55 2.529h-40.246l18.471 18.026c0.985 0.996 0.985 2.601 0 3.562-1.019 0.996-2.66 0.996-3.643 0l-22.844-22.336c-1.019-0.963-1.019-2.565 0-3.526l22.844-22.338z"/> <path d="M2.071 3.012c1.144 0 2.071 0.927 2.071 2.071v53.835c0 1.144-0.927 2.071-2.071 2.071s-2.071-0.927-2.071-2.071v-53.835c0-1.144 0.927-2.071 2.071-2.071z"/> </symbol><symbol id="contentmenu" viewBox="0 0 64 64"> <path d="M1.351 46.865h36.036c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-36.036c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 14.432h40.541c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-40.541c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 38.757h31.532c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-31.532c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 30.649h37.838c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-37.838c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 22.541h34.234c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-34.234c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM52.249 29.371c-0.992 0-1.231-0.566-0.525-1.272l5.296-5.296c0.353-0.353 0.931-0.348 1.279 0l5.296 5.296c0.702 0.702 0.466 1.272-0.525 1.272h-10.822zM63.069 35.153c0.992 0 1.231 0.566 0.525 1.272l-5.296 5.296c-0.353 0.353-0.931 0.348-1.279 0l-5.296-5.296c-0.702-0.702-0.466-1.272 0.525-1.272h10.822z"/> </symbol><symbol id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M39.503 32l22.963-22.963c2.046-2.046 2.046-5.457 0-7.503s-5.456-2.046-7.503 0l-22.963 22.963-22.963-22.963c-2.046-2.046-5.457-2.046-7.503 0s-2.046 5.457 0 7.503l22.963 22.963-22.963 22.963c-2.046 2.046-2.046 5.456 0 7.503s5.457 2.046 7.503 0l22.963-22.963 22.963 22.963c2.046 2.046 5.456 2.046 7.503 0s2.046-5.456 0-7.503l-22.963-22.963z"/> </symbol><symbol id="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M2.133 13.867h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 28.8h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 43.733h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> </symbol><symbol id="wrench" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M64 18.267c0 1.608-0.214 3.21-0.636 4.767l0.008 0.169c0.028 0.598-0.186 1.18-0.592 1.619-2.713 7.035-9.527 11.712-17.107 11.712-1.852 0-3.671-0.275-5.427-0.819l-25.943 25.854c-1.573 1.567-3.667 2.431-5.889 2.431s-4.318-0.864-5.89-2.431l-0.087-0.087c-3.25-3.238-3.25-8.508 0-11.747l23.75-23.669c0.66-0.657 1.046-1.529 1.090-2.456l0.173-3.404c-0.070-0.657-0.105-1.308-0.105-1.939 0-10.074 8.221-18.267 18.327-18.267 3.298 0 6.532 0.883 9.353 2.555 0.602 0.357 1.005 0.979 1.083 1.675 0.011 0.098 0.017 0.161 0.020 0.237 0.044 1.158-0.297 1.536-9.858 10.586l3.847 3.921c1.149-1.058 3.185-2.929 8.997-8.27 0.542-0.497 1.293-0.697 2.010-0.534 0.719 0.163 1.311 0.668 1.583 1.351 0.856 2.147 1.291 4.418 1.292 6.745zM59.819 22.4c0.395-1.346 0.595-2.737 0.594-4.132 0-1.194-0.141-2.367-0.422-3.507-2.922 2.685-8.959 8.231-9.040 8.307-0.536 0.494-1.37 0.474-1.88-0.046l-6.953-7.087c-0.252-0.258-0.39-0.605-0.384-0.965s0.158-0.702 0.42-0.95c2.985-2.825 7.47-7.107 9.54-9.166-1.884-0.84-3.936-1.278-6.022-1.278-8.129 0-14.742 6.59-14.742 14.691 0 0.533 0.032 1.090 0.096 1.654 0.007 0.071 0.010 0.142 0.007 0.214l-0.174 3.646c-0.087 1.818-0.847 3.528-2.138 4.816l-23.75 23.668c-1.85 1.844-1.85 4.844 0 6.688l0.087 0.087c0.897 0.893 2.088 1.385 3.356 1.385s2.46-0.492 3.355-1.385l26.429-26.338c0.2-0.199 0.419-0.39 0.693-0.601 0.377-0.292 0.882-0.363 1.326-0.187 1.743 0.692 3.578 1.044 5.456 1.044 6.243 0 11.831-3.943 13.905-9.811 0.044-0.126 0.107-0.244 0.187-0.351-0.002-0.134 0.016-0.268 0.054-0.396z"/> </symbol><symbol id="template" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M1.44 0h62.56v64h-64v-64h1.44zM20.64 60.88v-39.52h-17.76v39.6h17.76zM23.44 21.36v39.6h37.44v-39.6h-37.44zM2.88 18.24h58.080v-15.36h-58.080v15.36z"/></symbol><symbol id="learn" viewBox="0 0 64 64"> <path d="M57.674 35.257c0 1.779 1.416 3.221 3.163 3.221s3.163-1.442 3.163-3.221c0-1.155-0.602-2.16-1.498-2.728v-8.973c0-0.682-0.401-1.297-1.018-1.563l-29.585-12.716c-0.413-0.178-0.881-0.178-1.295 0l-29.586 12.716c-0.617 0.265-1.018 0.881-1.018 1.563s0.401 1.297 1.018 1.562l6.662 2.863v17.587c0 4.624 7.288 9.29 23.571 9.29s23.571-4.666 23.571-9.29v-17.587l4.349-1.869v6.417c-0.896 0.569-1.497 1.573-1.497 2.728zM51.491 45.567c0 1.575-4.797 5.898-20.24 5.898s-20.24-4.323-20.24-5.898v-16.155l19.593 8.421c0.207 0.089 0.427 0.134 0.647 0.134s0.441-0.045 0.647-0.134l19.593-8.421v16.155zM31.251 34.43l-25.303-10.875 25.303-10.875 25.302 10.875-25.302 10.875z"/> </symbol><symbol id="examples-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><g><path d="M20 19.3a.9.9 0 1 1 0-1.7 1.9 1.9 0 0 0 1.9-1.9v-3a3.6 3.6 0 0 1 1.3-2.7 3.6 3.6 0 0 1-1.3-2.8v-3A1.9 1.9 0 0 0 20 2.3a.9.9 0 1 1 0-1.7 3.6 3.6 0 0 1 3.6 3.6v3a1.9 1.9 0 0 0 2 2v1.6a1.9 1.9 0 0 0-2 2v3a3.6 3.6 0 0 1-3.6 3.5zm-14 0a3.6 3.6 0 0 1-3.6-3.6v-3a1.9 1.9 0 0 0-2-1.9V9.1a1.9 1.9 0 0 0 2-1.9v-3A3.6 3.6 0 0 1 6 .6a.9.9 0 1 1 0 1.8A1.9 1.9 0 0 0 4 4.2v3A3.6 3.6 0 0 1 2.8 10a3.6 3.6 0 0 1 1.3 2.7v3A1.9 1.9 0 0 0 6 17.6a.9.9 0 1 1 0 1.7z"/><g transform="translate(5.8 8.5)"><circle cx="12.3" cy="1.4" r="1.4"/><circle cx="7.3" cy="1.4" r="1.4"/><circle cx="2.2" cy="1.4" r="1.4"/></g></g></symbol><symbol id="components-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 22"><path d="M8.7 17l-2.5-2.2-4-3.5-.9-.8v1l2.5-2.2 4-3.5 1-.8c.2-.3.2-.8 0-1a.8.8 0 0 0-1.2 0L5.1 6l-4 3.6-.8.8c-.3.2-.3.8 0 1l2.5 2.2 4 3.6.8.8c.3.2.8.3 1.1 0 .3-.3.3-.8 0-1.1zM19.3 5l2.5 2.2 4 3.5.9.8v-1l-2.5 2.2-4 3.5-.9.8c-.3.3-.3.8 0 1 .3.4.8.3 1 0L23 16l4-3.6.9-.8c.3-.2.3-.8 0-1l-2.5-2.3-4-3.5-1-.8c-.2-.3-.7-.3-1 0-.3.3-.3.8 0 1zm-8 16.4l.7-2 1.6-5a3563.7 3563.7 0 0 1 2-5.8l1.7-5.1.8-2.5c.2-.4-.1-.9-.5-1a.8.8 0 0 0-1 .6c-.1.7-.4 1.3-.6 2l-1.6 4.9-2 5.9-1.7 5-.8 2.6c-.2.4.1.8.5 1a.8.8 0 0 0 1-.6z"/></symbol><symbol id="guides-documents" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 32"><path d="M6.7 28H1.2c-.4 0-.6-.4-.6-.8L.5.7c0-.4.3-.7.7-.7h21.1c.5 0 .7.3.7.7V2c0 .5-.2.7-.7.7-.4 0-.6-.2-.6-.7v-.6H1.8L2 26.6h4.8c.4 0 .7.2.7.6 0 .4-.3.7-.7.7z"/><path d="M8 6.8H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 10.9H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 15H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 19H6c-.4 0-.7-.2-.7-.6 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7z"/><path d="M29.8 4H8.7c-.5 0-.7.4-.7.8v26.5c0 .4.3.7.7.7h21.1c.4 0 .7-.3.7-.7V4.8c0-.4-.3-.7-.7-.7zm-.6 26.6H9.4V5.4h19.8v25.2z"/><path d="M18.1 22.8h-.6l.6-3.8h-1.9c-.2 0-.3-.1-.3-.3v-.2l3.4-5.8h.7l-.7 3.8h2c.2 0 .3.1.3.3v.2L18 22.8z"/></symbol><symbol id="start" viewBox="0 0 64 64"> <path d="M63.195 1.874c-0.143-0.52-0.549-0.926-1.069-1.069-10.765-2.978-20.385 2.978-24.355 6.948l-11.452 11.452-5.421-1.756c-3.551-1.163-7.454-0.217-10.078 2.443l-3.359 3.359c-0.582 0.594-0.582 1.544 0 2.138l7.329 7.329-4.199 6.948c-0.343 0.593-0.25 1.342 0.229 1.832l11.681 11.605c0.471 0.504 1.223 0.63 1.832 0.305l6.948-4.123h0.076l7.329 7.329c0.594 0.582 1.544 0.582 2.138 0l3.359-3.359c2.66-2.624 3.606-6.527 2.443-10.078l-1.756-5.421 11.452-11.452c3.894-4.047 9.849-13.666 6.871-24.431zM23.799 50.126l-9.925-9.925 3.13-5.268 12.063 12.063-5.268 3.13zM54.109 24.015l-12.139 12.139c-0.4 0.399-0.547 0.987-0.382 1.527l2.061 6.337c0.783 2.448 0.136 5.128-1.68 6.948l-2.29 2.29-29.012-29.012 2.29-2.29c1.819-1.815 4.5-2.463 6.948-1.68l6.337 2.061c0.54 0.165 1.128 0.018 1.527-0.382l12.216-12.063c3.436-3.359 11.452-8.398 20.461-6.337 2.061 9.085-2.978 17.102-6.337 20.461z"/> <path d="M10.667 51.195l-9.009 9.009c-0.478 0.358-0.703 0.963-0.576 1.547s0.583 1.040 1.167 1.167c0.584 0.127 1.188-0.098 1.547-0.576l9.009-9.009c0.456-0.608 0.396-1.459-0.142-1.996s-1.388-0.598-1.996-0.142z"/> <path d="M11.66 63.563c0.594 0.582 1.544 0.582 2.138 0l4.581-4.581c0.456-0.608 0.395-1.459-0.142-1.996s-1.388-0.598-1.996-0.142l-4.581 4.581c-0.582 0.594-0.582 1.544 0 2.138z"/> <path d="M1.505 52.798c0.403-0.006 0.787-0.17 1.069-0.458l4.581-4.581c0.478-0.358 0.703-0.963 0.576-1.547s-0.583-1.040-1.167-1.167c-0.584-0.127-1.188 0.098-1.547 0.576l-4.581 4.581c-0.428 0.436-0.554 1.086-0.322 1.65s0.78 0.937 1.391 0.945z"/> <path d="M43.726 13.021c-2.003 2.003-2.003 5.25 0 7.253s5.25 2.003 7.253 0c2.003-2.003 2.003-5.25 0-7.253s-5.25-2.003-7.253 0zM48.841 18.136c-0.699 0.692-1.79 0.794-2.605 0.243s-1.127-1.601-0.745-2.508c0.382-0.907 1.351-1.417 2.315-1.219s1.653 1.050 1.646 2.033c-0.004 0.545-0.223 1.067-0.611 1.451z"/> </symbol><symbol id="amp-email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-email" x1="76.2776137%" x2="20.8316146%" y1="-25.8400575%" y2="121.578822%"> <stop offset="0%" stop-color="#F1F068"/> <stop offset="46.2139774%" stop-color="#96D64F"/> <stop offset="100%" stop-color="#2DB932"/> </linearGradient> </defs> <path d="M64 14.080c0-3.291-2.56-5.851-5.851-5.851h-52.297c-3.291 0-5.851 2.56-5.851 5.851v35.84c0 3.291 2.56 5.851 5.851 5.851h52.297c3.291 0 5.851-2.56 5.851-5.851v-35.84zM5.851 11.154h52.297c0.183 0 0.366 0 0.549 0l-24.503 25.417c-0.549 0.549-1.28 0.914-2.194 0.914-0.731 0-1.646-0.366-2.194-0.914l-24.32-25.417c0 0 0.183 0 0.366 0zM2.926 14.080c0-0.366 0-0.731 0.183-1.097l15.36 16.091-15.543 19.2v-34.194zM58.149 52.846h-52.297c-0.731 0-1.646-0.366-2.194-0.914l16.823-20.663 7.131 7.497c1.097 1.097 2.56 1.829 4.206 1.829s3.109-0.731 4.206-1.829l6.583-6.949 17.371 20.114c-0.366 0.549-1.097 0.914-1.829 0.914v0zM61.074 48.274l-16.091-18.834 15.909-16.64c0.183 0.366 0.183 0.731 0.183 1.097v34.377z"/> </symbol><symbol id="amp-ads" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-ads" x1="100%" x2="14.5415777%" y1="0%" y2="123.368881%"> <stop offset="0%" stop-color="#FF52E1"/> <stop offset="100%" stop-color="#5500D7"/> </linearGradient> </defs> <path d="M56.399 14.68c3.654-3.846 9.616-10.963 6.924-13.847-2.885-2.885-10.001 3.269-13.847 6.731l-0.577-0.577c-0.385-0.385-0.962-0.577-1.539-0.385l-15.963 3.077c-0.385 0-0.577 0.192-0.769 0.385l-30.195 30.195c-0.577 0.577-0.577 1.731 0 2.308l20.963 20.963c0.385 0.385 0.769 0.385 1.154 0.385s0.769-0.192 1.154-0.385l30.003-30.003c0.192-0.192 0.385-0.577 0.385-0.769v0l3.077-15.963c0.192-0.577 0-1.154-0.385-1.539l-0.385-0.577zM53.899 16.988l-2.885 14.424-28.464 28.656-18.655-18.655 28.656-28.656 14.424-2.885c-1.539 1.731-4.039 4.423-5.962 7.116-1.923-0.192-3.654 0.385-5.193 1.923-2.5 2.5-2.5 6.731 0 9.232s6.731 2.5 9.232 0c1.346-1.346 2.116-3.27 1.923-5.193-0.192-1.154-0.577-2.308-1.154-3.077-0.192-0.385-0.385-0.577-0.769-0.769-0.192-0.192-0.577-0.577-0.769-0.769 1.154-1.731 2.885-3.654 5.193-5.962l2.5 2.5 1.923 2.116zM43.321 24.873c-0.192 0.385-0.385 0.577-0.577 0.962-1.346 1.346-3.27 1.346-4.616 0s-1.346-3.27 0-4.616c0.192-0.192 0.577-0.385 0.962-0.577 1.154-0.577 2.308-0.385 3.462 0.385 0.192 0 0.192 0.192 0.385 0.192 0 0 0.192 0.192 0.192 0.385 0.577 0.962 0.769 2.116 0.192 3.27zM54.091 12.372l-2.5-2.5c4.039-3.846 7.308-5.77 8.847-6.347-0.577 1.539-2.5 4.616-6.347 8.847z"/> </symbol><symbol id="amp-stories" viewBox="0 0 36 32"> <defs> <linearGradient id="gradient-stories" x1="81.726943%" x2="23.7165981%" y1="-28.3832685%" y2="119.978062%"> <stop offset="0%" stop-color="#FFF300"/> <stop offset="100%" stop-color="#FF8F00"/> </linearGradient> </defs> <path d="M7.111 0h21.333v32h-21.333v-32zM9.481 2.37v27.259h16.593v-27.259h-16.593zM0 4.741h2.37v22.519h-2.37v-22.519zM33.185 4.741h2.37v22.519h-2.37v-22.519z"/> </symbol><symbol id="amp-websites" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-websites" x1="81.8129399%" x2="33.8766928%" y1="0%" y2="94.4849088%"> <stop offset="0%" stop-color="#00DCC0"/> <stop offset="100%" stop-color="#005AF0"/> </linearGradient> </defs> <path d="M63.196 4.646h-62.253c-0.566 0-0.943 0.377-0.943 0.755v53.010c0 0.566 0.377 0.943 0.943 0.943h62.253c0.566 0 0.755-0.377 0.755-0.755v-53.198c0.189-0.377-0.189-0.755-0.755-0.755zM3.395 18.040h57.348v33.202h-57.348v-33.202zM60.744 7.853v6.98h-57.348v-6.98h57.348zM3.395 56.147v-1.509h57.348v1.509h-57.348zM9.055 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM12.828 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM18.487 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM51.123 39.734l-11.13-13.96c-0.189-0.189-0.377-0.377-0.755-0.377v0c-0.189 0-0.566 0-0.755 0.377l-8.3 9.621-4.716-6.225c-0.189-0.189-0.377-0.377-0.755-0.377s-0.566 0-0.755 0.377l-8.866 10.376c-0.377 0.377-0.189 0.943 0 1.132s0.377 0.189 0.566 0.189c0.189 0 0.566 0 0.754-0.377l8.3-9.621 4.528 5.471-2.452 3.018c-0.377 0.377-0.189 0.943 0 1.132 0.377 0.189 0.943 0.189 1.132 0l11.319-13.017 10.376 13.205c0.189 0.189 0.377 0.377 0.755 0.377 0.189 0 0.377 0 0.566-0.189 0.377-0.377 0.566-0.943 0.189-1.132zM27.165 26.718c1.509 0 2.641-1.132 2.641-2.641 0-1.321-1.132-2.641-2.641-2.641s-2.641 1.132-2.641 2.641c0 1.509 1.132 2.641 2.641 2.641zM27.165 23.322c0.566 0 0.943 0.377 0.943 0.943s-0.377 0.943-0.943 0.943-0.943-0.377-0.943-0.943c0-0.566 0.377-0.943 0.943-0.943z"/> </symbol><symbol id="angle-down-solid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M56.293 16.003c1.761-1.645 4.553-1.645 6.314 0 1.857 1.734 1.857 4.623 0 6.357l-27.45 25.638c-1.761 1.645-4.553 1.645-6.314 0l-27.45-25.638c-0.899-0.839-1.393-1.963-1.393-3.178s0.494-2.339 1.393-3.178c1.761-1.645 4.553-1.645 6.314 0l24.293 22.689 24.293-22.689z"/> </symbol><symbol id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z"/><path fill="#005AF0" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z"/></g></symbol> </defs> </svg> <header class="ap--header " [class]="'ap--header ' + (mainmenuopen ? 'mainmenuopen' : '')" i-amphtml-binding> <div class="ap-o-header"> <a class="ap-o-header-home" href="/ar/"> <svg class="ap-o-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"/></svg> <span class="ap-o-header-home-title">AMP</span> </a> <nav class="ap-o-header-main"> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> لمحة عن <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link websites" href="/ar/about/websites/"> <div class="ap-o-header-flyout-primary-item-link-icon websites"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-websites"> <div class="ap-o-header-flyout-item-title">مواقع AMP الإلكترونية</div> <div class="ap-o-header-flyout-item-description">إنشاء تجارب ويب خالية من الأخطاء</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link stories" href="/ar/about/stories/"> <div class="ap-o-header-flyout-primary-item-link-icon stories"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-stories"> <div class="ap-o-header-flyout-item-title">Web Stories</div> <div class="ap-o-header-flyout-item-description">قصص سهلة للجميع</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link ads" href="/ar/about/ads/"> <div class="ap-o-header-flyout-primary-item-link-icon ads"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-ads"> <div class="ap-o-header-flyout-item-title">إعلانات AMP</div> <div class="ap-o-header-flyout-item-description">إعلانات بسرعة فائقة على الويب</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link email" href="/ar/about/email/"> <div class="ap-o-header-flyout-primary-item-link-icon email"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-email"> <div class="ap-o-header-flyout-item-title">بريد AMP الإلكتروني</div> <div class="ap-o-header-flyout-item-description">الجيل الجديد من خدمة البريد الإلكتروني</div> </div> </a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/about/how-amp-works/">آلية عمل AMP</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/about/mission-and-vision/">الرؤية والرسالة</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/about/use-cases/">حالات الاستخدام</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/success-stories/">قصص النجاح</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> المستندات <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/documentation/">بدء الاستخدام</a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ar/documentation/guides-and-tutorials/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guides-documents"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">الأدلّة والبرامج التعليمية</div> <div class="ap-o-header-flyout-item-description">بدء استخدام AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ar/documentation/components/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#components-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">المكونات</div> <div class="ap-o-header-flyout-item-description">مكتبة AMP الكاملة</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ar/documentation/examples/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#examples-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">أمثلة</div> <div class="ap-o-header-flyout-item-description">Hands-on introduction to AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ar/documentation/courses/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#learn"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">الدورات التدريبية</div> <div class="ap-o-header-flyout-item-description">تعلم AMP من خلال دورات تدريبية مجانية</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ar/documentation/templates/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#template"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">النماذج</div> <div class="ap-o-header-flyout-item-description">جاهز للاستخدام</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ar/documentation/tools/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wrench"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">الأدوات</div> <div class="ap-o-header-flyout-item-description">بدء الإنشاء</div> </div> </a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> المجتمع <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/documentation/guides-and-tutorials/contribute/">مساهمة</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/community/roadmap/">خارطة الطريق</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/community/governance/">الإدارة</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/community/working-groups/access-subscriptions/">مجموعات العمل</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> الفعاليات <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/events/amp-fest-2020/">AMP Fest 2020</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/events/amp-roadshow/">عرض AMP الترويجي المتنقل</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <a class="ap-o-header-main-link -tw" href="https://blog.amp.dev">مدونة</a> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> الدعم <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/support/">تعليمات</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/support/faq/">الأسئلة المتداولة</a> </li> </ul> </div> </nav> <div class="-tv"> <span class="-tm" aria-label="اختر لغة" tabindex="-1"> <span class="-tw">AR</span> <div class="ap-a-ico -ty"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </span> <input class="-tg" type="checkbox" name="language-selector"> <div class="-tb" role="list"> <a class="-tw" href="/documentation/components/amp-bind/" role="listitem">English</a> <a class="-tw" href="/de/documentation/components/amp-bind/" role="listitem">Deutsch</a> <a class="-tw" href="/fr/documentation/components/amp-bind/" role="listitem">Français</a> <a class="-tw" href="/es/documentation/components/amp-bind/" role="listitem">Español</a> <a class="-tw" href="/it/documentation/components/amp-bind/" role="listitem">Italiano</a> <a class="-tw" href="/id/documentation/components/amp-bind/" role="listitem">Indonesia</a> <a class="-tw" href="/ja/documentation/components/amp-bind/" role="listitem">日本語</a> <a class="-tw" href="/ko/documentation/components/amp-bind/" role="listitem">한국어</a> <a class="-tw" href="/pt_br/documentation/components/amp-bind/" role="listitem">Português</a> <a class="-tw" href="/ru/documentation/components/amp-bind/" role="listitem">Русский</a> <a class="-tw" href="/tr/documentation/components/amp-bind/" role="listitem">Türkçe</a> <a class="-tw" href="/zh_cn/documentation/components/amp-bind/" role="listitem">中文</a> <a class="-tw" href="/pl/documentation/components/amp-bind/" role="listitem">Polski</a> <a class="-tw" href="/vi/documentation/components/amp-bind/" role="listitem">Tiếng việt</a> </div> </div> </div> </header> <label class="ap-o-burger-menu-label" on="tap:AMP.setState({mainmenuopen: !mainmenuopen, noScrollState: !noScrollState})" [class]="'ap-o-burger-menu-label ' + (mainmenuopen ? 'mainmenuopen ' : '')" for="burger-menu" tabindex="0" role="button" aria-label="قائمة برغر" i-amphtml-binding> <div class="ap-a-ico ap-o-burger-menu-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu"/></svg> </div> </label> <nav class="ap-o-burger-menu" [class]="mainmenuopen ? 'ap-o-burger-menu mainmenuopen' : 'ap-o-burger-menu'" i-amphtml-binding> <ul class="-th"> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> لمحة عن </label> <input class="-td" type="checkbox" aria-label="About"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/about/websites/"> مواقع AMP الإلكترونية </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/about/stories/"> Web Stories </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/about/ads/"> إعلانات AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/about/email/"> بريد AMP الإلكتروني </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/about/how-amp-works/"> آلية عمل AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/about/mission-and-vision/"> الرؤية والرسالة </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/about/use-cases/"> حالات الاستخدام </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/success-stories/"> قصص النجاح </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> المستندات </label> <input class="-td" type="checkbox" aria-label="Documentation"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/"> بدء الاستخدام </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/guides-and-tutorials/"> الأدلّة والبرامج التعليمية </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/components/"> المكونات </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/examples/"> أمثلة </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/courses/"> الدورات التدريبية </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/templates/"> النماذج </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/tools/"> الأدوات </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> المجتمع </label> <input class="-td" type="checkbox" aria-label="Community"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/guides-and-tutorials/contribute/"> مساهمة </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/community/roadmap/"> خارطة الطريق </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/community/governance/"> الإدارة </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/community/working-groups/access-subscriptions/"> مجموعات العمل </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> الفعاليات </label> <input class="-td" type="checkbox" aria-label="Events"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/events/amp-fest-2020/"> AMP Fest 2020 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/events/amp-roadshow/"> عرض AMP الترويجي المتنقل </a> </li> </ul> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw" href="https://blog.amp.dev">مدونة</a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw " href="/ar/support/"> تعليمات </a> </li> </ul> </nav> <div class="-ui"> <amp-position-observer on="enter:slideTransition.start; exit:slideTransition.start,slideTransition.reverse" intersection-ratios="1" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <amp-animation id="slideTransition" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":"150ms","fill":"both","easing":"ease-out","iterations":"1","animations":[{"selector":".label-title","keyframes":[{"transform":"scale3d(0, 1, 1)"},{"transform":"scale3d(1, 1, 1)"}]}]}</script> </amp-animation> </div> <amp-user-notification class="-ll i-amphtml-layout-nodisplay" id="format-filter-hint" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-user-notification> <div class="-lf" aria-hidden="true"> <div class="-lc"> <div class="-lh">اختَر التنسيق المناسب لك للحصول على تجربة أكثر انسيابية</div> <button class="-lp" on="tap:format-filter-hint.dismiss"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> </div> </div> <main class="ap--main -ld"> <div class="-tf"> <input class="-uu ap-a-sidebar-mobile-toggle-input-sidebar" type="checkbox" name="sidebar" id="sidebar" autocomplete="off"> <input class="-uf ap-a-sidebar-desktop-toggle-input-sidebar" type="checkbox" name="sidebar-desktop" id="sidebar-desktop" autocomplete="off"> <span id="ap--sidebar-content" class="-uc"></span> <section class="ap--toc"> <div class="ap-o-toc" [class]="contentmenuopen ? 'ap-o-toc contentmenuopen' : 'ap-o-toc'" i-amphtml-binding> <label class="ap-o-toc-toggle" for="toc" on="tap:AMP.setState({contentmenuopen: !contentmenuopen})" role="contentmenutrigger" tabindex="0"> <span class="ap-o-toc-hl">جدول المحتويات</span> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </label> <input class="-us -un" type="checkbox" name="toc" id="toc" autocomplete="off"> <ul><li><a href="#نظرة-عامة">نظرة عامة </a></li> <li><a href="#مثال-بسيط">مثال بسيط </a><ul> <li><a href="#كيف-يعمل؟">كيف يعمل؟ </a></li> <li><a href="#مثال-أكثر-تعقيدًا">مثال أكثر تعقيدًا </a></li> </ul> </li> <li><a href="#التفاصيل">التفاصيل </a></li> <li><a href="#الحالة">الحالة </a></li> <li><a href="#إعداد-الحالة-باستخدام-amp-state">إعداد الحالة باستخدام amp-state </a></li> <li><a href="#إعادة-تحميل-الحالة">إعادة تحميل الحالة </a></li> <li><a href="#تعديل-الحالة-باستخدام-amp.setstate()">تعديل الحالة باستخدام AMP.setState() </a></li> <li><a href="#تعديل-السجلّ-باستخدام-amp.pushstate()">تعديل السجلّ باستخدام AMP.pushState() </a></li> <li><a href="#التعبيرات">التعبيرات </a></li> <li><a href="#الاختلافات-التي-تميّزها-عن-جافا-سكريبت">الاختلافات التي تميّزها عن جافا سكريبت </a></li> <li><a href="#أمثلة">أمثلة </a></li> <li><a href="#الدالات-المدرجة-في-القائمة-البيضاء">الدالات المدرجة في القائمة البيضاء </a></li> <li><a href="#تحديد-وحدات-الماكرو-باستخدام-amp-bind-macro">تحديد وحدات الماكرو باستخدام amp-bind-macro </a></li> <li><a href="#عمليات-الربط">عمليات الربط </a></li> <li><a href="#السمات-الخاصة-بالعناصر">السمات الخاصة بالعناصر </a></li> <li><a href="#تصحيح-الأخطاء">تصحيح الأخطاء </a></li> <li><a href="#التحذيرات">التحذيرات </a></li> <li><a href="#الأخطاء">الأخطاء </a></li> <li><a href="#حالة-تصحيح-الأخطاء">حالة تصحيح الأخطاء </a></li> <li><a href="#الملحق">الملحق </a></li> <li><a href="#مواصفات-<amp-state>">مواصفات <amp-state> </a></li> <li><a href="#إرسال-xhr-في-دفعات">إرسال XHR في دفعات </a></li> <li><a href="#السمات">السمات </a></li> <li><a href="#الدمج-العميق-باستخدام-amp.setstate()">الدمج العميق باستخدام AMP.setState() </a></li> <li><a href="#إزالة-متغير">إزالة متغير </a></li> <li><a href="#قواعد-التعبيرات">قواعد التعبيرات </a></li></ul> </div> </section> <section class="-t"> <label class="-uo -ur ap-a-sidebar-mobile-toggle-label-sidebar" for="sidebar" on="tap:sidebar-left.toggle" role="categoriemenutrigger" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">تبديل الشريط الجانبي</span> </label> <label class="-uo -ul ap-a-sidebar-desktop-toggle-label-sidebar" for="sidebar-desktop" role="categoriemenutrigger-desktop" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">تبديل الشريط الجانبي</span> </label> <nav class="-ue"> <a class="ap-m-breadcrumbs-crumb" href="/ar/documentation/">المستندات</a> <span class="ap-m-breadcrumbs-divider"> <svg class="ap-a-ico -ut"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <a class="ap-m-breadcrumbs-crumb" href="/ar/documentation/components/">المكونات</a> </nav> <h1> amp-bind </h1> <div class="ap-o-component-intro"> <div class="ap-o-component-intro-row"> <h4 class="ap-o-component-intro-headline">Description</h4> <p class="ap-o-component-intro-text">Allows elements to mutate in response to user actions or data changes via data binding and simple JS-like expressions.</p> </div>   <div class="ap-o-component-intro-row ap-o-component-intro-row-inline"> <h4 class="ap-o-component-intro-headline">Required Scripts</h4> <div id="amp-script" class="ap-a-copy-script"> <pre><script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script></pre> <amp-iframe width="24" height="24" layout="fixed" sandbox="allow-scripts" src="https://amp.dev/shared/copy-script/#%3Cscript%20async%20custom-element%3D%22amp-bind%22%20src%3D%22https%3A//cdn.ampproject.org/v0/amp-bind-0.1.js%22%3E%3C/script%3E" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:24px;height:24px;" i-amphtml-layout="fixed"> <div placeholder></div> </amp-iframe> </div> </div> <div class="ap-o-component-intro-row"> <div id="examples" class="ap-m-clip"> <h4 class="ap-o-component-intro-headline">أمثلة</h4> <div class="ap-o-component-intro-list"> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-autocomplete/'>amp-autocomplete</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-bind-macro/'>amp-bind-macro</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-bind-recaptcha/'>amp-bind-recaptcha</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-bind/'>amp-bind</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-date-picker/'>amp-date-picker</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-geo/'>amp-geo</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-iframe/'>amp-iframe</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-img/'>amp-img</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-lightbox/'>amp-lightbox</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-list/'>amp-list</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-selector/'>amp-selector</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/amp_for_e-commerce_getting_started/'>AMP for E-Commerce Getting Started</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/product_browse_page/'>Product Browse Page</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/product_page/'>Product Page</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/client-side_filtering/'>Client-side filtering</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/conditional_state/'>Conditional State</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/copy_button/'>Copy Button</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/currency_conversion/'>Currency Conversion</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/dynamic_accordion/'>Dynamic Accordion</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/dynamic_content_after_user-interaction/'>Dynamic Content After User-Interaction</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/linked_dropdowns/'>Linked Dropdowns</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/multi_page_flow/'>Multi Page Flow</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/restrict_duplicate_selection/'>Restrict Duplicate Selection</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/show_more_button/'>Show More Button</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/tic_tac_toe/'>Tic-Tac-Toe</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/multimedia-animations/image_galleries_with_amp-carousel/'>Image Galleries with amp-carousel</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/visual-effects/animated_snackbar/'>Animated Snackbar</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-analytics/'>amp-analytics</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/checkout_flow/'>Checkout Flow</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/hotel/'>Hotel</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/shopping_cart/'>Shopping Cart</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/favorite_button/'>Favorite Button</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/paged_list/'>Paged List</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/seatmap/'>SeatMap</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/seatmap_multiple_selection/'>SeatMap Multiple Selection</a> </div> <button id="examples-expand" class="ap-m-clip-expand" on="tap:examples.toggleClass(class='expanded', force=true),examples-expand.hide()"> <svg class="ap-m-clip-expand-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </button> </div> </div> </div> <p>يضيف المكوِّن تفاعلاً مخصصًا باستخدام ربط البيانات والتعبيرات.</p> <p>[جدول المحتويات]</p> <table> <tbody><tr> <td class="col-fourty"><strong>النص البرمجي المطلوب</strong></td> <td> <div> <code><script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script></code> </div> </td> </tr> <tr> <td class="col-fourty"><strong>أمثلة</strong></td> <td> <ul> <li><a href="https://ampbyexample.com/components/amp-bind/">مثال تمهيدي للترميز مع التعليقات التوضيحية</a></li> <li><a href="https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/#linking-carousels-with-amp-bind">مثال لمنصّات عرض بصور متغيّرة ومرتبطة مع التعليقات التوضيحية</a></li> <li><a href="https://ampbyexample.com/samples_templates/product/">مثال لصفحة منتج في التجارة الإلكترونية مع التعليقات التوضيحية</a></li> </ul> </td> </tr> <tr> <td class="col-fourty"><strong>البرامج التعليمية</strong></td> <td><a href="/ar/documentation/guides-and-tutorials/develop/interactivity/">إنشاء صفحات AMP التفاعلية</a></td> </tr> </tbody></table> <h1 id="نظرة-عامة">نظرة عامة <a name="overview"></a></h1> <p>يتيح لك المكوِّن <code>amp-bind</code> إضافة تفاعل ذي حالة مخصصة إلى صفحات AMP من خلال ربط البيانات والتعبيرات المشابهة لجافا سكريبت.</p> <figure class="alignment-wrapper margin-"> <amp-youtube width="480" height="270" data-videoid="xzCFU8b5fCU" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:56.25%"></i-amphtml-sizer></amp-youtube> <figcaption>شاهِد هذا الفيديو للحصول على مقدمة عن amp-bind.</figcaption></figure> <h1 id="مثال-بسيط">مثال بسيط <a name="a-simple-example"></a></h1> <p>في المثال التالي، يؤدي النقر على الزر إلى تغيير نص العنصر <code>&lt;p&gt;</code> من "Hello World" إلى "Hello amp-bind".</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">p</span> <span class="na">[text]</span><span class="o">=</span><span class="s">"'Hello ' + foo"</span><span class="p">></span>Hello World<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({foo: 'amp-bind'})"</span><span class="p">></span>Say "Hello amp-bind"<span class="p"></</span><span class="nt">button</span><span class="p">></span> </code></pre></div> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> لا يعمل "amp-bind" على تقييم التعبيرات عند تحميل الصفحة وذلك للحفاظ على الأداء ولتجنب خطر التخطي غير المتوقع للمحتوى. ويعني هذا أنه يجب إعطاء حالة تلقائية للعناصر المرئية وعدم الاعتماد على "amp-bind" للعرض الأولي. </div> </div><p></p> <h3 id="كيف-يعمل؟">كيف يعمل؟ <a name="how-does-it-work"></a></h3> <p>يحتوي "amp-bind" على ثلاثة مكونات رئيسية:</p> <ol> <li><a href="#state">State</a>: حالة JSON قابلة للتحويل على نطاق المستند. في المثال أعلاه، الحالة فارغة قبل النقر على الزر. أما بعد النقر، تصبح الحالة <code>{foo: 'amp-bind'}</code>.</li> <li><a href="#expressions">Expressions</a>: هذه تعبيرات تشبيه جافا سكريبت وتشير إلى <strong>state</strong>. يحتوي المثال أعلاه على تعبير واحد هو <code>'Hello ' + foo</code> والذي يربط السلسلة الحرفية <code>'Hello '</code> مع متغير الحالة <code>foo</code>. يمكن استخدام ما يصل إلى 100 معامل كحد أقصى في التعبير.</li> <li><a href="#bindings">Bindings</a>: هذه سمات خاصة لخاصية <code>[property]</code> النموذج التي تربط خاصية العنصر بالتعبير <strong>expression</strong>. يحتوي المثال أعلاه على ربط واحد هو <code>[text]</code> والذي يعدّل نص العنصر `` كلما تغيرت قيمة التعبير.</li> </ol> <p>يحتاج <code>amp-bind</code> إلى عناية خاصة لضمان السرعة والأمان وجودة الأداء على صفحات AMP.</p> <h3 id="مثال-أكثر-تعقيدًا">مثال أكثر تعقيدًا <a name="a-slightly-more-complex-example"></a></h3> <div class="-ta"><pre><span></span><code><span class="c"></span> <span class="p"><</span><span class="nt">amp-state</span> <span class="na">id</span><span class="o">=</span><span class="s">"myAnimals"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"dog"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"imageUrl"</span><span class="o">:</span> <span class="s2">"/img/dog.jpg"</span><span class="p">,</span> <span class="s2">"style"</span><span class="o">:</span> <span class="s2">"greenBackground"</span> <span class="p">},</span> <span class="s2">"cat"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"imageUrl"</span><span class="o">:</span> <span class="s2">"/img/cat.jpg"</span><span class="p">,</span> <span class="s2">"style"</span><span class="o">:</span> <span class="s2">"redBackground"</span> <span class="p">}</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-state</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span> <span class="na">[text]</span><span class="o">=</span><span class="s">"'This is a ' + currentAnimal + '.'"</span><span class="p">></span>This is a dog.<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="c"></span> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"greenBackground"</span> <span class="na">[class]</span><span class="o">=</span><span class="s">"myAnimals[currentAnimal].style"</span><span class="p">></span> Each animal has a different background color. <span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="c"></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">width</span><span class="o">=</span><span class="s">"300"</span> <span class="na">height</span><span class="o">=</span><span class="s">"200"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/img/dog.jpg"</span> <span class="na">[src]</span><span class="o">=</span><span class="s">"myAnimals[currentAnimal].imageUrl"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({currentAnimal: 'cat'})"</span><span class="p">></span>Set to Cat<span class="p"></</span><span class="nt">button</span><span class="p">></span> </code></pre></div> <p>عند الضغط على الزر:</p> <ol> <li>يتم تعديل <strong>الحالة</strong> بـ <code>currentAnimal</code> الذي يتم تحديده على أنه <code>'cat'</code>.</li> <li> <p>يتم تقييم <strong>التعبيرات</strong> التي تعتمد على الحالة <code>currentAnimal</code>:</p> <ul> <li><code>'This is a ' + currentAnimal + '.'</code> => <code>'This is a cat.'</code></li> <li><code>myAnimals[currentAnimal].style</code> => <code>'redBackground'</code></li> <li><code>myAnimals[currentAnimal].imageUrl</code> => <code>/img/cat.jpg</code></li> </ul> </li> <li> <p>يتم تعديل <strong>عمليات الربط</strong> التي تعتمد على التعبيرات التي تم تغييرها:</p> <ul> <li>نص عنصر <code><p></code> الأول سيصبح "This is a cat."</li> <li>السمة <code>class</code> للعنصر <code><p></code> الثاني ستصبح "redBackground".</li> <li>العنصر <code>amp-img</code> سيعرض صورة قطة.</li> </ul> </li> </ol> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> <a href="https://ampbyexample.com/components/amp-bind/">شاهِد <strong>العرض التوضيحي المباشر</strong></a> لهذا المثال مع تعليقات توضيحية للترميز. </div> </div><p></p> <h1 id="التفاصيل">التفاصيل <a name="details"></a></h1> <h1 id="الحالة">الحالة <a name="state"></a></h1> <p>كل مستند AMP يستخدم <code>amp-bind</code> له بيانات JSON أو <strong>حالة</strong> قابلة للتحويل على نطاق المستند.</p> <h1 id="إعداد-الحالة-باستخدام-amp-state">إعداد الحالة باستخدام <code>amp-state</code> <a name="initializing-state-with-amp-state"></a></h1> <p>يمكن إعداد حالة <code>amp-bind</code> باستخدام المكوِّن <code>amp-state</code>:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-state</span> <span class="na">id</span><span class="o">=</span><span class="s">"myState"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"foo"</span><span class="o">:</span> <span class="s2">"bar"</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-state</span><span class="p">></span> </code></pre></div> <p>يمكن أن تشير <a href="#expressions">التعبيرات</a> إلى متغيرات الحالة عبر بنية النقاط. في هذا المثال، سيتم تقييم <code>myState.foo</code> إلى <code>"bar"</code>.</p> <ul> <li>الحد الأقصى لحجم JSON للعنصر الثانوي للعنصر <code><amp-state></code> هو 100 كيلوبايت.</li> <li>يمكن للعنصر <code><amp-state></code> أيضًا تحديد عنوان CORS URL بدلاً من نص برمجي لعنصر JSON الثانوي. يمكن مراجعة <a href="#amp-state-specification">الملحق</a> للحصول على التفاصيل.</li> </ul> <h1 id="إعادة-تحميل-الحالة">إعادة تحميل الحالة <a name="refreshing-state"></a></h1> <p>يتيح هذ المكوِّن الإجراء <code>refresh</code> الذي يمكن استخدامه لإعادة تحميل محتوى الحالة.</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-state</span> <span class="na">id</span><span class="o">=</span><span class="s">"amp-state"</span> <span class="err">...</span><span class="p">></</span><span class="nt">amp-state</span><span class="p">></span> <span class="c"></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:amp-state.refresh"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span> </code></pre></div> <h1 id="تعديل-الحالة-باستخدام-amp.setstate()">تعديل الحالة باستخدام <code>AMP.setState()</code> <a name="updating-state-with-ampsetstate"></a></h1> <p>يُدمِج الإجراء <a href="/ar/documentation/guides-and-tutorials/learn/amp-actions-and-events/#target-amp"><code>AMP.setState()</code></a> كائنًا حرفيًا في الحالة. عند الضغط على الزر أدناه مثلاً، سيعمل <code>AMP.setState()</code> على <a href="#deep-merge-with-ampsetstate">الدمج العميق</a> للكائن الحرفي مع الحالة.</p> <div class="-ta"><pre><span></span><code><span class="c"></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({foo: 'bar', baz: myAmpState.someVariable})"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span> </code></pre></div> <p>بشكل عام، سيتم دمج الكائنات المدمجة بحد أقصى للعمق يساوي 10. يمكن إلغاء كل المتغيرات، بما في ذلك المتغيرات التي قدمها <code>amp-state</code>.</p> <p>عند تشغيل الإجراء <code>AMP.setState()</code> بواسطة أحداث معينة، يمكنه أيضًا الوصول إلى البيانات المتعلقة بالأحداث في الخاصية <code>event</code>.</p> <div class="-ta"><pre><span></span><code><span class="c"></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"range"</span> <span class="na">on</span><span class="o">=</span><span class="s">"change:AMP.setState({myRangeValue: event.value})"</span><span class="p">></span> </code></pre></div> <h1 id="تعديل-السجلّ-باستخدام-amp.pushstate()">تعديل السجلّ باستخدام <code>AMP.pushState()</code> <a name="modifying-history-with-amppushstate"></a></h1> <p>يشبه الإجراء <a href="/ar/documentation/guides-and-tutorials/learn/amp-actions-and-events/#target-amp"><code>AMP.pushState()</code></a> الإجراء <code>AMP.setState()</code> إلا أنه يدفع إدخالاً جديدًا في حِزم سجلّ التصفُّح. يؤدي دفع إدخال السجلّ هذا (بالانتقال إلى الخلف مثلاً) إلى استعادة القيمة السابقة للمتغيرات التي عينها <code>AMP.pushState()</code>.</p> <p>على سبيل المثال:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.pushState({foo: '123'})"</span><span class="p">></span>Set 'foo' to 123<span class="p"></</span><span class="nt">button</span><span class="p">></span> </code></pre></div> <ul> <li>سيؤدي النقر على الزر إلى تعيين المتغير <code>foo</code> على 123 ودفع إدخال سجلّ جديد.</li> <li>سيؤدي الانتقال إلى الخلف إلى استعادة <code>foo</code> قيمتها السابقة وهي "bar" (أي ما يعادل استدعاء <code>AMP.setState({foo: 'bar'})</code>.</li> </ul> <h1 id="التعبيرات">التعبيرات <a name="expressions"></a></h1> <p>التعبيرات تشبه جافا سكريبت مع بعض الاختلافات المهمة.</p> <h1 id="الاختلافات-التي-تميّزها-عن-جافا-سكريبت">الاختلافات التي تميّزها عن جافا سكريبت <a name="differences-from-javascript"></a></h1> <ul> <li>قد تصل التعبيرات فقط إلى <a href="#state">حالة</a> المستند الحاوية.</li> <li><strong>ليست</strong> للتعبيرات إمكانية الوصول إلى المتغيرات العمومية مثل <code>window</code> أو <code>document</code>.</li> <li>لا يمكن استخدام سوى <a href="#allow-listed-functions">الدالات المدرجة في القائمة البيضاء</a> وعوامل التشغيل.</li> <li>غير مسموح عمومًا بالدالات والفئات والحلقات المخصصة. يُسمح بالدالات السهمية كمعلَمات، مثل <code>Array.prototype.map</code>.</li> <li>المتغيرات غير المحددة وarray-index-out-of-bound تعرض <code>null</code> بدلاً من <code>undefined</code> أو إظهار الأخطاء.</li> <li>للتعبير الواحد حاليًا حد قيمته 50 معاملًا بغرض جودة الأداء. يرجى <a href="https://github.com/ampproject/amphtml/issues/new">الاتصال بنا</a> إذا لم يكن هذا كافيًا لحالة الاستخدام لديك.</li> </ul> <p>يمكن العثور على القواعد الكاملة للتعبيرات وتنفيذها في <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-bind/0.1/bind-expr-impl.jison">bind-expr-impl.jison</a> و<a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-bind/0.1/bind-expression.js">bind-expression.js</a>.</p> <h1 id="أمثلة">أمثلة <a name="examples"></a></h1> <p>جميع ما يلي تعبيرات صالحة:</p> <div class="-ta"><pre><span></span><code><span class="mi">1</span> <span class="o">+</span> <span class="s1">'1'</span> <span class="c1">// 11</span> <span class="mi">1</span> <span class="o">+</span> <span class="p">(</span><span class="o">+</span><span class="s1">'1'</span><span class="p">)</span> <span class="c1">// 2</span> <span class="o">!</span><span class="mi">0</span> <span class="c1">// true</span> <span class="kc">null</span> <span class="o">||</span> <span class="s1">'default'</span> <span class="c1">// 'default'</span> </code></pre></div> <h1 id="الدالات-المدرجة-في-القائمة-البيضاء">الدالات المدرجة في القائمة البيضاء <a name="allow-listed-functions"></a></h1> <table> <tbody><tr> <th>نوع الكائن </th> <th>الدالات</th> <th>مثال</th> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods"><code>Array</code></a><sup>1</sup></td> <td class="col-thirty"> <code>concat</code><br> <code>filter</code><br> <code>includes</code><br> <code>indexOf</code><br> <code>join</code><br> <code>lastIndexOf</code><br> <code>map</code><br> <code>reduce</code><br> <code>slice</code><br> <code>some</code><br> <code>sort</code> (not-in-place)<br> <code>splice</code> (not-in-place)<br> </td> <td> <pre>// Returns [1, 2, 3]. [3, 2, 1].sort()</pre> <pre>// Returns [1, 3, 5]. [1, 2, 3].map((x, i) => x + i)</pre> <pre>// Returns 6. [1, 2, 3].reduce((x, y) => x + y)</pre> </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#Methods"><code>Number</code></a></td> <td> <code>toExponential</code><br> <code>toFixed</code><br> <code>toPrecision</code><br> <code>toString</code> | <pre>// Returns 3. (3.14).toFixed()</pre> <pre>// Returns '3.14'. (3.14).toString()</pre> </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Methods"><code>String</code></a></td> <td> <code>charAt</code><br> <code>charCodeAt</code><br> <code>concat</code><br> <code>indexOf</code><br> <code>lastIndexOf</code><br> <code>slice</code><br> <code>split</code><br> <code>substr</code><br> <code>substring</code><br> <code>toLowerCase</code><br> <code>toUpperCase</code></td> <td> <pre>// Returns 'abcdef'. abc'.concat('def')</pre> </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a><sup>2</sup></td> <td> <code>abs</code><br> <code>ceil</code><br> <code>floor</code><br> <code>max</code><br> <code>min</code><br> <code>random</code><br> <code>round</code><br> <code>sign</code></td> <td> <pre>// Returns 1. abs(-1)</pre> </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a><sup>2</sup></td> <td> <code>keys</code><br> <code>values</code> | <pre>// Returns ['a', 'b']. keys({a: 1, b: 2})</pre> <pre>// Returns [1, 2]. values({a: 1, b: 2}</pre> </td> </tr> <tr> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects"><code>Global</code></a><sup>2</sup> </td> <td> <code>encodeURI</code><br> <code>encodeURIComponent</code> </td> <td> <pre>// Returns 'Hello%20world'. encodeURIComponent('Hello world')</pre> </td> </tr> </tbody></table> <p><sup>1</sup>لا يمكن أن تحتوي الدالات السهمية ذات المعلَمة الفردية على أقواس، استخدِم مثلاً <code>x => x + 1</code> بدلاً من <code>(x) => x + 1</code>. وتعرض أيضًا <code>sort()</code> و<code>splice()</code> نسخًا معدّلة بدلاً العمل في مكانها.</p> <p><sup>2</sup>الدالات الثابتة لا تستخدم كمساحات أسماء، استخدِم مثلاً <code>abs(-1)</code> بدلاً من <code>Math.abs(-1)</code>.</p> <h1 id="تحديد-وحدات-الماكرو-باستخدام-amp-bind-macro">تحديد وحدات الماكرو باستخدام <code>amp-bind-macro</code> <a name="defining-macros-with-amp-bind-macro"></a></h1> <p>يمكن إعادة استخدام أجزاء التعبير <code>amp-bind</code> من خلال تحديد <code>amp-bind-macro</code>. يتيح لك العنصر <code>amp-bind-macro</code> تحديد تعبير يأخذ وسيطات صفرية أو أكثر ويشير إلى الحالة الحالية. يمكن استدعاء وحدة ماكرو كدالة من خلال الإشارة إلى قيمة سمتها <code>id</code> من أي مكان في المستند.</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-bind-macro</span> <span class="na">id</span><span class="o">=</span><span class="s">"circleArea"</span> <span class="na">arguments</span><span class="o">=</span><span class="s">"radius"</span> <span class="na">expression</span><span class="o">=</span><span class="s">"3.14 * radius * radius"</span><span class="p">></</span><span class="nt">amp-bind-macro</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> The circle has an area of <span class="p"><</span><span class="nt">span</span> <span class="na">[text]</span><span class="o">=</span><span class="s">"circleArea(myCircle.radius)"</span><span class="p">></span>0<span class="p"></</span><span class="nt">span</span><span class="p">></span>. <span class="p"></</span><span class="nt">div</span><span class="p">></span> </code></pre></div> <p>يمكن لوحدة الماكرو أيضًا استدعاء وحدات ماكرو أخرى <i>يكون قد تم تحديدها قبلها</i>. لا يمكن لوحدة الماكرو استدعاء نفسها بشكل متكرر.</p> <h1 id="عمليات-الربط">عمليات الربط <a name="bindings"></a></h1> <p><strong>الربط</strong> سمة خاصة للخاصية <code>[property]</code> للنموذج تربط خاصية العنصر بأحد <a href="#expressions">التعبيرات</a>. ويمكن أيضًا استخدام بنية متوافقة مع XML في شكل <code>data-amp-bind-property</code>.</p> <p>عندما تتغير <strong>الحالة</strong>، يتم إعادة تقييم التعبيرات ويتم تعديل خصائص العناصر المرتبطة بنتائج التعبيرات الجديدة.</p> <p>يتيح <code>amp-bind</code> روابط البيانات في أربعة أنواع من حالة العنصر:</p> <table> <tbody><tr> <th>النوع</th> <th>السمات</th> <th>التفاصيل</th> </tr> <tr> <td class="col-thirty"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent"><code>Node.textContent</code></a></td> <td class="col-thirty"><code>[text]</code></td> <td>سمة متاحة في معظم العناصر النصية.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">فئات CSS</a></td> <td><code>[class]</code></td> <td>يجب أن تكون نتيجة التعبير سلسلة محددة بمسافة.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">السمة <code>hidden</code></a></td> <td><code>[hidden]</code></td> <td>يجب أن تكون تعبيرًا منطقيًا.</td> </tr> <tr> <td>حجم <a href="/ar/documentation/components/">عناصر AMP</a></td> <td><code>[width]</code><br><code>[height]</code></td> <td>تغيّر عرض و/أو ارتفاع عنصر AMP.</td> </tr> <tr> <td>السمات الخاصة بالعناصر</td> <td><a href="#element-specific-attributes">متنوعة</a></td> <td></td> </tr> </tbody></table> <p>ملاحظات عن عمليات الربط:</p> <ul> <li>إن الربط بـ <code>innerHTML</code> غير مسموح به لأسباب تتعلق بالأمان.</li> <li>يتم تصحيح جميع عمليات ربط السمات من القيم غير الآمنة (مثل <code>javascript:)</code>.</li> <li>يؤدي التعبير المنطقي إلى تبديل السمات المنطقية على سبيل المثال: <code><amp-video [controls]="expr"...></code>. عندما يتم تقييم <code>expr</code> إلى <code>true</code>، يحتوي العنصر <code><amp-video></code> على السمة <code>controls</code>. عند تقييم <code>expr</code> إلى <code>false</code>، تتم إزالة السمة <code>controls</code>.</li> <li>يمكن أن تكون أحرف الأقواس <code>[</code> and <code>]</code> في أسماء السمات مشكلة عند كتابة XML (مثل XHTML وJSX) أو كتابة السمات عبر واجهات برمجة التطبيقات DOM. في هذه الحالات، استخدِم البنية البديلة <code>data-amp-bind-x="foo"</code> بدلاً من <code>[x]="foo"</code>.</li> </ul> <h1 id="السمات-الخاصة-بالعناصر">السمات الخاصة بالعناصر <a name="element-specific-attributes"></a></h1> <p>يُسمح فقط بالربط مع المكونات والسمات التالية:</p> <table> <tbody><tr> <th>المكوِّن</th> <th>السمات</th> <th>السلوك</th> </tr> <tr> <td class="col-thirty"><code><amp-brightcove></code></td> <td class="col-fourty"><code>[data-account]</code><br><code>[data-embed]</code><br><code>[data-player]</code><br><code>[data-player-id]</code><br><code>[data-playlist-id]</code><br><code>[data-video-id]</code></td> <td class="col-thirty">يغيّر فيديو Brightcove المعروض.</td> </tr> <tr> <td><code><amp-carousel type=slides></code></td> <td><code>[slide]</code>*<sup>*</sup></td> <td>يغيّر فهرس الشريحة المعروض حاليًا. <a href="https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/#linking-carousels-with-amp-bind">اطّلِع على مثال</a>.</td> </tr> <tr> <td><code><amp-date-picker></code></td> <td> <code>[min]</code><br> <code>[max]</code> </td> <td> يعيّن أقرب تاريخ يمكن اختياره.<br> يعيّن أبعد تاريخ يمكن اختياره. </td> </tr> <tr> <td><code><amp-google-document-embed></code></td> <td><code>[src]</code><br><code>[title]</code></td> <td>يعرض المستند على عنوان URL المُعدَل.<br>يغيّر عنوان المستند.</td> </tr> <tr> <td><code><amp-iframe></code></td> <td><code>[src]</code></td> <td>يغيّر عنوان URL لمصدر إطار iframe.</td> </tr> <tr> <td><code><amp-img></code></td> <td><code>[alt]</code><br><code>[attribution]</code><br><code>[src]</code><br><code>[srcset]</code></td> <td>عند الربط بـ <code>[src]</code>، احرص أيضًا على الربط بـ <code>[srcset]</code> لجعل الربط يعمل على ذاكرة التخزين المؤقت.<br>اطّلِع على <a href="/ar/documentation/components/amp-img/#attributes">سمات amp-img</a> المقابلة.</td> </tr> <tr> <td><code><amp-lightbox></code></td> <td><code>[open]</code><sup>*</sup>*</td> <td> يبدّل العرض المبسط. نصيحة: استخدِم <code>on="lightboxClose: AMP.setState(...)"</code> لتعديل المتغيرات عند غلق العرض المبسط. </td> </tr> <tr> <td><code><amp-list></code></td> <td><code>[src]</code></td> <td> إذا كان التعبير عبارة عن سلسلة، يجلب المكَوِن JSON ويعرضه من عنوان URL للسلسلة. إذا كان التعبير كائنًا أو مصفوفة، سيعرض بيانات التعبير. </td> </tr> <tr> <td><code><amp-selector></code></td> <td><code>[selected]</code>*<sup>*</sup><br><code>[disabled]</code></td> <td>يغيّر العناصر الثانوية المختارة حاليًا<br>التي حددتها قيم السمة <code>option</code>. يتيح عمل قائمة قيم مفصولة بينها فواصل للاختيار من متعدد. <a href="https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/#linking-carousels-with-amp-bind">اطّلِع على مثال</a>.</td> </tr> <tr> <td><code><amp-state></code></td> <td><code>[src]</code></td> <td>يجلب JSON من عنوان URL الجديد ويدمجه في الحالة الحالية. <em>لاحظ أن التعديل التالي سيتجاهل العناصر <code><amp-state></code> لمنع الدورات.</em></td> </tr> <tr> <td><code><amp-video></code></td> <td><code>[alt]</code><br><code>[attribution]</code><br><code>[controls]</code><br><code>[loop]</code><br><code>[poster]</code><br><code>[preload]</code><br><code>[src]</code></td> <td>اطّلِع على <a href="/ar/documentation/components/amp-video-v1.0/#attributes">سمات amp-video</a> المقابلة.</td> </tr> <tr> <td><code><amp-youtube></code></td> <td><code>[data-videoid]</code></td> <td>يغيّر فيديو YouTube المعروض.</td> </tr> <tr> <td><code><a></code></td> <td><code>[href]</code></td> <td>يغيّر الرابط.</td> </tr> <tr> <td><code><button></code></td> <td><code>[disabled]</code><br><code>[type]</code><br><code>[value]</code></td> <td>اطّلِع على <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes">سمات الزر</a> المقابلة.</td> </tr> <tr> <td><code><details></code></td> <td><code>[open]</code></td> <td>اطّلِع على <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Attributes">سمات التفاصيل</a> المقابلة.</td> </tr> <tr> <td><code><fieldset></code></td> <td><code>[disabled]</code></td> <td>يفعّل مجموعة الحقول أو يوقفها.</td> </tr> <tr> <td><code><image></code></td> <td><code>[xlink:href]</code><br> | اطّلِع على <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image">سمات الصور</a> المقابلة.</td> </tr> <tr> <td><code><input></code></td> <td><code>[accept]</code><br><code>[accessKey]</code><br><code>[autocomplete]</code><br><code>[checked]</code><br><code>[disabled]</code><br><code>[height]</code><br><code>[inputmode]</code><br><code>[max]</code><br><code>[maxlength]</code><br><code>[min]</code><br><code>[minlength]</code><br><code>[multiple]</code><br><code>[pattern]</code><br><code>[placeholder]</code><br><code>[readonly]</code><br><code>[required]</code><br><code>[selectiondirection]</code><br><code>[size]</code><br><code>[spellcheck]</code><br><code>[step]</code><br><code>[type]</code><br><code>[value]</code><br><code>[width]</code></td> <td>اطّلِع على <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes">سمات الإدخالات</a> المقابلة.</td> </tr> <tr> <td><code><option></code></td> <td><code>[disabled]</code><br><code>[label]</code><br><code>[selected]</code><br><code>[value]</code></td> <td>اطّلِع على <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#Attributes">سمات الخيارات</a> المقابلة.</td> </tr> <tr> <td><code><optgroup></code></td> <td><code>[disabled]</code><br><code>[label]</code></td> <td>اطّلِع على <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup#Attributes">سمات optgroup</a> المقابلة.</td> </tr> <tr> <td><code><select></code></td> <td><code>[autofocus]</code><br><code>[disabled]</code><br><code>[multiple]</code><br><code>[required]</code><br><code>[size]</code></td> <td>اطّلِع على <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Attributes">سمات select</a> المقابلة.</td> </tr> <tr> <td><code><source></code></td> <td><code>[src]</code><br><code>[type]</code></td> <td>اطّلِع على <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#Attributes">سمات source</a> المقابلة.</td> </tr> <tr> <td><code><track></code></td> <td><code>[label]</code><br><code>[src]</code><br><code>[srclang]</code></td> <td>اطّلِع على <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track#Attributes">سمات track</a> المقابلة.</td> </tr> <tr> <td><code><textarea></code></td> <td><code>[autocomplete]</code><br><code>[autofocus]</code><br><code>[cols]</code><br><code>[disabled]</code><br><code>[maxlength]</code><br><code>[minlength]</code><br><code>[placeholder]</code><br><code>[readonly]</code><br><code>[required]</code><br><code>[rows]</code><br><code>[selectiondirection]</code><br><code>[selectionend]</code><br><code>[selectionstart]</code><br><code>[spellcheck]</code><br><code>[wrap]</code></td> <td>اطّلِع على <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes">سمات textarea</a> المقابلة.</td> </tr> </tbody></table> <p><sup><em></em></sup> تشير إلى سمات قابلة للربط ليس لها نظير غير قابل للربط.</p> <h1 id="تصحيح-الأخطاء">تصحيح الأخطاء <a name="debugging"></a></h1> <p>اختبِر في وضع مطور البرامج (باستخدام جزء عنوان URL <code>#development=1</code>) لإبراز التحذيرات والأخطاء أثناء التطوير والوصول إلى الوظائف الخاصة لتصحيح الأخطاء.</p> <h1 id="التحذيرات">التحذيرات <a name="warnings"></a></h1> <p>في وضع مطور البرامج، سيصدر <code>amp-bind</code> تحذيرًا عندما لا تتطابق القيمة التلقائية لسمة مرتبطة مع النتيجة الأولية للتعبير المقابل. يمكن أن يساعد هذا في منع الطفرات غير المقصودة الناجمة عن التغييرات في متغيرات الحالة الأخرى. مثال:</p> <div class="-ta"><pre><span></span><code><span class="c"></span> <span class="p"><</span><span class="nt">p</span> <span class="na">[class]</span><span class="o">=</span><span class="s">"'abc'"</span> <span class="na">class</span><span class="o">=</span><span class="s">"def"</span><span class="p">></</span><span class="nt">p</span><span class="p">></span> </code></pre></div> <p>في وضع مطور البرامج، سيصدر <code>amp-bind</code> أيضًا تحذيرًا عند الوصول إلى محتوى المتغيرات أو الخصائص غير المحددة. يمكن أن يساعد هذا أيضًا في منع الطفرات غير المقصودة بسبب نتائج التعبير <code>null</code>. مثال:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-state</span> <span class="na">id</span><span class="o">=</span><span class="s">"myAmpState"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"foo"</span><span class="o">:</span> <span class="mi">123</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-state</span><span class="p">></span> <span class="c"></span> <span class="p"><</span><span class="nt">p</span> <span class="na">[text]</span><span class="o">=</span><span class="s">"myAmpState.bar"</span><span class="p">></span>Some placeholder text.<span class="p"></</span><span class="nt">p</span><span class="p">></span> </code></pre></div> <h1 id="الأخطاء">الأخطاء <a name="errors"></a></h1> <p>هناك عدة أنواع من أخطاء وقت التشغيل التي يمكن مواجهتها عند التعامل مع <code>amp-bind</code>.</p> <table> <tbody><tr> <th>النوع</th> <th>الرسالة</th> <th>الاقتراح</th> </tr> <tr> <td class="col-thirty">الربط غير صالح</td> <td class="col-fourty"><em>Binding to [someBogusAttribute] on <P> is not allowed</em>.</td> <td class="col-thirty">استخدِم فقط <a href="#element-specific-attributes">عمليات الربط المدرجة في القائمة البيضاء</a>.</td> </tr> <tr> <td>خطأ في البنية</td> <td><em>Expression compilation error in...</em></td> <td>تحقق من التعبير بحثًا عن الأخطاء الإملائية.</td> </tr> <tr> <td>الدالات غير مدرجة في القائمة البيضاء</td> <td><em>alert is not a supported function.</em></td> <td>استخدِم فقط <a href="#allow-listed-functions">الدالات المدرجة في القائمة البيضاء</a>.</td> </tr> <tr> <td>نتيجة مصحَحة</td> <td><em>"javascript:alert(1)" is not a valid result for [href].</em></td> <td>تجنب بروتوكولات URL المحظورة أو التعبيرات المحظورة التي تخفق في "مدقق AMP".</td> </tr> <tr> <td>مخالفة CSP</td> <td><em>Refused to create a worker from 'blob:...' because it violates the following Content Security Policy directive...</em></td> <td>أضِف <code>default-src blob:</code> إلى سياسة أمان المحتوى للأصل. يفوض <code>amp-bind</code> العمل المُكلِف إلى <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">عامل ويب مخصص</a> لضمان الأداء الجيد.</td> </tr> </tbody></table> <h1 id="حالة-تصحيح-الأخطاء">حالة تصحيح الأخطاء <a name="debugging-state"></a></h1> <p>استخدِم <code>AMP.printState()</code> لطباعة الحالة الحالية إلى وحدة التحكم.</p> <h1 id="الملحق">الملحق <a name="appendix"></a></h1> <h1 id="مواصفات-<amp-state>">مواصفات <code><amp-state></code> <a name="amp-state-specification"></a></h1> <p>قد يحتوي عنصر <code>amp-state</code> على عنصر <code><script></code> الثانوي <strong>أو</strong> سمة <code>src</code> التي تحتوي على عنوان CORS URL إلى نقطة نهاية JSON بعيدة، ولكن ليس على كليهما.</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-state</span> <span class="na">id</span><span class="o">=</span><span class="s">"myLocalState"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"foo"</span><span class="o">:</span> <span class="s2">"bar"</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-state</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-state</span> <span class="na">id</span><span class="o">=</span><span class="s">"myRemoteState"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://data.com/articles.json"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-state</span><span class="p">></span> </code></pre></div> <h1 id="إرسال-xhr-في-دفعات">إرسال XHR في دفعات <a name="xhr-batching"></a></h1> <p>AMP ترسل XMLHttpRequests (XHRs) إلى نقاط نهاية JSON في دفعات، أي أنه يمكنك استخدام طلب بيانات JSON واحد كمصدر بيانات لعدة مستهلكين (عدة عناصر <code>amp-state</code> مثلاً) على صفحة AMP. على سبيل المثال، إذا أرسل العنصر <code>amp-state</code> طلب XHR إلى نقطة نهاية، وكان الطلب في رحلته، لن يتم تشغيل جميع طلبات XHR اللاحقة إلى نقطة النهاية ونفسها وسيتم عرض النتائج من طلب XHR الأول.</p> <h1 id="السمات">السمات <a name="attributes"></a></h1> <table> <tbody><tr> <td width="40%"><strong>src</strong></td> <td>هي عنوان URL لنقطة النهاية البعيدة التي ستعرض JSON الذي سيعمل على تعديل <code>amp-state</code> هذا. ويجب أن تكون خدمة CORS HTTP. تتيح السمة <code>src</code> جميع استبدالات متغيرات عنوان URL القياسية. اطّلِع على <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md">دليل الاستبدالات</a> للحصول على المزيد من المعلومات. <div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning-sign"/></svg> </div> <div class="ap-m-tip-content"> يجب أن تنفذ نقطة النهاية المتطلبات المحددة في مواصفات <a href="/ar/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/">طلبات CORS في AMP</a>. </div> </div> </td> </tr> <tr> <td width="40%"><strong>credentials (اختيارية)</strong></td> <td>تعرِّف هذه السمة خيار <code>credentials</code> بالشكل الذي تحدده <a href="https://fetch.spec.whatwg.org/">واجهة برمجة تطبيقات الجلب</a>. <ul> <li>القيم المسموح بها: `omit` و`include`</li> <li>القيمة التلقائية: `omit`</li> </ul> لإرسال بيانات الاعتماد، مرِر قيمة <code>include</code>. إذا تم تعيين هذه القيمة، يجب أن تتبع الاستجابة <a href="/ar/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/#cors-security-in-amp">إرشادات الأمان AMP CORS</a>.</td> </tr> </tbody></table> <h1 id="الدمج-العميق-باستخدام-amp.setstate()">الدمج العميق باستخدام <code>AMP.setState()</code> <a name="deep-merge-with-ampsetstate"></a></h1> <p>عندما يتم استدعاء <code>AMP.setState()</code>، يدمج <code>amp-bind</code> الكائن الحرفي المتوفر بعمق مع الحالة الحالية. تتم كتابة جميع المتغيرات من الكائن الحرفي إلى الحالة مباشرة باستثناء الكائنات المدمجة والتي يتم دمجها بشكل متكرر. يتم دائمًا إلغاء العناصر الأولية والمصفوفات في الحالة بمتغيرات تحمل الاسم نفسه في الكائن الحرفي.</p> <p>راجع المثال التالي:</p> <div class="-ta"><pre><span></span><code><span class="p">{</span> <span class="c"></span> <span class="p">}</span> </code></pre></div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({employee: {name: 'John Smith', age: 47, vehicle: 'Car'}})"</span><span class="err">...</span><span class="p">></</span><span class="nt">button</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({employee: {age: 64}})"</span><span class="err">...</span><span class="p">></</span><span class="nt">button</span><span class="p">></span> </code></pre></div> <p>عند الضغط على الزر الأول، تتغير الحالة إلى:</p> <div class="-ta"><pre><span></span><code><span class="p">{</span> <span class="nx">employee</span><span class="o">:</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'John Smith'</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">47</span><span class="p">,</span> <span class="nx">vehicle</span><span class="o">:</span> <span class="s1">'Car'</span><span class="p">,</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>عند الضغط على الزر الثاني، سيدمج <code>amp-bind</code> الوسيطة الحرفية للكائن <code>{employee: {age: 64}}</code> بشكل متكرر في الحالة الحالية.</p> <div class="-ta"><pre><span></span><code><span class="p">{</span> <span class="nx">employee</span><span class="o">:</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'John Smith'</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">64</span><span class="p">,</span> <span class="nx">vehicle</span><span class="o">:</span> <span class="s1">'Car'</span><span class="p">,</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>تم تعديل <code>employee.age</code> إلا أن المفاتيح <code>employee.name</code> و<code>employee.vehicle</code> لم تتغير.</p> <p>يُذكر أن <code>amp-bind</code> ستعطي خطأ إذا استدعيت <code>AMP.setState()</code> بكائن حرفي يحتوي على مراجع دائرية.</p> <h1 id="إزالة-متغير">إزالة متغير <a name="circular-references"></a></h1> <p>أزِل متغير حالة قائم عن طريق تعيين قيمته إلى القيمة <code>null</code> في <code>AMP.setState()</code>. بالبدء من الحالة في المثال السابق، سيؤدي الضغط إلى:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({employee: {vehicle: null}})"</span><span class="err">...</span><span class="p">></</span><span class="nt">button</span><span class="p">></span> </code></pre></div> <p>تغيير الحالة إلى:</p> <div class="-ta"><pre><span></span><code><span class="p">{</span> <span class="nx">employee</span><span class="o">:</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'John Smith'</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">48</span><span class="p">,</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>بالمثل:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({employee: null})"</span><span class="err">...</span><span class="p">></</span><span class="nt">button</span><span class="p">></span> </code></pre></div> <p>تغيير الحالة إلى:</p> <div class="-ta"><pre><span></span><code><span class="p">{</span> <span class="c"></span> <span class="p">}</span> </code></pre></div> <h1 id="قواعد-التعبيرات">قواعد التعبيرات <a name="expression-grammar"></a></h1> <p>القواعد المشابهة لـ BNF لتعبيرات <code>amp-bind</code>:</p> <div class="-ta"><pre><span></span><code>expr: operation | invocation | member_access | '(' expr ')' | variable | literal operation: '!' expr | '-' expr | '+' expr | expr '+' expr | expr '-' expr | expr '*' expr | expr '/' expr | expr '%' expr | expr '&&' expr | expr '||' expr | expr '<=' expr | expr '<' expr | expr '>=' expr | expr '>' expr | expr '!=' expr | expr '==' expr | expr '?' expr ':' expr invocation: expr '.' NAME args args: '(' ')' | '(' array ')' ; member_access: expr member ; member: '.' NAME | '[' expr ']' variable: NAME ; literal: STRING | NUMBER | TRUE | FALSE | NULL | object_literal | array_literal array_literal: '[' ']' | '[' array ']' array: expr | array ',' expr object_literal: '{' '}' | '{' object '}' object: key_value | object ',' key_value key_value: expr ':' expr </code></pre></div> </section> <section class="ap--help"> <div class="-li"> <span class="-ls">هل تحتاج إلى مزيد من المساعدة؟</span> <p class="-lu">لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.</p> <a href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" class="-n"> <svg class="ap-a-ico -i"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#external"/></svg> <span class="-r">الذهاب إلى Stack Overflow</span> </a> <div class="-la"></div> <span class="-ls">هل وجدت خطأ أو تفتقد لميزة؟</span> <p class="-lu">يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.</p> <a href="https://github.com/ampproject/amphtml" rel="noopener" class="-n link-preview-1"> <svg class="ap-a-ico -i"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#external"/></svg> <span class="-r">الانتقال إلى GitHub</span> </a> <div class="-la"></div> </div> </section> </div> </main> <amp-sidebar id="sidebar-left" class="ap--ampsidebar i-amphtml-layout-nodisplay" layout="nodisplay" side="left" hidden="hidden" i-amphtml-layout="nodisplay"> <nav class="ap--ampsidebar-toolbar" toolbar="(min-width: 768px)" toolbar-target="ap--sidebar-content"> <ul> <div class="ap-m-format-toggle"> <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </span> <span>websites</span> <span class="ap-a-ico ap-m-format-toggle-angle"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </button> <div class="ap-m-format-toggle-formats"> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-stories" href="/ar/documentation/components/stories/amp-bind/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </span> <span>stories</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-ads" href="/ar/documentation/components/ads/amp-bind/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </span> <span>ads</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-email" href="/ar/documentation/components/email/amp-bind/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </span> <span>email</span> </a> </div> </div> <div class="ap-o-sidebar-component"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">3</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-3d-gltf/">amp-3d-gltf</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-3q-player/">amp-3q-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">A</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-access-fewcents/">amp-access-fewcents</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-access-laterpay/">amp-access-laterpay</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-access-poool/">amp-access-poool</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-access-scroll/">amp-access-scroll</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-access/">amp-access</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-accordion/">amp-accordion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-action-macro/">amp-action-macro</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-ad-exit/">amp-ad-exit</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-ad/">amp-ad</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-addthis/">amp-addthis</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-analytics/">amp-analytics</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-anim/">amp-anim</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-animation/">amp-animation</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-apester-media/">amp-apester-media</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-app-banner/">amp-app-banner</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-audio/">amp-audio</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-auto-ads/">amp-auto-ads</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-autocomplete/">amp-autocomplete</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">B</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-base-carousel/">amp-base-carousel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-beopinion/">amp-beopinion</a> </li> <li class="nav-item level-2 active" autoscroll> <a class="nav-link" href="/ar/documentation/components/websites/amp-bind/">amp-bind</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-bodymovin-animation/">amp-bodymovin-animation</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-brid-player/">amp-brid-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-brightcove/">amp-brightcove</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-byside-content/">amp-byside-content</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">C</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-call-tracking/">amp-call-tracking</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-carousel/">amp-carousel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-connatix-player/">amp-connatix-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-consent/">amp-consent</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">D</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-dailymotion/">amp-dailymotion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-date-countdown/">amp-date-countdown</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-date-display/">amp-date-display</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-date-picker/">amp-date-picker</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-delight-player/">amp-delight-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-dynamic-css-classes/">amp-dynamic-css-classes</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">E</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-embedly-card/">amp-embedly-card</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-experiment/">amp-experiment</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">F</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-facebook-comments/">amp-facebook-comments</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-facebook-like/">amp-facebook-like</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-facebook-page/">amp-facebook-page</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-facebook/">amp-facebook</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-fit-text/">amp-fit-text</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-font/">amp-font</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-form/">amp-form</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-fx-collection/">amp-fx-collection</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-fx-flying-carpet/">amp-fx-flying-carpet</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">G</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-geo/">amp-geo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-gfycat/">amp-gfycat</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-gist/">amp-gist</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-google-document-embed/">amp-google-document-embed</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-google-read-aloud-player/">amp-google-read-aloud-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">H</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-hulu/">amp-hulu</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">I</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-iframe/">amp-iframe</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-iframely/">amp-iframely</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-ima-video/">amp-ima-video</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-image-lightbox/">amp-image-lightbox</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-image-slider/">amp-image-slider</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-img/">amp-img</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-imgur/">amp-imgur</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-inline-gallery/">amp-inline-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-inputmask/">amp-inputmask</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-instagram/">amp-instagram</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-install-serviceworker/">amp-install-serviceworker</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-izlesene/">amp-izlesene</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">J</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-jwplayer/">amp-jwplayer</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">K</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-kaltura-player/">amp-kaltura-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">L</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-layout/">amp-layout</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-lightbox-gallery/">amp-lightbox-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-lightbox/">amp-lightbox</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-link-rewriter/">amp-link-rewriter</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-list/">amp-list</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-live-list/">amp-live-list</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">M</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-mathml/">amp-mathml</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-mega-menu/">amp-mega-menu</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-megaphone/">amp-megaphone</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-minute-media-player/">amp-minute-media-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-mowplayer/">amp-mowplayer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-mustache/">amp-mustache</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">N</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-nested-menu/">amp-nested-menu</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-next-page/">amp-next-page</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-nexxtv-player/">amp-nexxtv-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">O</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-o2-player/">amp-o2-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-onetap-google/">amp-onetap-google</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-ooyala-player/">amp-ooyala-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-orientation-observer/">amp-orientation-observer</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">P</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-pan-zoom/">amp-pan-zoom</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-pinterest/">amp-pinterest</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">A</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-pixel/"><a name="amp-pixel"></a> `amp-pixel`</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">P</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-playbuzz/">amp-playbuzz</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-position-observer/">amp-position-observer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-powr-player/">amp-powr-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">R</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-reach-player/">amp-reach-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-recaptcha-input/">amp-recaptcha-input</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-reddit/">amp-reddit</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-render/">amp-render</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-riddle-quiz/">amp-riddle-quiz</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">S</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-script/">amp-script</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-selector/">amp-selector</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-sidebar/">amp-sidebar</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-skimlinks/">amp-skimlinks</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-slikeplayer/">amp-slikeplayer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-smartlinks/">amp-smartlinks</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-social-share/">amp-social-share</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-soundcloud/">amp-soundcloud</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-springboard-player/">amp-springboard-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-sticky-ad/">amp-sticky-ad</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-stream-gallery/">amp-stream-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-subscriptions-google/">amp-subscriptions-google</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-subscriptions/">amp-subscriptions</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">T</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-tiktok/">amp-tiktok</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-timeago/">amp-timeago</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-truncate-text/">amp-truncate-text</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-twitter/">amp-twitter</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">U</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-user-notification/">amp-user-notification</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">V</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-video-docking/">amp-video-docking</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-video-iframe/">amp-video-iframe</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-video/">amp-video</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-vimeo/">amp-vimeo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-vine/">amp-vine</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-viqeo-player/">amp-viqeo-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-vk/">amp-vk</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">W</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-web-push/">amp-web-push</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-wistia-player/">amp-wistia-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-wordpress-embed/">amp-wordpress-embed</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">Y</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-yotpo/">amp-yotpo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ar/documentation/components/websites/amp-youtube/">amp-youtube</a> </li> </ul> </li> </ul> </div> </div> </div> </ul> </nav> </amp-sidebar> <footer class="ap--footer"> <div class="-a"> <div class="-f"> <div class="ap-o-footer-hint">بالتأكيد، تم إنشاء هذا الموقع بواسطة AMP!</div> <div class="-l"> <h5 class="-c">تابعنا</h5> <ul class="-h"> <li class="-p"> <a class="ap-a-ico -d" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"/></svg> </a></li> <li class="-p"> <a class="ap-a-ico -d" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"/></svg></a> </li> </ul> </div> </div> <div class="-v"> <div class="-m"> <h5 class="-g">نظرة عامة</h5> <ul class="-y"> <li class="-b"><a href="/ar/about/websites/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>إطار عمل AMP</a></li> <li class="-b"><a href="/ar/about/use-cases/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>حالات الاستخدام</a></li> <li class="-b"><a href="/ar/success-stories/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>قصص النجاح</a></li> <li class="-b"><a href="/ar/about/how-amp-works/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>الأداء الوظيفي</a></li> </ul> </div> <div class="-m"> <h5 class="-g">مستندات</h5> <ul class="-y"> <li class="-b"><a href="/ar/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>بدء الاستخدام</a></li> <li class="-b"><a href="/ar/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>الأدلّة والبرامج التعليمية</a></li> <li class="-b"><a href="/ar/documentation/components/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>المكونات</a></li> <li class="-b"><a href="/ar/documentation/examples/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>أمثلة</a></li> <li class="-b"><a href="/ar/documentation/templates/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>تصميم النماذج</a></li> <li class="-b"><a href="/ar/documentation/tools/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>الأدوات</a></li> </ul> </div> <div class="-m"> <h5 class="-g">المجتمع</h5> <ul class="-y"> <li class="-b"><a href="/ar/support/faq/platform-and-vendor-partners/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>شركاء المنصّات والمورّدين</a></li> <li class="-b"><a href="/ar/documentation/guides-and-tutorials/contribute/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>مساهمة</a></li> <li class="-b"><a href="/ar/community/roadmap/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>خارطة الطريق</a></li> </ul> <h5 class="-g">OpenJS Foundation</h5> <ul class="-y"> <li class="-b"><a class="-w" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>The OpenJS Foundation</a></li> <li class="-b"><a class="-w" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>OpenJS Foundation Bylaws</a></li> <li class="-b"><a class="-w" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark Policy</a></li> <li class="-b"><a class="-w" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark List</a></li> </ul> </div> <div class="-m"> <h5 class="-g">الفعاليات</h5> <ul class="-y"> <li class="-b"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>مؤتمر AMP لسنة 2020</a></li> <li class="-b"><a href="/ar/events/amp-cs-2019/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>قمة المساهمين في AMP لسنة 2019</a></li> </ul> <h5 class="-g">مواد علامة AMP التجارية </h5> <ul class="-y"> <li class="-b"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>دليل الأسلوب</a></li> <li class="-b"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>شعارات</a></li> </ul> </div> </div> <div class="-k"> <div class="-_"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:31.746%"></i-amphtml-sizer></amp-img> </div> <ul class="-j"> <li class="-q"><a class="-z" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="-q"><a class="-z" href="https://privacy-policy.openjsf.org" rel="noopener">سياسة الخصوصية</a></li> <li class="-q"><a class="-z" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="-te"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed"> <script type="application/json">{"extraUrlParams":{"cd2":"${ampdocHost}"},"requests":{"CWV_EVENT":"${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv","base":"https://google-analytics.com/collect/"},"triggers":{"banner":{"on":"click","selector":"#top-banner","vars":{"event_action":"click","event_category":"components","event_label":"banner","event_name":"banner"}},"breadcrumbLink":{"on":"click","selector":".ap-m-breadcrumbs-crumb","vars":{"event_action":"link","event_category":"components","event_label":"breadcrumbs","event_name":"breadcrumbs"}},"cls":{"extraUrlParams":{"cls":"${cumulativeLayoutShift}"},"on":"visible","request":"CWV_EVENT"},"defaultPageview":{"on":"visible","request":"pageview","vars":{"title":"{{title}}"}},"fid":{"extraUrlParams":{"fid":"${firstInputDelay}"},"on":"visible","request":"CWV_EVENT"},"formatToggle":{"on":"click","selector":".ap-m-format-toggle-link","vars":{"event_action":"link","event_category":"components","event_label":"format-toggle","event_name":"format-toggle"}},"lcp":{"extraUrlParams":{"lcp":"${largestContentfulPaint}"},"on":"visible","request":"CWV_EVENT"},"navigation":{"on":"click","selector":".ap--header a, .ap-o-burger-menu-link","vars":{"event_action":"link","event_category":"components","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"components","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"components","event_label":"scroll","event_name":"scroll"}},"searchButton":{"on":"click","selector":"#searchTriggerOpen","vars":{"event_action":"open","event_category":"search","event_label":"search","event_name":"search"}},"sidebarLink":{"on":"click","selector":".ap-o-sidebar a","vars":{"event_action":"link","event_category":"components","event_label":"sidebar","event_name":"sidebar"}},"sidebarToggle":{"on":"click","selector":"label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]","vars":{"event_action":"toggle","event_category":"components","event_label":"sidebar","event_name":"sidebar"}},"tocLink":{"on":"click","selector":".ap-o-toc a","vars":{"event_action":"link","event_category":"components","event_label":"toc","event_name":"toc"}},"tocToggle":{"on":"click","selector":".ap-o-toc label","vars":{"event_action":"toggle","event_category":"components","event_label":"toc","event_name":"toc"}}},"vars":{"config":{"G-TYM9BH1XCX":{"groups":"default"}},"gtag_id":"G-TYM9BH1XCX"}}</script> </amp-analytics><amp-geo layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"ISOCountryGroups":{"eu":["preset-eea"],"doubleOptIn":["de","at","no","gr","lu"]}}</script> </amp-geo> <amp-consent id="consent" class="-o i-amphtml-layout-nodisplay" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"consentInstanceId":"consent","promptUI":"consent-popup","consentRequired":false,"geoOverride":{"eu":{"consentRequired":true}}}</script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="-u" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="عدم الموافقة"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="قبول استخدام ملفات تعريف الارتباط">فهمت!</button> </div> </amp-consent> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev/serviceworker.html" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"></amp-install-serviceworker> <style amp-keyframes>@keyframes duepduep{0%{transform:translate(0)}49%{transform:translate(40px)}50%{transform:translate(-40px)}to{transform:translate(0)}}@keyframes moveSidebarToggleBackwards{0%{transform:translateX(calc(90vw - 50%))}to{transform:translateX(0)}}@keyframes moveSidebarToggleForwards{0%{transform:translateX(0)}to{transform:translateX(calc(90vw - 50%))}}</style></body></html>