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