# Section

内容分区组件，用于页面中对内容区域进行分组并提供标题标识。

## 适用场景

- 页面内容分区，为不同区块添加统一样式的标题
- 需要主标题、副标题、注释说明的内容区域
- 表单或信息展示页面的分组标题

## Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| size | `"sm" \| "md" \| "lg" \| "xl" \| "xxl"` | 取 config context `baseSize` | 否 | 尺寸 |
| headlinePrimary | `ReactNode` | `-` | 否 | 标题 |
| headlineSecondary | `ReactNode` | `-` | 否 | 副标题 |
| headlineNote | `ReactNode` | `-` | 否 | 标题注释 |
| headlineStyle | `"bar" \| "plain"` | `"bar"` | 否 | 标题样式 |

## 典型用法

### 基础用法

```tsx
import { Section } from '@befe/brick'

function Demo() {
    return (
        <div>
            <Section headlinePrimary="标题">
                <p>内容区域</p>
            </Section>
            <Section
                headlinePrimary="标题"
                headlineSecondary="副标题"
                headlineStyle="plain"
            >
                <p>内容区域</p>
            </Section>
        </div>
    )
}
```

### 标题注释（headlineNote）

```tsx
import { Section, Link, Icon, Tooltip } from '@befe/brick'
import { SvgSignInfo } from '@befe/brick-icon'

function Demo() {
    return (
        <Section
            headlinePrimary="标题"
            headlineSecondary="副标题"
            headlineNote={(
                <>
                    <span>一些简单的说明文字，和一个 </span>
                    <Link href="https://www.baidu.com" target="_blank" type="intensive">链接</Link>
                    <span>，和一个图标 tip </span>
                    <Tooltip type="hover" placement="right-start" content="some tips" reverseColor={false}>
                        <div>
                            <Icon svg={SvgSignInfo} style={{ color: '#4C84FF' }} />
                        </div>
                    </Tooltip>
                </>
            )}
        >
            <p>内容区域</p>
        </Section>
    )
}
```

### 尺寸

```tsx
<Section headlinePrimary="标题14px" headlineSecondary="副标题12px" size="sm">...</Section>
<Section headlinePrimary="标题16px" headlineSecondary="副标题14px" size="md">...</Section>
<Section headlinePrimary="标题20px" headlineSecondary="副标题16px" size="lg">...</Section>
<Section headlinePrimary="标题24px" headlineSecondary="副标题20px" size="xl">...</Section>
<Section headlinePrimary="标题32px" headlineSecondary="副标题24px" size="xxl">...</Section>
```

## 注意事项

- 不支持 `props.style`（组件原则上不鼓励内联样式，详见 getting-started FAQ）