选择器

默认

演示

代码

HTML

代码

JSX/TSX

<select class="select success">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

<select className='select success'>
  <option>
    Option 1
  </option>
  <option>
    Option 2
  </option>
  <option>
    Option 3
  </option>
</select>

Solid 实体

演示

代码

HTML

代码

JSX/TSX

<select class="select solid danger">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

<select className='select solid danger'>
  <option>
    Option 1
  </option>
  <option>
    Option 2
  </option>
  <option>
    Option 3
  </option>
</select>

Ghost 幽灵

演示

代码

HTML

代码

JSX/TSX

<select class="select ghost success">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

<select className='select ghost success'>
  <option>
    Option 1
  </option>
  <option>
    Option 2
  </option>
  <option>
    Option 3
  </option>
</select>

Pill 圆角

演示

代码

HTML

代码

JSX/TSX

<select class="select pill success">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

<select className='select pill success'>
  <option>
    Option 1
  </option>
  <option>
    Option 2
  </option>
  <option>
    Option 3
  </option>
</select>

禁用状态

演示

代码

HTML

代码

JSX/TSX

<select class="select success" disabled="{true}">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

<select className='select success'
  disabled={true}>
  <option>
    Option 1
  </option>
  <option>
    Option 2
  </option>
  <option>
    Option 3
  </option>
</select>

尺寸

使用 xs sm md lg xl 类名来控制组件尺寸.

演示

代码

HTML

代码

JSX/TSX

<div class="grid gap-4">
	<select class="select success xs">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
	<select class="select success sm">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
	<select class="select success md">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
	<select class="select success lg">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
	<select class="select success xl">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
</div>

<div className='grid gap-4'>
  <select className='select success xs'>
    <option>
      Option 1
    </option>
    <option>
      Option 2
    </option>
    <option>
      Option 3
    </option>
  </select>
  <select className='select success sm'>
    <option>
      Option 1
    </option>
    <option>
      Option 2
    </option>
    <option>
      Option 3
    </option>
  </select>
  <select className='select success md'>
    <option>
      Option 1
    </option>
    <option>
      Option 2
    </option>
    <option>
      Option 3
    </option>
  </select>
  <select className='select success lg'>
    <option>
      Option 1
    </option>
    <option>
      Option 2
    </option>
    <option>
      Option 3
    </option>
  </select>
  <select className='select success xl'>
    <option>
      Option 1
    </option>
    <option>
      Option 2
    </option>
    <option>
      Option 3
    </option>
  </select>
</div>

单选框步骤条