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="custom"></ion-input>

    <!-- Input with placeholder -->
    <ion-input placeholder="Enter Input"></ion-input>

    <!-- Number type input -->
    <ion-input type="number" value="1100"></ion-input>

    <!-- Input with clear button when the value is available -->
    <ion-input clearInput value="clear me"></ion-input>

    <!-- Disabled input -->
    <ion-input value="Disabled" disabled></ion-input>

    <!-- Readonly input -->
    <ion-input value="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="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>

输出量