筛选器
筛选器是一组单选按钮。选择其中一个选项将隐藏其他选项，并在所选选项旁边显示一个重置按钮。
| 类名 | 类型 | |
|---|---|---|
| filter | 组件 | 用于包含用于筛选项目的单选按钮的 HTML <form> 或 <div> 元素 |
| filter-reset | 部件 | 如果您无法使用 HTML 表单，则可以使用重置按钮的替代方案 |
用于筛选项目的 HTML 表单
<form class="$$filter"> <input class="$$btn $$btn-square" type="reset" value="×"/> <input class="$$btn" type="radio" name="frameworks" aria-label="Svelte"/> <input class="$$btn" type="radio" name="frameworks" aria-label="Vue"/> <input class="$$btn" type="radio" name="frameworks" aria-label="React"/> </form>
<form class="$$filter">
<input class="$$btn $$btn-square" type="reset" value="×"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="Svelte"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="Vue"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="React"/>
</form>
<form class="$$filter">
<input class="$$btn $$btn-square" type="reset" value="×"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="Svelte"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="Vue"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="React"/>
</form>
<form class="$$filter">
<input class="$$btn $$btn-square" type="reset" value="×"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="Svelte"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="Vue"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="React"/>
</form>如果您因某些原因无法使用 HTML 表单，请使用此方法
<div class="$$filter"> <input class="$$btn $$filter-reset" type="radio" name="metaframeworks" aria-label="All"/> <input class="$$btn" type="radio" name="metaframeworks" aria-label="Sveltekit"/> <input class="$$btn" type="radio" name="metaframeworks" aria-label="Nuxt"/> <input class="$$btn" type="radio" name="metaframeworks" aria-label="Next.js"/> </div>
<div class="$$filter">
<input class="$$btn $$filter-reset" type="radio" name="metaframeworks" aria-label="All"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Sveltekit"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Nuxt"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Next.js"/>
</div>
<div class="$$filter">
<input class="$$btn $$filter-reset" type="radio" name="metaframeworks" aria-label="All"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Sveltekit"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Nuxt"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Next.js"/>
</div>
<div class="$$filter">
<input class="$$btn $$filter-reset" type="radio" name="metaframeworks" aria-label="All"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Sveltekit"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Nuxt"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Next.js"/>
</div>您有问题吗？ 在 GitHub 上提问 或 Discord 服务器
您发现错误了吗？ 在 GitHub 上提交 issue
您喜欢 daisyUI 吗？ 发布推文！
支持 daisyUI 的开发： Open Collective
