You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
1 year ago
|
import './GridContent.less'
|
||
|
|
|
||
|
|
import type { PureSettings } from '../../defaultSettings'
|
||
|
|
import type { CSSProperties, FunctionalComponent } from 'vue'
|
||
|
|
import { getPrefixCls, routeContextInjectKey } from '#/layout/RouteContext'
|
||
|
|
|
||
|
|
type GridContentProps = {
|
||
|
|
contentWidth?: PureSettings['contentWidth']
|
||
|
|
prefixCls?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This component can support contentWidth so you don't need to calculate the width
|
||
|
|
* contentWidth=Fixed, width will is 1200
|
||
|
|
*
|
||
|
|
* @param props
|
||
|
|
* @param attrs
|
||
|
|
* @param slots
|
||
|
|
*/
|
||
|
|
const GridContent: FunctionalComponent<GridContentProps> = (props, { attrs, slots }) => {
|
||
|
|
const routeContext = inject(routeContextInjectKey, {})
|
||
|
|
const prefixCls = props.prefixCls || getPrefixCls('pro')
|
||
|
|
const contentWidth = props.contentWidth || routeContext.contentWidth
|
||
|
|
const className = `${prefixCls}-grid-content`
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
class={[className, attrs.class, { wide: contentWidth === 'Fixed' }]}
|
||
|
|
style={attrs.style as CSSProperties}
|
||
|
|
>
|
||
|
|
<div class={`${prefixCls}-grid-content-children`}>{slots.default?.()}</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default GridContent
|