SuperAPI AI 工具集

sgds-components-close-button

前端与建站

查看项目

更新于 10-16 05:49

技能介绍

用途:<sgds-close-button> 渲染标准化的关闭/取消按钮(× 图标),在 SGDS 内部被 <sgds-alert>、<sgds-drawer>、<sgds-modal>、<sgds-toast>、<sgds-badge>、<sgds-file-upload> 使用;仅当现有组件未覆盖、需要自建可关闭 UI 时才直接使用。

主要能力:提供 size 与 tone 两个属性,用于控制尺寸与配色以适配深浅背景。

使用方式:属性 size 可选 sm | md,默认 md;tone 可选 default | fixed-dark | fixed-light,默认 default。前者适配主题,fixed-light 用于深色背景,fixed-dark 用于浅色背景并覆盖主题行为。事件方面无自定义事件,交互仅触发原生 click,可用 addEventListener("click", handler) 监听。无插槽、无公开方法。

选择建议:可关闭的 alert 请改用 <sgds-alert dismissible>;drawer、modal、toast 自带关闭按钮;仅自建可关闭 UI 时直接使用本组件。

限制与前置条件:安装与框架集成参见 sgds-components-setup;不支持通过自定义属性或 CSS 部件修改样式。示例:<sgds-close-button></sgds-close-button>、<sgds-close-button size="sm"></sgds-close-button>、<sgds-close-button tone="fixed-light"></sgds-close-button>。其余细节暂未提供。