mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-08-14 18:25:55 +08:00
Feat: Divider component now supports gradient background (#11130)
This commit is contained in:
parent
208d6d6d94
commit
b3d65cc7df
@ -3,17 +3,21 @@ import React from 'react'
|
|||||||
import { type VariantProps, cva } from 'class-variance-authority'
|
import { type VariantProps, cva } from 'class-variance-authority'
|
||||||
import classNames from '@/utils/classnames'
|
import classNames from '@/utils/classnames'
|
||||||
|
|
||||||
const dividerVariants = cva(
|
const dividerVariants = cva('',
|
||||||
'bg-divider-regular',
|
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
type: {
|
type: {
|
||||||
horizontal: 'w-full h-[0.5px] my-2',
|
horizontal: 'w-full h-[0.5px] my-2 ',
|
||||||
vertical: 'w-[1px] h-full mx-2',
|
vertical: 'w-[1px] h-full mx-2',
|
||||||
},
|
},
|
||||||
|
bgStyle: {
|
||||||
|
gradient: 'bg-gradient-to-r from-divider-regular to-background-gradient-mask-transparent',
|
||||||
|
solid: 'bg-divider-regular',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
type: 'horizontal',
|
type: 'horizontal',
|
||||||
|
bgStyle: 'solid',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
@ -23,9 +27,9 @@ type DividerProps = {
|
|||||||
style?: CSSProperties
|
style?: CSSProperties
|
||||||
} & VariantProps<typeof dividerVariants>
|
} & VariantProps<typeof dividerVariants>
|
||||||
|
|
||||||
const Divider: FC<DividerProps> = ({ type, className = '', style }) => {
|
const Divider: FC<DividerProps> = ({ type, bgStyle, className = '', style }) => {
|
||||||
return (
|
return (
|
||||||
<div className={classNames(dividerVariants({ type }), className)} style={style}></div>
|
<div className={classNames(dividerVariants({ type, bgStyle }), className)} style={style}></div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user