Dialog 3.0.0

对话弹框组件，可自定义显示位置的对话弹框，基于Modal组件实现。

  • 可自定义组件弹层内容的大小、显示位置。
  • 可自定义组件背景阴影遮罩层的上偏移、下偏移。
  • 弹层显隐的动画可使用自定义的css3动画或modal组件默认的fade动画。
使用说明

引用方式

import { Dialog } from '$yo-component';

// 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
// 你仍然可以通过下面这种方式来引用
import Dialog from 'yo3/component/dialog';

基本用法

最简单用法。全屏居中模态显示组件包含的内容，没有过渡动画。

<Dialog show={this.state.show}>
  <p>the dialog context</p>
</Dialog>

含有标题

通过 title 属性，配置含有标题文字的对话弹框组件。

<Dialog title="Dialog" show={this.state.show}>
  <p>the dialog context</p>
</Dialog>

国际化

通过 okText 和 cancelText 属性，可配置确定、取消按钮显示的文字。

<Dialog show={this.state.show} okText="Yes" cancelText="No">
  <p>the dialog context</p>
</Dialog>

位置

通过设置 align 和 contentOffset 属性，自定义组件的内容显示位置。align 属性配置内容的垂直方向显示位置，contentOffset 属性是一个数组，可配置内容相对于当前位置的 X 轴、Y 轴偏移量。

<Dialog
  show={this.state.show}
  align="top"
  contentOffset={[50, 50]}
>
  <p>the dialog context</p>
</Dialog>

绑定回调函数

通过 onOk 和 onCancel 属性，分别设置确定、取消按钮的回调函数。

<Dialog
  show={this.state.show}
  onOk={() => this.callback()}
  onCancel={() => this.callback()}
>
  <p>the dialog context</p>
</Dialog>

设置动画

通过 animation 参数和 CSS3 动画设置组件显隐过程的动态效果，配置动画对象中的 animation 属性是一个数组，分别对应组件显、隐过程执行的动画效果，duration 属性设置动画执行时间。 也可以传入组件内部支持的动画名字符串 fade、fade-in-up、fade-in-down、zoom。默认没有动画。

<Dialog
  show={this.state.show}
  onOk={() => this.callback()}
  onCancel={() => this.callback()}
  animation={{ animation: ['actionsheet-up', 'actionsheet-down'], duration: 200 }}
>
  <p>the dialog context</p>
</Dialog>

.actionsheet-up {
  -webkit-animation-name: actionsheet-up;
  animation-name: actionsheet-up;
}
.actionsheet-down {
  -webkit-animation-name: actionsheet-down;
  animation-name: actionsheet-down;
}
@keyframes actionsheet-up {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes actionsheet-down {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100%, 0);
  }
}
属性

show { Bool } #

组件是否显示

默认值: false

effect { String/Object } #

组件显隐时采用的动画

  • PropTypes.oneOfType([
PropTypes.string,
PropTypes.shape({
     animation: PropTypes.arrayOf(PropTypes.string).isRequired,
      duration: PropTypes.number.isRequired
  })
])

默认值: 'none'

title { Element/String } #

组件显示的标题

width { Number/String } #

组件显示的内容宽度

默认值: 'auto'

height { Number/String } #

组件显示的内容高度

默认值: 'auto'

align { Enum {'top', 'bottom', 'center'} } #

组件显示内容的垂直方向位置

默认值: "center"

contentOffset { Array } #

组件显示内容的X轴、Y轴偏移量

默认值: [0, 0]

maskOffset { Array } #

组件遮罩层的顶部、底部偏移量

默认值: [0, 0]

extraClass { String } #

组件额外样式类

okText { String } #

组件确定按钮的内容

默认值: '确定'

cancelText { String } #

组件取消按钮的内容

默认值: '取消'

onOk { Bool/Function } #

组件确定按钮的回调函数，false表示不显示确定按钮

默认值: () => {}

onCancel { Bool/Function } #

组件取消按钮的回调函数，false表示不显示取消按钮

默认值: () => {}