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