Home Reference Source Repository

Function

Static Public Summary
public

ActionSheet(props: Object): *

ActionSheet 操作列表
public

Alert(props: Object): *

Alert 警告框
public

AlertBody(props: Object): *

AlertBody 警告框内容组件
public

AlertButton(props: Object): *

AlertButton 警告框按钮组件
public

AlertFooter(props: Object): *

AlertFooter 警告框尾部组件
public

AlertHeader(props: Object): *

AlertHeader 警告框头部组件
public

Badge(props: Object): *

徽章
public

Button(props: Object): *

按钮
public

Cell(props: Object): *

表格视图列表项
public

CellBody(props: Object): *

表格视图列表项的内容区
public

CellDesc(props: Object): *

表格视图列表项的内容区中的描述区域
public

CellFooter(props: Object): *

表格视图列表项的尾部
public

CellHeader(props: Object): *

表格视图列表项的头部
public

Cells(props: Object): *

表格视图
public

CellsTitle(props: Object): *

表格视图的标题
public

Checkbox(props: Object): *

复选框
public

Confirm(props: Object): *

Confirm 确认对话框
public

Icon(props: *): *

public

IconLoading(props: *): *

public

Input(props: Object): *

文本输入框
public

Mask(props: *): *

public

NavBar(props: Object): *

导航条
public

NavBarItem(props: Object): *

导航条子项
public

Page(props: Object): *

Page 页面基本结构
public

Popup(props: Object): *

弹窗组件，本身并不包含内容，但是其他弹窗相关的组件都依赖该组件和 Portal 组件实现弹窗效果
public

Radio(props: Object): *

单选框
public

Scene(props: Object): *

Scene 页面切换的动画场景
public

SearchBar(props: Object): *

搜索栏
public

SearchBarFooter(props: Object): *

搜索栏尾部内容
public

SearchBarHeader(props: Object): *

搜索栏尾部头部
public

Segmented(props: Object): *

分段控件
public

Stepper(props: Object): *

步进器
public

Switch(props: Object): *

开关按钮
public

TabBar(props: Object): *

标签栏
public

TabBarIcon(props: Object): *

标签项图标
public

TabBarItem(props: Object): *

标签项
public

TabBarLabel(props: Object): *

标签项文案
public

Textarea(props: Object): *

多行文本输入框
public

createClassNames(prename: *): *

public

createPortalEl(container: *): *

public

date2str(date: *): string

public

generateOptions(max: *, min: *, unit: string): *

public

getContainer(container: *): *

public

indexOfOptions(value: *, options: *): *

public

px2rem(px: *): *

Static Public

public ActionSheet(props: Object): * source 

import ActionSheet from 'react-ios-component/src/components/actionsheet/ActionSheet.js'

ActionSheet 操作列表

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.visible boolean

是否显示操作列表
props.description number | string | Object | Array

操作列表头部的描述组件
props.buttons Object[]

操作按钮配置列表
props.hasCancelButton boolean
  • optional
  • default: true

是否有取消按钮
props.onCancel function
  • optional

点击取消按钮触发的事件
props.cancelText string | string | Object | Array
  • optional
  • default: '取消'

取消按钮的文案
props.close function

关闭操作列表的回调（配合 API 调用来使用，一般不用手动传）

Return:

*

public Alert(props: Object): * source 

import Alert from 'react-ios-component/src/components/alert/Alert.js'

Alert 警告框

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.visible boolean

是否显示警告框
props.title PropTypes.node

警告框标题
props.body PropTypes.node

警告框内容
props.buttons Object[]

警告框按钮配置列表
props.close function

关闭警告框的回调（配合 API 调用来使用，一般不用手动传）

Return:

*

public AlertBody(props: Object): * source 

import AlertBody from 'react-ios-component/src/components/alert/AlertBody.js'

AlertBody 警告框内容组件

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public AlertButton(props: Object): * source 

import AlertButton from 'react-ios-component/src/components/alert/AlertButton.js'

AlertButton 警告框按钮组件

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public AlertFooter(props: Object): * source 

import AlertFooter from 'react-ios-component/src/components/alert/AlertFooter.js'

AlertFooter 警告框尾部组件

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public AlertHeader(props: Object): * source 

import AlertHeader from 'react-ios-component/src/components/alert/AlertHeader.js'

AlertHeader 警告框头部组件

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public Badge(props: Object): * source 

import Badge from 'react-ios-component/src/components/badge/Badge.js'

徽章

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.bgColor string
  • optional

徽章的背景颜色，默认为主题颜色

Return:

*

public Button(props: Object): * source 

import Button from 'react-ios-component/src/components/button/Button.js'

按钮

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.component string
  • optional
  • default: 'a'

按钮的 html 标签
props.size string
  • optional

按钮的大小，默认为正常按钮，设置为 lg 是大按钮
props.fill boolean
  • optional
  • default: false

是否填充背景色
props.disabled boolean
  • optional
  • default: false

是否不可用
props.color boolean
  • optional

按钮文案的颜色，默认为主题颜色

Return:

