表单分区
AsamFormSection 使用标题、说明、操作区和默认内容组织长表单，不持有字段值或表单实例。可与 AsamFormGrid 组合。
标题与说明
字符串 title、description 适合常规分区；对应插槽覆盖同名文本。示例同时展示文本分区和具有标题、说明及操作插槽的分区，操作按钮只切换使用方自己的内容。
文本与插槽分区
vue
<template>
<AsamFormSection title="基本信息" description="文本属性生成分区标题和说明。">
<p class="example-paragraph">任务：装配任务 A-01</p>
</AsamFormSection>
<AsamFormSection title="被插槽覆盖的标题" description="被插槽覆盖的说明">
<template #title>
<span>排产说明 <small>可选</small></span>
</template>
<template #description>此处分区内容与折叠状态由父组件控制。</template>
<template #actions>
<AsamButton
type="default"
size="small"
:aria-expanded="expanded"
@click="expanded = !expanded"
>
{{ expanded ? '收起内容' : '展开内容' }}
</AsamButton>
</template>
<p class="example-paragraph" v-if="expanded">优先处理已核对的任务，保留当前分区的其他字段值。</p>
<output v-else>内容已收起</output>
</AsamFormSection>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamFormSectionBasicExample' });
import { ref } from 'vue';
import { AsamButton, AsamFormSection } from '@asam-ui/ui';
const expanded = ref(true);
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<AsamFormSection title="基本信息" description="文本属性生成分区标题和说明。">
<p class="example-paragraph">任务：装配任务 A-01</p>
</AsamFormSection>
<AsamFormSection title="被插槽覆盖的标题" description="被插槽覆盖的说明">
<template #title>
<span>排产说明 <small>可选</small></span>
</template>
<template #description>此处分区内容与折叠状态由父组件控制。</template>
<template #actions>
<AsamButton
type="default"
size="small"
:aria-expanded="expanded"
@click="expanded = !expanded"
>
{{ expanded ? '收起内容' : '展开内容' }}
</AsamButton>
</template>
<p class="example-paragraph" v-if="expanded">优先处理已核对的任务，保留当前分区的其他字段值。</p>
<output v-else>内容已收起</output>
</AsamFormSection>
</template>
<script setup>
defineOptions({ name: 'AsamFormSectionBasicExample' });
import { ref } from 'vue';
import { AsamButton, AsamFormSection } from '@asam-ui/ui';
const expanded = ref(true);
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>插槽与可访问性
title、description、actions 任一存在时显示头部。具有标题时，组件用自动生成的标题 ID 为 section 建立 aria-labelledby；不必手动给多个实例复用同一 ID。default 是内容区，actions 是头部操作区，插槽不携带字段值。
标题插槽仍位于组件的标题元素内，适合行内内容。组件不负责折叠、权限或提交；示例折叠状态由父组件维护。没有事件或实例方法，表单校验仍属于真实表单组件。
API
属性 AsamFormSectionProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title | — | string | undefined | — |
description | — | string | undefined | — |
插槽 AsamFormSectionSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => unknown) | undefined | — |
title | — | (() => unknown) | undefined | — |
description | — | (() => unknown) | undefined | — |
actions | — | (() => unknown) | undefined | — |
关联组件
参数与事件补充说明
参数与事件说明
title
必填：否；声明来源：ASAM 声明。
description
必填：否；声明来源：ASAM 声明。
AsamFormSectionProps 公开类型视图
ts
import type { AsamFormSectionProps } from '@asam-ui/ui';
// AsamFormSectionProps
type PublicContract = {
"title"?: string | undefined;
"description"?: string | undefined;
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
title
必填：否；声明来源：ASAM 声明。
title 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
description
必填：否；声明来源：ASAM 声明。
description 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
actions
必填：否；声明来源：ASAM 声明。
actions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamFormSectionSlots 公开类型视图
ts
import type { AsamFormSectionSlots } from '@asam-ui/ui';
// AsamFormSectionSlots
type PublicContract = {
"default"?: (() => unknown) | undefined;
"title"?: (() => unknown) | undefined;
"description"?: (() => unknown) | undefined;
"actions"?: (() => unknown) | undefined;
};