ionic 表单和输入框

收藏95

阅读27907

更新时间2022-04-11

list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。

输入框属性:placeholder

以下实例中,默认为100%宽度(左右两侧没有边框),并使用 placeholder 属性设置输入字段预期值的提示信息。


  
    
  
  
    
  
  
    
  


输入框属性:input-label

使用 input-label 将标签放置于输入框 input 的左侧。


  
    用户名:
    
  
  
    密码:
    
  



堆叠标签

堆叠标签通常位于输入框的头部。每个选项使用 item-stacked-label 类指定。 每个输入框需要指定 input-label。以下实例也使用了 placeholder 属性来设置信息输入提示。


  
    First Name
    
  
  
    Last Name
    
  
  
    Email
    
  



浮动标签

浮动标签类似于堆叠标签,但浮动标签有一个动画的效果,每个选项需要指定 item-floating-label 类,输入标签需要指定 input-label。


  
    First Name
    
  
  
    Last Name
    
  
  
    Email
    
  



内嵌表单

默认情况下每个输入域宽度都是100%,但我们可以使用 list list-inset 或 card 类设置表单的内边距(padding), card 类带有阴影。


  
    
  
  
    
  



内嵌输入域

使用 list-inset 设置内嵌实体列表。 使用 item-input-inset 样式可以内嵌一个按钮。



  
    
      
    
    
      Submit
    
  



带图标的输入框

item-input  输入框可以很简单的添加图标。 图标可以在 前添加。


  
    
    
  



头部输入框

输入框可放置在头部,并可添加提交或取消按钮。


  
    
    
  
  
    取消
  


ionic 卡片

ionic Toggle

相关

视频

RELATED VIDEOS

更多

免费

极客学院jQueryMobile视频教程

免费

极客学院Swift语言视频教程

免费

尚学堂Swift入门视频教程

免费

微信小程序--企业微网站

免费

Flutter基础视频教程
中级 Flutter基础视频教程

28784次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

热门下载

更多
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号