<template>
  <div class="kole-container kole-container-surface"><strong class="kole-container-title">{{ title || '布局容器 Container' }}</strong><p class="kole-container-desc">组合页面级 Header、Sider、Main 与 Footer，统一内容宽度和间距。</p><slot /></div>
</template>

<script>
export default {
  name: 'KoleContainer',
  props: {
    direction: { type: String, default: 'column' }, // 方向
    width: { type: String, default: '100%' }, // 宽度
    gap: { type: String, default: '16px' }, // gap
  },
};
</script>

<style src="./Container.css"></style>
