feat(compo):增加分割线组件。

This commit is contained in:
徐涛 2023-12-24 20:36:06 +08:00
parent 6d406f8ee3
commit 8642eb12a1
2 changed files with 56 additions and 0 deletions

View File

@ -0,0 +1,41 @@
import { defaultTo, prop } from "ramda";
import classes from "./Divider.module.css";
/**
* @typedef (object) DividerProps
* @property {number} [thickness]
*/
const defaultThickness = defaultTo(1);
/**
* @param {DividerProps} props
*/
function Divider(props) {
return (
<hr
class={prop("divider", classes)}
style={{
"border-top-width": `${defaultThickness(props.thickness)}px`,
height: `${defaultThickness(props.thickness)}px`,
}}
/>
);
}
/**
* @param {DividerProps} props
*/
Divider.Vertical = function (props) {
return (
<hr
class={prop("divider", classes)}
style={{
"border-left-width": `${defaultThickness(props.thickness)}px`,
width: `${defaultThickness(props.thickness)}px`,
}}
/>
);
};
export default Divider;

View File

@ -0,0 +1,15 @@
.divider {
width: 100%;
border: none;
border-top-style: solid;
border-top-color: var(--palette-gray-5);
border-top-width: 0;
}
.divider-vertical {
height: 100%;
border: none;
border-left-style: solid;
border-left-color: var(--palette-gray-5);
border-left-width: 0;
}