SwAdNative

广告位四要素
使用场景：内容流内原生广告卡（列表 / 网格信息流混排；slotKey 例 home_feed）
业界形态：Native / In-feed ads（AdSDK 格式 native）
表现形态：封面图 + 标题 + 描述 + 广告主 + CTA 的卡片，贴合页面风格
打点事件：同 banner —— adImpression（IntersectionObserver 进视口一次）/ adClick；自动内置零配置，gate 关闭静默 no-op
选错场景 = 埋点 ad_type / 时机全错。按场景选组件见广告组件选型。

SwAdNative 是原生信息流广告位组件，属广告底座「文字卡片类」自渲染组件。渲染「图 + 标题 + 描述 + 广告主 + CTA」的原生卡片，融入信息流。支持 banner-list（单列大图卡）与 grid（多列宫格）布局。内置曝光 / 点击埋点。

加载中...

Props

名称	类型	必填	默认值	说明
`items`	`SwAdItem[]`	✓	—	广告创意数组（用 `image`/`title`/`description`/`advertiser`/`cta`）
`slotKey`	`string`	✓	—	广告位键 → `ad_slot_key`
`slotName`	`string`		`undefined`	广告位名 → `ad_slot_name`
`pageKey`	`string`		`undefined`	页面键 → `page_key`
`pageName`	`string`		`undefined`	页面名 → `page_name`
`ratio`	`string`		`'16/9'`	卡片主图宽高比
`radius`	`number \| string`		`8`	圆角（number=px，string 原样透传 SwImage，如 `'1.125rem'`）
`showAdLabel`	`boolean`		`undefined`	「广告」合规角标；不传时跟随全局 `swiftConfig.ad.showLabel`（默认 `true`），显式传值始终优先
`layout`	`'banner-list' \| 'grid'`		`'banner-list'`	布局：单列大图卡 / 多列宫格
`gridColumns`	`number \| { mobile?, tablet?, desktop? }`		`2`	`grid` 列数。对象形态按断点分档（<768 / 768-1023 / ≥1024），缺档就近回退（同 SwGallery columns 范式）
`gridGap`	`number \| string`		`12`	间距（number=px，string 原样使用、可引 token）

Events

名称	携带	说明
`load`	—	渲染完成
`empty`	—	`items` 为空
`impression`	`items: SwAdItem[]`	曝光（自动埋点）
`click`	`item: SwAdItem`	点击某张卡（自动埋点）
`error`	—	渲染 / 加载错误

加载中...

<SwAdNative :items="feedAds" slot-key="feed_native" page-key="discover" ratio="16/9" :radius="8" show-ad-label />

<!-- 响应式列数：移动 1 列 / 平板 2 列 / 桌面 3 列 -->
<SwAdNative :items="feedAds" slot-key="feed_native" layout="grid" :grid-columns="{ mobile: 1, tablet: 2, desktop: 3 }" />

<!-- gridGap / radius 支持 string：引 token / rem -->
<SwAdNative :items="feedAds" slot-key="feed_native" layout="grid" grid-gap="1rem" radius="0.75rem" />

CSS 变量

布局不写内联 style，全部经 CSS 变量落地 —— 业务可用普通 CSS 覆盖布局，无需 !important：

变量	默认值	说明
`--sw-ad-native-gap`	`12px`	卡片间距（对应 `gridGap`，banner-list / grid 都生效）
`--sw-ad-native-cols-mobile` / `--sw-ad-native-cols-tablet` / `--sw-ad-native-cols-desktop`	`2`	grid 三档断点列数（对应 `gridColumns`）

注意事项

卡片字段：image（主图）/ title（标题）/ description（描述）/ advertiser（广告主）/ cta（按钮文案），按 item 数据驱动。
埋点内置，受 tracker 双重 gate；完整字段见广告底座与打点。