feat(compo):增加分割线组件。
This commit is contained in:
parent
6d406f8ee3
commit
8642eb12a1
41
src/components/Divider/Divider.jsx
Normal file
41
src/components/Divider/Divider.jsx
Normal 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;
|
15
src/components/Divider/Divider.module.css
Normal file
15
src/components/Divider/Divider.module.css
Normal 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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user