*

public Cell(props: Object): * source 

import Cell from 'react-ios-component/src/components/cell/Cell.js'

表格视图列表项

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.hasArrow boolean
  • optional

是否有访问箭头
props.href string
  • optional

访问跳转链接
props.component string
  • optional
  • default: 'div'

列表项的 html 标签，可选的有 ['a', 'label', 'div']

Return:

*

public CellBody(props: Object): * source 

import CellBody from 'react-ios-component/src/components/cell/CellBody.js'

表格视图列表项的内容区

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public CellDesc(props: Object): * source 

import CellDesc from 'react-ios-component/src/components/cell/CellDesc.js'

表格视图列表项的内容区中的描述区域

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public CellFooter(props: Object): * source 

import CellFooter from 'react-ios-component/src/components/cell/CellFooter.js'

表格视图列表项的尾部

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public CellHeader(props: Object): * source 

import CellHeader from 'react-ios-component/src/components/cell/CellHeader.js'

表格视图列表项的头部

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public Cells(props: Object): * source 

import Cells from 'react-ios-component/src/components/cell/Cells.js'

表格视图

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public CellsTitle(props: Object): * source 

import CellsTitle from 'react-ios-component/src/components/cell/CellsTitle.js'

表格视图的标题

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public Checkbox(props: Object): * source 

import Checkbox from 'react-ios-component/src/components/form/Checkbox.js'

复选框

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public Confirm(props: Object): * source 

import Confirm from 'react-ios-component/src/components/alert/Confirm.js'

Confirm 确认对话框

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.visible boolean

是否显示确认对话框
props.title PropTypes.node

确认对话框标题
props.body PropTypes.node

确认对话框内容
props.onConfirm function
  • optional

点击确认按钮触发的事件
props.onCancel function
  • optional

点击取消按钮触发的事件
props.confirmText PropTypes.node
  • optional
  • default: '确定'

确认按钮的文案
props.cancelText PropTypes.node
  • optional
  • default: '取消'

取消按钮的文案

Return:

*

public Icon(props: *): * source 

import Icon from 'react-ios-component/src/components/icon/Icon.js'

Params:

NameTypeAttributeDescription
props *

Return:

*

public IconLoading(props: *): * source 

import IconLoading from 'react-ios-component/src/components/icon/IconLoading.js'

Params:

NameTypeAttributeDescription
props *

Return:

*

public Input(props: Object): * source 

import Input from 'react-ios-component/src/components/form/Input.js'

文本输入框

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.type string
  • optional
  • default: 'text'

文本框类型
props.defaultValue string
  • optional
  • default: undefined

文本框的默认值

Return:

*

public Mask(props: *): * source 

import Mask from 'react-ios-component/src/components/mask/Mask.js'

Params:

NameTypeAttributeDescription
props *

Return:

*

public NavBar(props: Object): * source 

import NavBar from 'react-ios-component/src/components/navbar/Navbar.js'

导航条

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.leftElement PropTypes.node
  • optional

导航条左边位置的内容
props.centerElement PropTypes.node
  • optional

导航条中间位置的内容
props.rightElement PropTypes.node
  • optional

导航条右边位置的内容

Return:

*

public NavBarItem(props: Object): * source 

import NavBarItem from 'react-ios-component/src/components/navbar/NavbarItem.js'

导航条子项

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.label string
  • optional

导航条子项显示的内容

Return:

*

public Page(props: Object): * source 

import Page from 'react-ios-component/src/components/page/Page.js'

Page 页面基本结构

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.hasNavBar boolean
  • optional
  • default: false

页面是否有导航栏 (NavBar) 组件
props.hasTabBar boolean
  • optional
  • default: false

页面是否有标签栏 (TabBar) 组件
props.duration number
  • optional
  • default: 300

页面的过场动画时间
props.timingFunction string
  • optional
  • default: 'ease'

页面过场动画的过渡函数

Return:

*

public Popup(props: Object): * source 

import Popup from 'react-ios-component/src/components/popup/Popup.js'

弹窗组件，本身并不包含内容，但是其他弹窗相关的组件都依赖该组件和 Portal 组件实现弹窗效果

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.visible boolean
  • optional
  • default: false

弹窗是否显示
props.close function
  • optional

控制弹窗关闭的函数，由 Portal 组件传进来，一般不用手动指定，不传的话点击弹窗组件阴影的地方不会自动关闭弹窗
props.position string
  • optional
  • default: 'center'

弹窗里内容的位置
props.duration number
  • optional
  • default: 400

弹窗的动画持续时间
props.timingFunction string
  • optional
  • default: 'ease'

动画过度函数
props.transitionName string | function
  • optional

动画过度名称，传给ReactCSSTransitionGroup 使用

Return:

*

public Radio(props: Object): * source 

import Radio from 'react-ios-component/src/components/form/Radio.js'

单选框

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public Scene(props: Object): * source 

import Scene from 'react-ios-component/src/components/page/Scene.js'

Scene 页面切换的动画场景

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.animation string

