#原生选择器
安装Terminal
npm install @a3s-lab/ui@0.2.0<select class="select" aria-label="Fruit">
<option value="">Select a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="blueberry">Blueberry</option>
<option value="pineapple">Pineapple</option>
</select>import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";#用途
Include CSS
导入 Tailwind 和一个完整的 A3S UI 样式包。
@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";或者只导入基本CSS、原生选择CSS组件和一个样式包。
@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/native-select.css";
@import "@a3s-lab/ui/styles/a3s.css";使用CDN或批量程序导入？请参见安装页。
Add your native select HTML
Add class="select" to a native <select>. Use standard <option> and <optgroup> elements.
<select class="select" aria-label="Fruit">
<option value="">Select a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="blueberry">Blueberry</option>
<option value="pineapple">Pineapple</option>
</select>使用 Native Select 实现原生浏览器行为、表单集成和移动优化选择器。使用 Select 自定义选项内容、多选行为或 JavaScript API。
#示例
#组
<select class="select w-full" aria-label="Food">
<option value="">Select food</option>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="blueberry">Blueberry</option>
</optgroup>
<optgroup label="Vegetables">
<option value="carrot">Carrot</option>
<option value="potato">Potato</option>
<option value="tomato">Tomato</option>
</optgroup>
</select>#已禁用
<select class="select w-full" aria-label="Fruit" disabled>
<option value="">Select a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>#无效
Select a fruit to continue.
<div role="group" class="field" data-invalid="true">
<label for="native-select-invalid">Fruit</label>
<select id="native-select-invalid" class="select w-full" aria-invalid="true" aria-describedby="native-select-invalid-error">
<option value="">Select a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
<p id="native-select-invalid-error" role="alert">Select a fruit to continue.</p>
</div>#尺寸
<div class="flex flex-wrap items-center gap-3">
<select class="select w-42" aria-label="Default size">
<option>Default</option>
<option>Apple</option>
<option>Banana</option>
</select>
<select class="select w-42" data-size="sm" aria-label="Small size">
<option>Small</option>
<option>Apple</option>
<option>Banana</option>
</select>
</div>#RTL
在选择元素或父元素上设置 dir="rtl"。
<select dir="rtl" class="select w-full" aria-label="الفاكهة">
<option value="">اختر فاكهة</option>
<option value="apple">تفاح</option>
<option value="banana">موز</option>
<option value="blueberry">توت</option>
</select>