当前位置:

首页 > 系统应用 > ionic select

ionic select

和原生的 select 比起来,ionic select 在外观上确实更精致,也更符合整体界面的视觉风格。不过真正弹出来的可选项样式,走的仍然是浏览器默认那一套。 不同平台里,这类可选项的呈现方式并不统一:在 PC 端浏览器中,通常看到的是传统的下拉菜单;到了 Android 上,一般会弹出单选按钮

本文目录

    和原生的 select 比起来,ionic select 在外观上确实更精致,也更符合整体界面的视觉风格。不过真正弹出来的可选项样式,走的仍然是浏览器默认那一套。

    ionic select

    不同平台里,这类可选项的呈现方式并不统一:在 PC 端浏览器中,通常看到的是传统的下拉菜单;到了 Android 上,一般会弹出单选按钮列表;而在 iOS 里,则会显示滚轮式的操作界面。

    实例

    Lightsaber
    Fighter
    Droid
    Planet

    运行效果如下:

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系bd@zhengruan.com
    作者最新文章
    系统应用
    上一篇: ionic tab(选项卡)
    相关文章 更多
    ionic 教程
    ionic 教程

    ionic 是一套相当成熟的 HTML5 应用开发框架(HTML5 Hybrid Mobile App Framework)。 它的价值就在于,能够把 HTML、CSS 和 Ja vascript 这些常见的 Web 技术,真正用到移动应用开发里,做出体验上尽可能贴近原生应用的产品。 ionic 主

    ionic 安装
    ionic 安装

    本站实例采用了ionic v1.3.2 版本,使用的 CDN 库地址: ionic 最新版本下载地址:http://ionicframework.com/docs/overview/#download。 下载后解压压缩包,包含以下目录: css/ => 样式文件 fonts/ => 字体文件 js/

    ionic 创建 APP
    ionic 创建 APP

    前面的章节中我们已经学会了 ionic 框架如何导入到项目中。 接下来我们将为大家介绍如何创建一个 ionic APP 应用。 ionic 创建 APP 使用 HTML、CSS 和 Ja vascript 来构建,所以我们可以创建一个 www 目录,并在目录下创建 index.html 文件,代码如

    ionic 头部与底部
    ionic 头部与底部

    Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。 ionic 默认提供了许多种颜色样式,你可以调用不同的样式名,当然也可以自定义一个。 bar-light bar-light bar-stable bar-stable bar-positive bar-pos

    ionic 按钮
    ionic 按钮

    按钮是移动app不可或缺的一部分,不同风格的app,需要的不同按钮的样式。 默认情况下,按钮显示样式为:display: inline-block。 Default button-light button-stable button-positive button-calm button-balan

    ionic 列表
    ionic 列表

    列表是一个应用广泛的界面元素,在所有移动app中几乎都会使用到。 列表可以是基本文字、按钮,开关,图标和缩略图等。 列表项可以是任何的HTML元素。容器元素需要list类,每个列表项需要使用item类。 ionList和ionItem可以很容易的支持各种交互方式,比如,滑动编辑,拖动排序,以及删除项

    ionic 卡片
    ionic 卡片

    近年来卡片(card)的应用越来越流行,卡片提供了一个更好组织信息展示的工具。 针对移动端的应用,卡片会根据屏幕大小自适应大小。 我们可以很灵活的控制卡片的显示效果,甚至实现动画效果。 卡片一般放在页面顶部,当然也可以实现左右切换的功能。 基本卡片,包含了文本信息。 默认情况下,卡片(card)这类

    ionic 表单和输入框
    ionic 表单和输入框

    list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。 输入框属性:placeholder 来看这个例子:这里的输入框默认都会撑满 100% 宽度,也就是左右两侧不带边框;同时,通过 placeholder 属性给输入字段预先放上一段提示文字,方便用

    ionic toggle(切换开关)
    ionic toggle(切换开关)

    切换开关和 HTML 里的 checkbox 标签本质上很接近,不过在移动设备上,它用起来通常更顺手,交互体验也更自然。 切换开关可以使用 toggle-assertive 来指定颜色。 这个示例展示的是一组可切换的开关列表。需要注意的是,每个选项除了保留 item 类之外,还必须额外加上 item

    ionic range
    ionic range

    ionic Range 本质上就是一个滑块控件,ionic 也顺手给它准备了不少开箱即用的默认样式。更方便的是,这个组件的适配性很高,不管是放在列表里,还是用在 Card 这类元素中,都能直接使用。 实例 Ranges In A List 实际运行后的效果如下所示:

    查看更多
    精品专题 更多
    装机必备
    装机必备

    正软商城装机必备专区,精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件,帮助用户快速完成新电脑软件配置。

    Windows
    Windows

    正软商城Windows软件专区,汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件,提供软件介绍、系统要求、正版授权及购买下载服务。

    PDF教程
    PDF教程

    正软商城PDF教程频道提供PDF编辑、转换、合并、拆分、压缩及格式处理方法,同时介绍常用PDF软件和工具的使用技巧。

    Mac软件 更多
    讯飞智作 网页版
    讯飞智作 网页版
    Windows/ macOS/ Linux

    讯飞智作是一款基于语音合成技术、虚拟人驱动技术与数字人形象声音构建能力的 AI 数字人音视频创作平台。

    火山引擎 网页版
    火山引擎 网页版
    Windows/ macOS/ Linux

    火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力,依托字节自研豆包多模态大模型,凭借火山方舟一站式平台,提供模型精调、推理部署、智能应用搭建等全链路服务,结合高性能AI算力,助力各行业快速落地大模型数字化与智能化应用。

    Aperty macOS版
    Aperty macOS版
    macOS

    Aperty 是 Skylum 推出的 AI 人像修图软件,支持自然肤质修饰、瑕疵处理、面部与身体调整、预设及批量同步。

    WINDOWS 更多
    讯飞智作 网页版
    讯飞智作 网页版
    Windows/ macOS/ Linux

    讯飞智作是一款基于语音合成技术、虚拟人驱动技术与数字人形象声音构建能力的 AI 数字人音视频创作平台。

    火山引擎 网页版
    火山引擎 网页版
    Windows/ macOS/ Linux

    火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力,依托字节自研豆包多模态大模型,凭借火山方舟一站式平台,提供模型精调、推理部署、智能应用搭建等全链路服务,结合高性能AI算力,助力各行业快速落地大模型数字化与智能化应用。

    PixTV 网页版
    PixTV 网页版
    Windows

    PixTV 是一款在浏览器中使用的 AI 视觉内容创作平台,提供图片、视频、音频、文字生成、AI 分镜、局部重绘、提示词反推和无限画布等工具,适合短剧、漫剧、广告及社交媒体内容制作。