主動狀態

Framework7 使用所謂的「主動狀態」來突顯您點按時的連結和按鈕。這樣做是為了讓 Framework7 應用程式表現得像原生應用程式，而不是像網路應用程式。

它的運作方式幾乎與 CSS :active 選擇器相同，它會在您點按連結和按鈕時，為它們新增 active-state 類別。唯一的差別是它會在短暫的時間間隔後新增這個類別，這可以防止在頁面捲動時出現錯誤的突顯。

因此，當您撰寫 CSS 樣式時，您應該撰寫類似這樣的主動狀態

/* Usual state */
.my-button {
    color: red;
}
/* Active/tapped state */
.my-button.active-state {
    color: blue;
}

您可以在 touch.activeStateElements 應用程式參數 中控制哪些元素會接收 active-state 類別。

在某些情況下，您可能會遇到巢狀主動狀態元素。您可以透過將 prevent-active-state-propagation 類別新增到子主動狀態元素，來防止在父元素上設定主動狀態

<div class="card card-expandable">
  <div class="card-content">
    <!-- Tap on button will prevent setting active-state on parent card -->
    <a class="button prevent-active-state-propagation">...</a>
  </div>
</div>

若要停用在元素本身（及其子元素）上設定主動狀態類別，我們需要將 no-active-state 類別新增到該元素

<!-- link without active-state -->
<a href="..." class="link no-active-state">...</a>