Page-komponentti poistuu käytöstä tulevaisuudessa, eikä sen ominaisuuksia enää kehitetä.
Löydät vaihtoehtoisen toteutustavan mallisivupohjien Sivupohja Sidebar-navigaatiolla
Käyttötarkoitus
Page-komponentti sisältää kaikille sivupohjille yhteisiä toimintoja. Page luo apuelementtejä näppäimistöä
ja ruudunlukijaa käyttäville asiakkaille ja lisää vasempaan reunaan tyhjää tilaa navigaatiota varten.
Saavutettavuus
Sivusiirtymien ohjeistus on siirretty saavutettavuus
Page-komponentin avulla voit luoda kohdistuksen käsittelyyn tarvittavan elementin ja hyppylinkin käyttämällä jumpToContent ja
focusReset -propeja.
Esimerkki
const ExamplePage = () => {
const [isOpen, setIsOpen] = useState(true);
const focusResetElRef = useRef();
const toggle = (e) => {
e.preventDefault();
setIsOpen(!isOpen);
};
return (
<>
<Button onClick={toggle} className="kds-mb-4">
isOpen: {isOpen ? "true" : "false"}
</Button>
<Page
style={{
position: "relative",
height: "500px",
}}
isOpen={isOpen}
ref={focusResetElRef}
jumpToContentLabel="Hyppää sisältöön"
jumpToContentHref="#main-content"
focusResetText="Komponentit - Page - Kela Design System"
focusResetId="focus-reset-target"
pageToolbar={
<div
style={{
position: "relative",
zIndex: 1,
border: "1px solid cyan",
backgroundColor: "#B2FFFF",
width: "100%",
height: "48px",
display: "flex",
alignItems: "center",
justifyContent: "space-around",
}}
>
Mainbar
</div>
}
layout={
<div
id="main-content"
style={{
position: "relative",
zIndex: 1,
border: "1px solid yellow",
backgroundColor: "#FFFFCC",
width: "100%",
height: "404px",
display: "flex",
alignItems: "center",
justifyContent: "space-around",
}}
>
Sivun sisältö ja layout
</div>
}
sidebar={
<div
style={{
position: "absolute",
zIndex: 0,
top: 0,
left: 0,
border: "1px solid magenta",
backgroundColor: "#FFB2FF",
width: "100%",
maxWidth: "clamp(min(20rem, 360px), 20rem, min(32vw, 640px))",
height: "500px",
display: "flex",
alignItems: "center",
justifyContent: "space-around",
}}
>
Sidebar
</div>
}
footer={
<div
style={{
position: "relative",
zIndex: 1,
border: "1px solid green",
backgroundColor: "#CCFFCC",
width: "100%",
height: "48px",
display: "flex",
alignItems: "center",
justifyContent: "space-around",
}}
>
Footer
</div>
}
/>
</>
);
};
render(<ExamplePage />);