Responsive
The popup component adapts fluidly to its environment. There are times however when you would like to set the component up responsively.
Use the responsive option to configure the popup and change the options based on the viewport width. There are five predefined breakpoints:
xsmall- min-width: 0pxsmall- min-width: 576pxmedium- min-width: 768pxlarge- min-width: 992pxxlarge- min-width: 1200px- use
customfor setting a custombreakpoint
It is a good idea to adjust the display to tailor the UX. This allows you to have the popup bottom-positioned on mobile devices, centered on tablets, and anchored to input on larger screens to enhance the user experience.
Demo
<Popup
responsive={{
}}
/>
Welcome to our website!
Have fun navigating through the demos.
JSXTSXCSS
import { Button, Page, Popup, setOptions } from '@mobiscroll/react';
import { useCallback, useRef, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [isPopupOpen, setPopupOpen] = useState(false);
const [myAnchor, setAnchor] = useState();
const buttonRef = useRef(null);
const openPopup = useCallback(() => {
setAnchor(buttonRef.current.nativeElement);
setPopupOpen(true);
}, []);
return (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-button-group-block">
<Button ref={buttonRef} onClick={openPopup}>
Open popup
</Button>
</div>
</div>
<Popup
responsive={{
xsmall: {
display: 'bottom',
},
small: {
display: 'center',
},
custom: {
// Custom breakpoint
breakpoint: 800,
display: 'anchored',
anchor: myAnchor,
},
}}
isOpen={isPopupOpen}
onClose={() => setPopupOpen(false)}
>
<div className="mbsc-align-center mbsc-padding">
<img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
<h4>Welcome to our website!</h4>
<p>Have fun navigating through the demos.</p>
</div>
</Popup>
</Page>
);
}
export default App;
import { Button, Page, Popup, setOptions } from '@mobiscroll/react';
import { useCallback, useRef, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [isPopupOpen, setPopupOpen] = useState<boolean>(false);
const [myAnchor, setAnchor] = useState<HTMLElement>();
const buttonRef = useRef<Button>(null);
const openPopup = useCallback(() => {
setAnchor(buttonRef.current!.nativeElement);
setPopupOpen(true);
}, []);
return (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-button-group-block">
<Button ref={buttonRef} onClick={openPopup}>
Open popup
</Button>
</div>
</div>
<Popup
responsive={{
xsmall: {
display: 'bottom',
},
small: {
display: 'center',
},
custom: {
// Custom breakpoint
breakpoint: 800,
display: 'anchored',
anchor: myAnchor,
},
}}
isOpen={isPopupOpen}
onClose={() => setPopupOpen(false)}
>
<div className="mbsc-align-center mbsc-padding">
<img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
<h4>Welcome to our website!</h4>
<p>Have fun navigating through the demos.</p>
</div>
</Popup>
</Page>
);
}
export default App;
/* style */