场景切换的动画类型，其值是由当前页面路由变化确定的
props.timeout number
  • optional

场景切换时动画的执行时间

Return:

* 
import SearchBar from 'react-ios-component/src/components/searchbar/Searchbar.js'

搜索栏

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.theme string
  • optional

搜索栏的主题，默认为灰色，可选有 white

Return:

*

public SearchBarFooter(props: Object): * source 

import SearchBarFooter from 'react-ios-component/src/components/searchbar/SearchBarFooter.js'

搜索栏尾部内容

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public SearchBarHeader(props: Object): * source 

import SearchBarHeader from 'react-ios-component/src/components/searchbar/SearchBarHeader.js'

搜索栏尾部头部

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public Segmented(props: Object): * source 

import Segmented from 'react-ios-component/src/components/segmented/Segmented.js'

分段控件

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.elements Object[]
  • optional

分段控件的元素项列表（每一项都应该是 Button 组件的 props）
props.color string
  • optional
  • default: ''

分段控件的样式，默认为主题颜色
props.size string
  • optional
  • default: ''

分段控件的大小，默认为正常的按钮大小

Return:

*

public Stepper(props: Object): * source 

import Stepper from 'react-ios-component/src/components/form/Stepper.js'

步进器

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.value number
  • optional
  • default: 0

滑块的值
props.min number
  • optional
  • default: -Infinity

滑块的最小值
props.max number
  • optional
  • default: Infinity

滑块的最大值
props.step number
  • optional
  • default: 1

步进数
props.onChange function
  • optional

步进器改变值时触发的函数回调

Return:

*

public Switch(props: Object): * source 

import Switch from 'react-ios-component/src/components/form/Switch.js'

开关按钮

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性

Return:

*

public TabBar(props: Object): * source 

import TabBar from 'react-ios-component/src/components/tabbar/Tabbar.js'

标签栏

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.tabs Object[]
  • optional

标签项组件的属性对象列表
props.linkColor string
  • optional
  • default: 'gray'

每个标签栏项的字体颜色
props.activeColor string
  • optional
  • default: ''

每个标签栏项被激活时的字体颜色，默认为主题颜色

Return:

*

public TabBarIcon(props: Object): * source 

import TabBarIcon from 'react-ios-component/src/components/tabbar/TabbarIcon.js'

标签项图标

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.icon string
  • optional

标签项图标
props.badge string
  • optional

徽章的文案
props.badgeColor string
  • optional
  • default: 'red'

徽章的背景颜色

Return:

*

public TabBarItem(props: Object): * source 

import TabBarItem from 'react-ios-component/src/components/tabbar/TabbarItem.js'

标签项

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.component string | PropTypes.element | function
  • optional
  • default: 'a'

标签项的 html 包裹元素
props.icon string
  • optional

标签项图标
props.badge string
  • optional

徽章的文案
props.linkColor string
  • optional
  • default: 'gray'

每个标签栏项的字体颜色
props.badgeColor string
  • optional
  • default: 'red'

徽章的背景颜色
props.activeColor string
  • optional
  • default: ''

每个标签栏项被激活时的字体颜色，默认为主题颜色
props.active string
  • optional
  • default: false

标签项是否激活

Return:

*

public TabBarLabel(props: Object): * source 

import TabBarLabel from 'react-ios-component/src/components/tabbar/TabbarLabel.js'

标签项文案

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.label string
  • optional

标签项的文案

Return:

*

public Textarea(props: Object): * source 

import Textarea from 'react-ios-component/src/components/form/Textarea.js'

多行文本输入框

Params:

NameTypeAttributeDescription
props Object

组件所使用的属性
props.defaultValue string
  • optional
  • default: undefined

多行文本输入框的默认值

Return:

*

public createClassNames(prename: *): * source 

import {createClassNames} from 'react-ios-component/src/components/util/index.js'

Params:

NameTypeAttributeDescription
prename *
  • optional
  • default: namespace

Return:

*

public createPortalEl(container: *): * source 

import {createPortalEl} from 'react-ios-component/src/components/util/dom.js'

Params:

NameTypeAttributeDescription
container *

Return:

*

public date2str(date: *): string source 

import {date2str} from 'react-ios-component/src/components/util/index.js'

Params:

NameTypeAttributeDescription
date *

Return:

string

public generateOptions(max: *, min: *, unit: string): * source 

import {generateOptions} from 'react-ios-component/src/components/util/index.js'

Params:

NameTypeAttributeDescription
max *
min *
unit string
  • optional
  • default:

Return:

*

public getContainer(container: *): * source 

import {getContainer} from 'react-ios-component/src/components/util/dom.js'

Params:

NameTypeAttributeDescription
container *
  • optional

Return:

*

public indexOfOptions(value: *, options: *): * source 

import {indexOfOptions} from 'react-ios-component/src/components/util/index.js'

Params:

NameTypeAttributeDescription
value *
options *

Return:

*

public px2rem(px: *): * source 

import {px2rem} from 'react-ios-component/src/components/util/index.js'

Params:

NameTypeAttributeDescription
px *

Return:

*