Dynamic Accordion
Introduction
This code snippet shows how you can dynamically update data in amp-accordionsections using amp-bind and amp-list.
Setup
Import the amp-accordion component to display content in accordion.
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script> Import the amp-bind component to update accordion state based on user input.
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> Import the amp-list component to dynamically display the names of hot or cold countries.
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> Import the amp-mustache component to dynamically display items from amp-list.
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> Implementation
The input section sets amp-state as {climate: 1} if 'Hot' is selected and {climate: 2} if 'Cold' is selected. The amp-accordion is hidden by default, but displayed if climate != 0 (so either hot or cold must be selected).
<input type="radio" id="f-option1" name="selector1" role="button" tabindex="0" on="change:AMP.setState({climate:(event.checked) ? 1 : 0})"> <label for="f-option1">Warm</label> <input type="radio" id="f-option2" name="selector1" on="change:AMP.setState({climate: (event.checked) ? 2 : 0})" role="button" tabindex="0"> <label for="f-option2">Cold</label> Accordion
Each amp-accordion section is a different continent, therefore the climateCountries data also must be filtered by continent. This filtering is done in the [src] section of amp-list. Additionally, height is dynamically set based on number of items in filtered state.
The src for climateCountries is dynamic based on user input. If {climate == 1} then climateCountries data is pulled from the hot.json file. Else, if {climate == 2} then climateCountries data is pulled from the cold.json file
The accordion below lists countries, organized by continent, that match the climate you chose.
Asia
- {{Name}}
Europe
- {{Name}}
South America
- {{Name}}
North America
- {{Name}}
<div id="accordion" [hidden]="climate == 0" hidden> <p>The accordion below lists countries, organized by continent, that match the climate you chose. </p> <amp-state id="climateCountries" [src]="climate == 1 ? '/static/samples/json/hot.json': climate == 2 ? '/static/samples/json/cold.json': ''"> </amp-state> <amp-accordion> <section> <h4> Asia </h4> <amp-list layout="fixed-height" height="0" binding="refresh" [src]="climateCountries.countries.filter(country => country.continent == 'Asia')" [is-layout-container]="true"> <template type="amp-mustache"> <ul> <span>{{Name}}</span> </ul> </template> </amp-list> </section> <section> <h4> Europe </h4> <amp-list layout="fixed-height" height="0" binding="refresh" [src]="climateCountries.countries.filter(country => country.continent == 'Europe')" [is-layout-container]="true"> <template type="amp-mustache"> <ul> <span>{{Name}}</span> </ul> </template> </amp-list> </section> <section> <h4> South America </h4> <amp-list layout="fixed-height" height="0" binding="refresh" [src]="climateCountries.countries.filter(country => country.continent == 'South America')" [is-layout-container]="true"> <template type="amp-mustache"> <ul> <span>{{Name}}</span> </ul> </template> </amp-list> </section> <section> <h4> North America </h4> <amp-list layout="fixed-height" height="0" binding="refresh" [src]="climateCountries.countries.filter(country => country.continent == 'North America')" [is-layout-container]="true"> <template type="amp-mustache"> <ul> <span>{{Name}}</span> </ul> </template> </amp-list> </section> </amp-accordion> </div> Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.
Vai a Stack Overflow Ci sono funzioni non descritte?Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.
Modifica esempio in GitHub-