knowai/src/components/Container

Container 容器组件

Container组件是一个布局容器组件，用于控制内容区域的宽度、内外边距、背景色和阴影等样式，提供灵活的页面布局能力。

参数接口 (Props)

参数名	类型	默认值	说明
fluid	boolean	false	是否为流体布局，占据整个父容器宽度
maxWidth	string | number	''	容器最大宽度，支持数字(px)或字符串
padding	string | number | number[]	''	内边距，支持数字(px)、字符串或数组[上,右,下,左]
margin	string | number | number[]	''	外边距，支持数字(px)、字符串或数组[上,右,下,左]
center	boolean	true	是否水平居中
bgColor	string	''	背景颜色
borderRadius	string | number	''	边框圆角，支持数字(px)或字符串
shadow	'always' | 'hover' | 'never'	'never'	阴影效果

插槽 (Slots)

插槽名	说明
default	容器内容区域

事件 (Events)

Container组件没有提供事件。

使用示例

<template>
  <!-- 基础用法 -->
  <Container>
    <p>容器内容</p>
  </Container>
  
  <!-- 流体布局 -->
  <Container fluid>
    <p>占据整行的流体容器</p>
  </Container>
  
  <!-- 自定义最大宽度 -->
  <Container maxWidth="1200">
    <p>最大宽度为1200px的容器</p>
  </Container>
  
  <!-- 自定义内外边距 -->
  <Container padding="20" margin="10">
    <p>有内外边距的容器</p>
  </Container>
  
  <!-- 数组形式的边距设置 -->
  <Container padding="[20, 10, 20, 10]" margin="[10, 20]">
    <p>使用数组设置边距的容器</p>
  </Container>
  
  <!-- 自定义背景和圆角 -->
  <Container bgColor="#f5f5f5" borderRadius="8">
    <p>有背景色和圆角的容器</p>
  </Container>
  
  <!-- 阴影效果 -->
  <Container shadow="always">
    <p>始终显示阴影的容器</p>
  </Container>
  
  <Container shadow="hover">
    <p>鼠标悬停时显示阴影的容器</p>
  </Container>
  
  <!-- 复合配置 -->
  <Container 
    maxWidth="800" 
    padding="24" 
    bgColor="#fff" 
    borderRadius="12" 
    shadow="always"
  >
    <p>完整配置的容器示例</p>
  </Container>
</template>