4.0.21 • Published 1 year ago
mui-label-divider v4.0.21
mui-label-divider
Labeled divider component for Material-UI / React
Install
npm install --save mui-label-divider
Usage Examples
import { CollapsibleLabelDivider, LabelDivider } from "mui-label-divider";
import { useState } from "react";
export default function App() {
const [open, setOpen] = useState(false);
return (
<>
<LabelDivider label="SIMPLE" />
<LabelDivider label="CLICKABLE" onClick={() => alert("clicked")} />
<CollapsibleLabelDivider
label={`${open ? "HIDE" : "SHOW"} CONTENT`}
open={open}
onClick={() => setOpen((x) => !x)}
>
content
</CollapsibleLabelDivider>
</>
);
}
Credits
Adapted for Material-UI from Puigcerber's original raw html/css solution at https://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle.
Inspired by https://wikiki.github.io/layout/divider/.
License
MIT © gregorychen3
4.0.21
1 year ago
4.0.19
1 year ago
4.0.9
1 year ago
4.0.8
1 year ago
4.0.20
1 year ago
4.0.5
1 year ago
4.0.4
1 year ago
4.0.10
1 year ago
4.0.7
1 year ago
4.0.6
1 year ago
4.0.1
1 year ago
4.0.0
1 year ago
4.0.3
1 year ago
4.0.2
1 year ago
4.0.16
1 year ago
4.0.15
1 year ago
4.0.18
1 year ago
4.0.17
1 year ago
4.0.12
1 year ago
4.0.11
1 year ago
4.0.14
1 year ago
4.0.13
1 year ago
3.0.2
2 years ago
3.0.1
2 years ago
3.0.0
2 years ago
2.0.0
2 years ago
1.0.6
3 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago