AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • 網站

動態手風琴

在 Playground 中開啟

簡介

這段程式碼範例展示如何使用 amp-bind 和 amp-list 動態更新 amp-accordion 區段中的資料。

設定

匯入 amp-accordion 元件以在手風琴中顯示內容。

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

匯入 amp-bind 元件以根據使用者輸入更新手風琴狀態。

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

匯入 amp-list 元件以動態顯示炎熱或寒冷國家的名稱。

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

匯入 amp-mustache 元件以動態顯示來自 amp-list 的項目。

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

實作

如果選擇「炎熱」，input 區段會將 amp-state 設定為 {climate: 1}；如果選擇「寒冷」，則設定為 {climate: 2}。 amp-accordion 預設為隱藏，但如果 climate != 0 (因此必須選擇炎熱或寒冷)，則會顯示。

<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>

手風琴

每個 amp-accordion 區段都是不同的洲，因此 climateCountries 資料也必須按洲篩選。此篩選在 amp-list 的 [src] 區段中完成。此外，高度會根據篩選狀態中的項目數量動態設定。

climateCountries 的 src 會根據使用者輸入而動態變化。如果 {climate == 1}，則 climateCountries 資料會從 hot.json 檔案中提取。否則，如果 {climate == 2}，則 climateCountries 資料會從 cold.json 檔案中提取

<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>
需要更詳細的說明嗎？

如果此頁面上的說明無法解答您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow
有未說明的特色功能？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別關注的問題提供一次性貢獻。

在 GitHub 上編輯範例