antd实现点击按钮隐藏输入框_Axure学习之元件详解(三)文本输入框

今天我们继续学习Axure原件----文本输入框。 单行文本输入框：

• 首先我们先来看一下单行文本输入框类型，主要包括以下几种类型。如图：

接下来我们分别对每种类型进行说明：1、文本和密码类型，文本格式没有特殊之处，正常显示文本信息，选择密码格式的文本输入框会隐藏输入的内容。如图：

2、文本框类型中，邮箱、电话号码、网址、查找类型，没有特殊的变化和正常的文本输入框一样。

3、数字类型的文本输入框，输入数字后，点击上下箭头可以进行数字大小的切换。

4、文件类型的文本输入框，实际是个按钮，点击后会弹出上传文件的提示对话框。

5、日期、月份、时间类型的文本输入框，点击后可以弹出选择时间的下拉弹框，如图：

时间文本输入框可以根据你输入的时间进行转换。转换为标记上下午的时间。

• 文本输入框的其他属性设置

1、提示文字和设计字体颜色、大小，我们选中文本框，在属性中“提示文字”中输入提示信息，并且点击“提示样式”可以设置字体的颜色、字体样式等信息。

预览效果如图：

2、设置文本的最大输入长度，以及只读、禁用、隐藏边框等功能，例如限制密码输入框的长度为20，并隐藏边框，如图：当我们密码输入到第20位时，就无法继续写入。

当我们禁用输入框时，输入框置灰无法进行输入。

   预览效果图：

3、提交按钮属性的设置，下面我们以搜索为例进行练习。我们先添加一个文本框，并添加提示文字“请输入搜索内容”，添加一个按钮，并命名“搜索”。然后我们选中文本框，并选择提交按钮为刚设置的“搜索按钮”。

然后我们选择按钮，并在属性中“鼠标单击时”添加用例，打开连接跳转到page1(我们实现可以在page1准备些内容)

预览结果如图：(当我们输入完内容，点击回车时，会自动跳转到page1页面，同点击按钮效果一样)

文本输入框的另一个属性，添加提示信息，添加后效果是当鼠标悬浮在文本框上时，提示悬浮展示

另外，我们还能进行函数计算。以加法为例，首先我们先添加两个输入框并命名“left”、“right”，并添加一个按钮和一个代表结果的问号(命名为“answer”)，如图：

选中计算按钮，双击 “鼠标单击时”添加用例“设置文本”，并插入两个局部变量(分别为命名为“left”和“right”的两个文本输入框)，并插入全局变量(两个局部变量相加)，点击【确定】保存即可。

预览效果如图：

多行文本框：单行文本框和多行文本框区别：多行文本输入框没有类型选择，没有字数限制。其他属性都和单行文本框一致。主要用于备注、用户评论等相关功能。大小根据自己拖动的大小设定，最小不可小于设计区域的大小。

下拉列表：我们在程序中经常会遇到下拉列表选择项的这种方式，在原型中也是可以直接体现的。首先在设计区添加一个下拉列表并选中，点击属性中的列表项，可以添加多个列表项。

我们也可以在下拉列表下放添加图片元件，与下拉列表中的枚举值相对应产生交互。首先我们添加图片元件，并“转换为动态面板”，双击打开动态面板管理器，将动态复制为多个，并为状态重命名，打开相应动态页面添加对应的图片。

然后就是添加用例，首先当我们选中下拉列表，并双击“选项改变时”添加用例，点击“添加条件”，设置判断条件为：“被选项“如果等于项值为空时。点击确定保存。

添加设置，设置动态面板状态为空。

继续添加用例case2，设置如果选项为“手枪”时。

添加设置，设置动态面板状态为“手枪”，进入动画为“逐渐”。

其他的下拉列表选项同上设置，设置完后他的运行效果会按照case自上而下的顺序运行。

最后我们预览的结果默认展示为空白，点击下拉列表中的选项，可以不断的切换图片。如图：

关于文本框的使用暂时就先介绍这么多，后续在使用的过程中，大家会逐渐的熟悉这些元件，这样用起来就会很顺畅。