f7-modal

浮层基础组件, 如有个性化浮层需求可以再Modal基础上扩展

import {Modal, Popup, PickerModal, Popover} from 'f7-modal'

popup 实现

<Modal type="popup" fixTop={false} {...other}>{children}</Modal>

参数:

| 字段 | 类型 | 说明 | | :--- | :--- | :--- | | type | string | 默认值:modal | | visible | bool | 是否显示 | | closeByOutside | bool | 点击外层关闭 | | containerCss | string | wrap节点的class | | afterClose | func | 关闭后回调 | | fixTop | bool | 是否上下居中 | | mounter | bool | 是否挂载在组件外部 | | root | dom | mounter 选择挂载的节点 | | onCancel | func | 关闭回调 | | afterClose | func | 关闭后回调 | | overlay | bool | 是否显示遮罩层 |

<PickerModal/>

半框浮层

<PickerModal
  visible={this.state.pickerModalOpened}
  onCancel={()=>{this.setState({pickerModalOpened: false})}}
>
  <ContentBlock>
    <p>About Popover created dynamically.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus ac.</p>
  </ContentBlock>
</PickerModal>

<ActionsModal/>

操作浮层

const {ActionLabel, ActionButton, ActionGroup} = ActionsModal;

<ActionsModal visible={this.state.actionsOpened} onCancel={()=>{this.setState({actionsOpened: false})}}>
  <ActionGroup>
    <ActionLabel>这是一个标题，可以为一行或者两行。</ActionLabel>
    <ActionButton>示例菜单</ActionButton>
    <ActionButton>示例菜单</ActionButton>
  </ActionGroup>
  <ActionGroup>
    <ActionButton color="red" onClick={()=>{this.setState({actionsOpened: false})}}>取消</ActionButton>
  </ActionGroup>
</ActionsModal>

<Popup/>

弹窗

一般弹窗
<Popup>content</Popup>

弹窗视图
<Popup visible={this.state.popupOpened}>
  <View>
    <Pages path="/" exact component={pop1}></Pages>
    <Pages path="/pop2" component={pop2}></Pages>
    <Pages path="/pop3" component={pop3}></Pages>
  </View>
</Popup>

对话框

alert confirm prompt toast

Modal.alert({
    [title], text, [onOk], [okText='确定']
})

Modal.confirm({
    [title], text, [onOk], [onCancel], [okText='确定'], [cancelText='取消']
})

Modal.prompt({
    [title], text, [onOk], [onCancel], [okText='确定'], [cancelText='取消']
})

Modal.toast({
    text, [timer], [callbackOk]
})

// 更多toast
Modal.toast.success(text, [timer], [callbackOk])
Modal.toast.fail(text, [timer], [callbackOk])
Modal.toast.warning(text, [timer], [callbackOk])
Modal.toast.offline(text, [timer], [callbackOk])