web-dev-qa-db-ja.com

react-bootstrapモーダルで幅と高さを指定/設定します

動的な幅と高さをreact-bootstrapモーダルウィンドウに適用するにはどうすればよいですか？私はreact-bootstrapdocs here をチェックしましたが、その方法を理解できませんでした。実際には、幅と高さの小道具の値は動的です（任意の値にすることができます）。これは私のアプリで再利用可能なコンポーネント（多くのページで使用される）であり、CSSクラスを介して幅/高さを適用できないためです。

ドキュメントに記載されている「bsSize」プロパティも機能しませんが、xs、md、lgの事前定義されたサイズは私が正確に望んでいるものではなく、小道具を介してモーダルに設定する幅と高さが必要です。

これが私のサンプル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);
sizejsxreact-bootstrap
9
Faisal Mq

documentation によると、モーダルの小道具dialogClassNameを介して必要なスタイルを実現するには、独自のcssクラスをカスタマイズする必要があります。

したがって、my.jsx以下のコード：

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

my.css 未満：

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

次に、カスタマイズされたモーダルがあります！

10
Stephen W