feat(components): 添加分割线组件
- 实现了一个通用的分割线组件,支持水平和垂直方向 - 添加了淡入淡出效果的可选属性 - 组件使用 SolidJS 进行构建
This commit is contained in:
29
src/components/Divider.tsx
Normal file
29
src/components/Divider.tsx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import cx from 'clsx';
|
||||||
|
import { Component, mergeProps } from 'solid-js';
|
||||||
|
|
||||||
|
interface DividerProps {
|
||||||
|
direction?: 'horizontal' | 'vertical';
|
||||||
|
faded?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Divider: Component<DividerProps> = (props) => {
|
||||||
|
const mProps = mergeProps<DividerProps[]>(
|
||||||
|
{
|
||||||
|
direction: 'horizontal',
|
||||||
|
faded: false,
|
||||||
|
},
|
||||||
|
props,
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<hr
|
||||||
|
class={cx(
|
||||||
|
'border-solid',
|
||||||
|
mProps.direction === 'horizontal' ? 'w-full border-t' : 'h-full border-l',
|
||||||
|
mProps.faded ? 'border-outline/38' : 'border-outline',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Divider;
|
Reference in New Issue
Block a user