Modal

• category: UI
• chinese: 模态框
• type: UI Component

Design

This component calls weex modal component to show alerts, confirms, prompts, and in web environment use window.alert, window.confirm, window.prompt.

In app weex page, normally it would show system dialogs, but your app may overwrite modal code and use app customized app dialogs instead.

If this component cannot satisfy your popup layout needs, you can also check Dialog component and customize your own style.

Notice Modal component only accept String type contents , Modal.alert([jsArray]) may cause serious issues.

API

Modal.alert

| Props | Description | Type | Default | | --------------- | --------------------------- | ----------------- | ------- | | title | title | string | null | | callbackorArray | callbacks or button options | function or array | null |

// simple
Modal.alert("Hello World") 

//callBack
Modal.alert("Hello World",(e)=>{ console.log(e)}) 

//set the button content
Modal.alert("Hello World",[ 
    {
        onPress:(e)=>{console.log(e)},
        text:"Confirm按钮"
    }
])

Modal.confirm

| Props | Description | Type | Default | | | --------------- ---------- | ----------- ------ | ------ - | - ------- | | | message | content | string | null | | | callbackorArray | callbacks or button options | function or array | null | |

// simple
Modal.confirm("Hello World") 

//focus on the simple writing of the callback 
Modal.confirm("Hello World",()=>{ console.log('点击了Confirm')}) 

//focus on the callback, and set button content
Modal.confirm("Hello World",[ 
    {
        onPress:()=>{console.log('点击了Confirm')},
        text:"Confirm"
    }
])

//confirm, or cancel, you can set the button content
Modal.confirm('给个评价吧！！',[ 
    {
        onPress:()=>{console.log('点击了去看看')},
        text:"去看看"
    },
    {
        onPress:()=>{console.log('点击了以后再说')},
        text:"以后再说"
    }
]);

Modal.prompt

| Props | Description | Type | Default | | --------------- | --------------------------- | ----------------- | ------- | | message | content | string | null | | callbackorArray | callbacks or button options | function or array | null |

//focus on the simple writing of the callback
Modal.prompt("请填写你的工号：",(e)=>{ console.log(e)}) 

//focus on the callback, and set button content
Modal.prompt("Hello World",[ 
    {
        onPress:(e)=>{console.log(e)},
        text:"Confirm"
    }
])

//confirm, or cancel, you can set the button content
Modal.prompt('请填写你的工号：',[ 
    {
        onPress:(e)=>{console.log(e)},
        text:"确认了"
    },
    {
        onPress:()=>{console.log('点击了取消')},
        text:"取消"
    }
]);

Modal.toast

| Props | Description | Type | Default | | -------- | ----------- | ---------------------------------------------- | ------- | | message | content | string | null | | duration | duration | there are SHORT 2s， LONG 3.5s; for choice | SHORT |

//simple writing， duration default values is 'SHORT'
Modal.toast('Hi');

//3.5s
Modal.toast('Hi','LONG');