# radio

基础输入框组件，特殊的list item ，建议配合 list 容器使用

# 1. DOM 结构

pro-radio
- pro-radio__control: 'radio'类型的input
- pro-radio__pic: label前置元素
- pro-radio__text: label提示
- pro-radio__pick-icon: 勾选后的图标元素

# 2. 样式

1. 单项选择

火车

飞机

汽车

2. 带左侧图标的单项选择

水果

蔬菜

冰激凌

3. 单项筛选

<q-demo class="pro-demo--radio">
  <div class="pro-list">
    <div class="pro-list__hd">1. 单项选择</div>
    <div class="pro-list__bd">
      <div class="pro-radio pro-list-line">
        <input type="radio" name="one" class="pro-radio__control" disabled checked>
        <div class="pro-radio__pic pro-radio__pic--disabled"></div>
        <div class="pro-radio__text pro-radio__text--disabled">
          火车
        </div>
        <div class="pro-radio__pick-icon pro-radio__pick-icon--default pro-radio__pick-icon--disabled">
          <i class="iconfont icon-selectDownRadio" style="font-size: 18px"></i>
        </div>
      </div>
      <div class="pro-radio pro-list-line">
        <input type="radio" name="one" class="pro-radio__control">
        <div class="pro-radio__pic"></div>
        <div class="pro-radio__text">
          飞机
        </div>
        <div class="pro-radio__pick-icon pro-radio__pick-icon--default">
          <i class="iconfont icon-selectDownRadio" style="font-size: 18px"></i>
        </div>
      </div>
      <div class="pro-radio pro-list-line">
        <input type="radio" name="one" class="pro-radio__control" >
        <div class="pro-radio__pic"></div>
        <div class="pro-radio__text">
          汽车
        </div>
        <div class="pro-radio__pick-icon pro-radio__pick-icon--default">
          <i class="iconfont icon-selectDownRadio" style="font-size: 18px"></i>
        </div>
      </div>
    </div>
  </div>

  <div class="pro-list">
    <div class="pro-list__hd">2. 带左侧图标的单项选择</div>
    <div class="pro-list__bd">
      <div class="pro-radio pro-list-line">
        <input type="radio" name="two" class="pro-radio__control">
        <div class="pro-radio__pic pro-radio__pic--default"></div>
        <div class="pro-radio__text">
          水果
        </div>
        <div class="pro-radio__pick-icon pro-radio__pick-icon--default">
          <i class="iconfont icon-success" style="font-size: 18px"></i>
        </div>
      </div>
      <div class="pro-radio pro-list-line">
        <input type="radio" name="two" class="pro-radio__control" checked>
        <div class="pro-radio__pic pro-radio__pic--default"></div>
        <div class="pro-radio__text">
          蔬菜
        </div>
        <div class="pro-radio__pick-icon pro-radio__pick-icon--default">
          <i class="iconfont icon-success" style="font-size: 18px"></i>
        </div>
      </div>
      <div class="pro-radio pro-list-line">
        <input type="radio" name="two" class="pro-radio__control">
        <div class="pro-radio__pic pro-radio__pic--default"></div>
        <div class="pro-radio__text">
          冰激凌
        </div>
        <div class="pro-radio__pick-icon pro-radio__pick-icon--default">
          <i class="iconfont icon-success" style="font-size: 18px"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="pro-list">
    <div class="pro-list__hd">3. 单项筛选</div>
    <div class="pro-tag-group">
      <div class="pro-tag selected">选项卡一</div>
      <div class="pro-tag">选项卡二</div>
      <div class="pro-tag">选项卡三</div>
      <div class="pro-tag">选项卡四</div>
      <div class="pro-tag">选项卡五</div>
    </div>
  </div>
</q-demo>