在react-boostrap模态上指定/设置宽度和高度 [英] Specify/Set width and height on a react-boostrap modal

问题描述

如何将动态宽度和高度应用于react-bootstrap模态窗口? 我已经在此处上检查了react-bootstrap文档，但无法弄清楚该怎么做那. 实际上width和height道具的值是动态的(可以是任何值)，因为它将是我的应用程序中的可重用组件(将在许多页面上使用)，因此无法通过某些CSS类应用width/height. docs中提到的

'bsSize'属性也无法正常工作，尽管xs，md，lg的预定义大小并不是我真正想要的，而是我需要通过props在模态上设置宽度和高度.

这是我的示例JSX代码:

var MyWindow = React.createClass({
    getInitialState() {
        return { show: true };
    },
    close() {
        this.setState({ show: false });
    },
    open() {
        this.setState({ show: true });
    },
    save() {

    },
    render: function () {

        var Button = ReactBootstrap.Button,
            Modal = ReactBootstrap.Modal,
            ModalBody = ReactBootstrap.ModalBody,
            ModalHeader = ReactBootstrap.ModalHeader,
            ModalFooter = ReactBootstrap.ModalFooter,
            ModalTitle = ReactBootstrap.ModalTitle;

        return (
            <Modal show={this.state.show} onHide={this.close}>
                <ModalHeader closeButton>
                    <ModalTitle>My Cool Window</ModalTitle>
                </ModalHeader>
                <ModalBody>
                    <h4>Text in a modal</h4>
                    <p>Duis mollis, est non commodo luctus</p>
                </ModalBody>
                <ModalFooter>
                    <Button onClick={this.close}>Cancel</Button>
                    <Button bsStyle="primary" onClick={this.save}>Save</Button>
                </ModalFooter>
            </Modal>
        );

    }
});

React.render(<MyWindow width={700} height={400} />, mountNode);

解决方案

根据其文档，您必须自定义自己的CSS类，以通过模态的道具dialogClassName实现所需的样式.

所以我们下面可能会有my.jsx代码:

<Modal dialogClassName="my-modal">
</Modal>

下面带有my.css:

.my-modal {
    width: 90vw    /* Occupy the 90% of the screen width */
    max-width: 90vw;
} 

然后您将拥有自己的自定义模式！

How can I apply a dynamic width and height to a react-bootstrap modal window? I have checked the react-bootstrap docs here but could not figure out how to do that. Actually the value of width and height props would be dynamic (could be any values) as this will be a reusable component in my app (to be used on many pages) thus can't apply width/height through some CSS class.

'bsSize' property as mentioned in docs also not working, although predefined sizes of xs, md, lg is not what I exactly want, rather I need width and height to be set on modal via props.

Here is my sample JSX code:

var MyWindow = React.createClass({
    getInitialState() {
        return { show: true };
    },
    close() {
        this.setState({ show: false });
    },
    open() {
        this.setState({ show: true });
    },
    save() {

    },
    render: function () {

        var Button = ReactBootstrap.Button,
            Modal = ReactBootstrap.Modal,
            ModalBody = ReactBootstrap.ModalBody,
            ModalHeader = ReactBootstrap.ModalHeader,
            ModalFooter = ReactBootstrap.ModalFooter,
            ModalTitle = ReactBootstrap.ModalTitle;

        return (
            <Modal show={this.state.show} onHide={this.close}>
                <ModalHeader closeButton>
                    <ModalTitle>My Cool Window</ModalTitle>
                </ModalHeader>
                <ModalBody>
                    <h4>Text in a modal</h4>
                    <p>Duis mollis, est non commodo luctus</p>
                </ModalBody>
                <ModalFooter>
                    <Button onClick={this.close}>Cancel</Button>
                    <Button bsStyle="primary" onClick={this.save}>Save</Button>
                </ModalFooter>
            </Modal>
        );

    }
});

React.render(<MyWindow width={700} height={400} />, mountNode);

解决方案

According to its documentation, you have to customize your own css class to achieve the style you want via modal's prop dialogClassName.

So we might have my.jsx code below:

<Modal dialogClassName="my-modal">
</Modal>

With my.css below:

.my-modal {
    width: 90vw    /* Occupy the 90% of the screen width */
    max-width: 90vw;
} 

Then you will have your custmized modal!

这篇关于在react-boostrap模态上指定/设置宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！