ionic 教程
1. ionic 教程 2. ionic 安装 3. ionic 创建 APP 4. ionic 头部与底部 5. ionic 按钮 6. ionic 列表 7. ionic 卡片 8. ionic 表单和输入框 9. ionic toggle(切换开关) 10. ionic checkbox 11. ionic 单选框 12. ionic range 13. ionic select 14. ionic tab(选项卡) 15. ionic 网格(Grid) 16. ionic 颜色 17. ionic 上拉菜单(ActionSheet) 18. ionic 背景层 19. ionic 下拉刷新 20. ionic 复选框 21. ionic 单选框操作 22. ionic 切换开关操作 23. ionic 手势事件 24. ionic 头部和底部 25. ionic 列表操作 26. ionic 加载动作 27. ionic 模态窗口 28. ionic 导航 29. ionic 平台 30. ionic 浮动框 31. ionic 对话框 32. ionic 滚动条 33. ionic 侧栏菜单 34. ionic 滑动框 35. ionic 加载动画 36. ionic 选项卡栏操作

ionic select

ionic select

ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。

每个平台上的可选项样式都是不一样的,在PC电脑的浏览器上,你会看到传统的下拉界面,Android 上会弹出单选按钮选项,iOS 有个滚轮操作界面。

实例


<div class="list">



  <div class="item item-input item-select">

    <div class="input-label">

      Lightsaber

    </div>

    <select>

      <option>Blue</option>

      <option selected="">Green</option>

      <option>Red</option>

    </select>

  </div>



  <div class="item item-input item-select">

    <div class="input-label">

      Fighter

    </div>

    <select>

      <option>ARC-170</option>

      <option>A-wing</option>

      <option>Delta-7</option>

      <option>Naboo N-1</option>

      <option>TIE</option>

      <option selected="">X-wing</option>

      <option>Y-wing</option>

    </select>

  </div>



  <div class="item item-input item-select">

    <div class="input-label">

      Droid

    </div>

    <select>

      <option>2-1B</option>

      <option>B1</option>

      <option>C-3PO</option>

      <option>IG-88</option>

      <option>IT-O</option>

      <option selected="">R2-D2</option>

    </select>

  </div>



  <div class="item item-input item-select">

    <div class="input-label">

      Planet

    </div>

    <select>

      <option>Alderaan</option>

      <option selected="">Dagobah</option>

      <option>Felucia</option>

      <option>Geonosis </option>

      <option>Hoth</option>

      <option>Kamino</option>

      <option>Mygeeto</option>

      <option>Naboo</option>

      <option>Tataouine</option>

      <option>Utapau</option>

      <option>Yavin</option>

    </select>

  </div>



</div>

运行效果如下: