Ionic输入 _Ionic输入

本文概述

列表中的输入
多行文字输入

Ionic输入是必不可少的组件, 可用于安全地收集和处理用户输入。它是HTML输入元素的包装, 其中包含自定义样式和其他功能。它的工作方式类似于HTML输入元素, 但在台式机设备上运行良好, 并且可以与移动设备上的键盘集成。
Ionic输入仅接受文本类型的输入, 例如“文本”, “密码”, “数字”, “电子邮件”, “搜索”, “ tel”和“ URL”。它还支持所有标准的文本类型输入事件, 包括按键, 按键, 击键等。
有许多可用的属性可用于设置输入字段的样式。这些在下面列出。

固定内联标签
浮动标签
内联标签
占位符标签
堆叠标签

固定内联标签
它用于在输入元素的左侧放置标签。输入文本后, 标签不会隐藏。你也可以将占位符文本与固定标签一起使用。你可以使用以下语法在< ion-label> 元素中添加fixed属性。

< ion-label position="fixed"> Username< /ion-label>

浮动标签
它们是选择输入时动画或浮动的标签。你可以使用以下语法在< ion-label> 元素中添加float属性。

< ion-label position="floating"> Username< /ion-label>

内联标签
如果< ion-label> 没有任何属性, 则称为内联标签。输入文本时不会隐藏。以下语法说明了内联标签。

< ion-label> Username< /ion-label>

占位符标签
占位符将默认位置保留为提示或标题。当你在输入中输入文本时, 占位符标签会自动隐藏。你可以使用以下语法在< ion-label> 元素中添加占位符属性。

< ion-input type="text" placeholder="Username"> < /ion-input>

堆叠标签
这种类型的标签始终显示在输入的顶部。你可以将占位符文本与堆叠标签一起使用。你可以通过以下语法在< ion-label> 元素中添加stacked属性。

< ion-label position="stacked"> Username< /ion-label>

以下示例显示了Ionic框架中使用的不同类型的输入。
例

< ion-header> < ion-toolbar> < ion-title> IonicInputs < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light"> < div> < !-- Default Input --> < ion-input> < /ion-input> < !-- Input with value --> < ion-input value="http://www.srcmini.com/custom"> < /ion-input> < !-- Input with placeholder --> < ion-input placeholder="Enter Input"> < /ion-input> < !-- Number type input --> < ion-input type="number" value="http://www.srcmini.com/1100"> < /ion-input> < !-- Input with clear button when the value is available --> < ion-input clearInput value="http://www.srcmini.com/clear me"> < /ion-input> < !-- Disabled input --> < ion-input value="http://www.srcmini.com/Disabled" disabled> < /ion-input> < !-- Readonly input --> < ion-input value="http://www.srcmini.com/Readonly" readonly> < /ion-input> < /div> < /ion-content>

输出量

文章图片
列表中的输入以下示例有助于理解如何将输入元素与列表组件一起使用。
例

< ion-header> < ion-toolbar> < ion-title> IonicInputs < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light" fullscreen> < ion-list> < ion-item> < ion-label> Username< /ion-label> < ion-input type="text"> < /ion-input> < /ion-item> < ion-item> < ion-label> Password< /ion-label> < ion-input type="password"> < /ion-input> < /ion-item> < /ion-list> < div padding> < ion-button color="primary" expand="block"> Sign In< /ion-button> < /div> < /ion-content>

输出量

文章图片
多行文字输入如果要编写多行文本输入, 可以使用< ion-textarea> 组件。该组件使Ionic可以更好地处理用户体验和文本区域的交互性。与本地文本区域元素不同, < ion-textarea> 不支持从内部内容中加载其值。你可以在value属性中设置textarea值。
< ion-textarea> 组件接受除Ionic属性之外的所有本机textarea属性。
例
以下示例显示了在Ionic应用程序中< ion-textarea> 组件的用法。

< ion-header> < ion-toolbar> < ion-title> IonicInputs < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light" fullscreen> < !-- Textarea in an item with a placeholder --> < ion-item> < ion-textarea placeholder="Enter information here..."> < /ion-textarea> < /ion-item> < !-- Disabled and readonly textarea in an item with a stacked label --> < ion-item> < ion-label position="stacked"> Summary< /ion-label> < ion-textarea disabled readonly value="http://www.srcmini.com/Ionic is a cross-platform mobile apps framework."> < /ion-textarea> < /ion-item> < !-- Textarea that clears the value on edit --> < ion-item> < ion-label> Comment< /ion-label> < ion-textarea clearOnEdit="true"> < /ion-textarea> < /ion-item> < !-- Textarea with custom number of rows and cols --> < ion-item> < ion-label> Notes< /ion-label> < ion-textarea rows="5" cols="10" placeholder="Enter some notes here..."> < /ion-textarea> < /ion-item> < /ion-content>

【Ionic输入】输出量