星塔旅人WIKI

<includeonly>
<!-- 主筛选器模板 -->
<div class="filter-container" id="filter-{{{id|default}}}">
  
  <!-- 标题栏 -->
  <div class="filter-header">
    <h3>{{{title|筛选}}}</h3>
    <div class="filter-actions"><span class="filter-action filter-apply" tabindex="0" role="button">{{{applyText|应用}}}</span><span class="filter-action filter-reset" tabindex="0" role="button">{{{resetText|重置}}}</span>
    </div>
  </div>
  
  <!-- 筛选器内容 -->
  <div class="filter-content">
    <!-- 筛选器组 -->
    <div class="filter-groups">
      {{{groups|}}}
    </div>
  </div>
  
  <!-- 当前筛选状态 -->
  <div class="active-filters"><span class="active-filters-label">当前筛选：</span>
    <div class="active-filters-list"></div>
  </div>
  
  <!-- 结果统计 -->
  <div class="filter-stats">共 <span class="filter-total">0</span> 条，显示 <span class="filter-showing">0</span> 条
  </div>
</div>

<!-- 隐藏的配置 -->
<div class="filter-config" 
     data-filter-target="{{{target|}}}" 
     data-filter-auto="{{{auto|false}}}" 
     data-filter-id="filter-{{{id|default}}}">
</div>
</includeonly>

<noinclude>
== 使用方法 ==

=== 示例1：基本筛选器 ===
<pre>
{{筛选器
|id = basic
|title = 干员筛选
|target = .operator-card
|applyText = 筛选
|resetText = 重置
|groups = 
<div class="filter-group" data-filter-group="type">
  <h4>职业</h4>
  <div class="filter-options">
    {{筛选项|type|先锋|先锋}}
    {{筛选项|type|辅助|辅助}}
    {{筛选项|type|均衡|均衡}}
  </div>
</div>
}}
</pre>

=== 示例2：完整筛选器 ===
<pre>
{{筛选器
|id = full
|title = 干员高级筛选
|target = .operator-item
|applyText = 应用筛选
|resetText = 重置所有
|auto = true
|groups = 
<div class="filter-group" data-filter-group="type">
  <h4>职业类型</h4>
  <span class="filter-group-clear" data-filter-clear="type">清除</span>
  <div class="filter-options">
    <div class="filter-option filter-option-all filter-selected" 
         data-filter-group="type" 
         data-filter-value="all" 
         data-filter-display="全部" 
         tabindex="0" 
         role="button">
      <span class="filter-option-label">全部</span>
    </div>
    {{筛选项|type|先锋|先锋}}
    {{筛选项|type|辅助|辅助}}
    {{筛选项|type|医疗|医疗}}
    {{筛选项|type|狙击|狙击}}
    {{筛选项|type|重装|重装}}
  </div>
</div>
<div class="filter-group" data-filter-group="rarity">
  <h4>稀有度</h4>
  <span class="filter-group-clear" data-filter-clear="rarity">清除</span>
  <div class="filter-options">
    <div class="filter-option filter-option-all filter-selected" 
         data-filter-group="rarity" 
         data-filter-value="all" 
         data-filter-display="全部" 
         tabindex="0" 
         role="button">
      <span class="filter-option-label">全部</span>
    </div>
    {{筛选项|rarity|6|★★★★★★}}
    {{筛选项|rarity|5|★★★★★}}
    {{筛选项|rarity|4|★★★★}}
    {{筛选项|rarity|3|★★★}}
  </div>
</div>
<div class="filter-group" data-filter-group="attribute">
  <h4>属性</h4>
  <span class="filter-group-clear" data-filter-clear="attribute">清除</span>
  <div class="filter-options">
    <div class="filter-option filter-option-all filter-selected" 
         data-filter-group="attribute" 
         data-filter-value="all" 
         data-filter-display="全部" 
         tabindex="0" 
         role="button">
      <span class="filter-option-label">全部</span>
    </div>
    {{筛选项|attribute|fire|火}}
    {{筛选项|attribute|water|水}}
    {{筛选项|attribute|wind|风}}
    {{筛选项|attribute|thunder|雷}}
    {{筛选项|attribute|ice|冰}}
  </div>
</div>
}}
</pre>
</noinclude>