Because this library is being currently built for Electron and NW.js, the examples and demos on this site will only work properly in Chrome.
Dialog
Properties
Property | Type | Description |
---|---|---|
buttons | array | Sets the buttons of the component. |
horizontalAlignment | string | Sets the horizontal alignment of the component's content Property value "left", "center", "right" |
icon | element | Sets the icon element of the component. |
margin | string, number | Sets the outer margin of a component. E.G. "30px 20px" |
marginBottom | string, number | Sets the outer margin bottom of a component. |
marginLeft | string, number | Sets the outer margin left of a component. |
marginRight | string, number | Sets the outer margin right of a component. |
marginTop | string, number | Sets the outer margin top of a component. |
message | string | Sets the message of the component. |
title | string | Sets the title of the component. |
verticalAlignment | string | Sets the vertical alignment of the component's content. Property value "top", "center", "bottom" |
Examples
import React, { Component } from 'react';
import { Dialog, Button } from 'react-desktop/macOs';
export default class extends Component {
render() {
return (
<Dialog
title="This is a title"
message="This message is inside a dialog component."
icon={this.renderIcon()}
buttons={[
<Button onClick={() => console.log('close this dialog')}>Cancel</Button>,
<Button color="blue" onClick={() => console.log('submit this dialog')}>Submit</Button>,
]}
/>
);
}
renderIcon() {
return (
<img
src="data:image/png;base64,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"
width="52"
height="52"
/>
);
}
}