Transitions

SlideTransition

Result

Loading...

Live Editor

function Example() { const [show, setShow] = React.useState(false); const [showSlide, setShowSlide] = React.useState(false); const containerOverflow = showSlide ? 'overflow-y-hidden' : 'overflow-y-auto'; return ( <div> <Button onClick={() => setShow(true)} className="me-2 mb-2"> Show Takeover </Button> <Takeover aria-labelledby="takeover-label" onClickClose={() => setShow(false)} show={show}> <Takeover.Header> <Takeover.Header.Content renderTitle={() => <div id="takeover-label">Takeover Title</div>} renderSubtitle={() => 'Subtitle'} renderLogo={() => <span className="icon-placeholder"></span>} /> </Takeover.Header> <Takeover.Body> <div className="takeover-body-scroll overflow-y-none"> <div className={`flex-fill h-100 p-4 ${containerOverflow}`}> {Array.from({ length: 20 }, (_, i) => ( <p key={i}> Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. </p> ))} <Button onClick={() => setShowSlide(!showSlide)}>Toggle Slide</Button> </div> <SlideTransition in={showSlide} fromDirection="end" className="position-absolute top-0 end-0 bottom-0 py-0 bg-white shadow-sm" > <div className="h-100 border-start py-4 px-5" style={{ minWidth: 400 }}> <Button variant="link" className="px-0 mb-3" onClick={() => setShowSlide(false)}> <span className="icon-chevron-left me-2"></span> Dismiss </Button> <section> <h4>Contents</h4> <p>Slide contents</p> </section> </div> </SlideTransition> </div> <Takeover.BodyFooter> <div className="d-flex justify-content-between"> <Button variant="outline-secondary">Back</Button> <Button variant="primary">Next</Button> </div> </Takeover.BodyFooter> </Takeover.Body> </Takeover> </div> ); }

function Example() {
    const [show, setShow] = React.useState(false);
    const [showSlide, setShowSlide] = React.useState(false);

    const containerOverflow = showSlide ? 'overflow-y-hidden' : 'overflow-y-auto';

    return (
        <div>
            <Button onClick={() => setShow(true)} className="me-2 mb-2">
                Show Takeover
            </Button>

            <Takeover aria-labelledby="takeover-label" onClickClose={() => setShow(false)} show={show}>
                <Takeover.Header>
                    <Takeover.Header.Content
                        renderTitle={() => <div id="takeover-label">Takeover Title</div>}
                        renderSubtitle={() => 'Subtitle'}
                        renderLogo={() => <span className="icon-placeholder"></span>}
                    />
                </Takeover.Header>

                <Takeover.Body>
                    <div className="takeover-body-scroll overflow-y-none">
                        <div className={`flex-fill h-100 p-4 ${containerOverflow}`}>
                            {Array.from({ length: 20 }, (_, i) => (
                                <p key={i}>
                                    Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien
                                    vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
                                    Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec
                                    metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere.
                                    Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per
                                    conubia nostra inceptos himenaeos.
                                </p>
                            ))}
                            <Button onClick={() => setShowSlide(!showSlide)}>Toggle Slide</Button>
                        </div>
                        <SlideTransition
                            in={showSlide}
                            fromDirection="end"
                            className="position-absolute top-0 end-0 bottom-0 py-0 bg-white shadow-sm"
                        >
                            <div className="h-100 border-start py-4 px-5" style={{ minWidth: 400 }}>
                                <Button variant="link" className="px-0 mb-3" onClick={() => setShowSlide(false)}>
                                    <span className="icon-chevron-left me-2"></span>
                                    Dismiss
                                </Button>

                                <section>
                                    <h4>Contents</h4>

                                    <p>Slide contents</p>
                                </section>
                            </div>
                        </SlideTransition>
                    </div>

                    <Takeover.BodyFooter>
                        <div className="d-flex justify-content-between">
                            <Button variant="outline-secondary">Back</Button>
                            <Button variant="primary">Next</Button>
                        </div>
                    </Takeover.BodyFooter>
                </Takeover.Body>
            </Takeover>
        </div>
    );
}

Props