组件 · 通用

Logo 标识

产品标志展示。

入口 @selrux/ui/logo · 源码 src/components/logo/index.ts · 1 个组件 · 发布状态 preview

使用建议

避免：拉伸破坏比例
限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx

12345678import {
  Logo,
  normalizeLogoDisplay,
  resolveLogoAlt,
  resolveLogoRenderFlags,
  resolveLogoSize,
  useLogoDisplayState,
} from '@selrux/ui/logo';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

代码演示

基础用法

src 为标识图形，title 为名称。默认 display="lockup" 图形加文字。

展示形态

mark 仅图形，text 仅文字，lockup 图形加文字。

Selrux

尺寸

size 六档。

受控形态与锁定图

defaultDisplay 为非受控初始形态，onDisplayChange 在可用空间变化时回调；lockupSrc 提供完整锁定图；alt 为图片替代文本。

拖动右下角缩放容器；当前形态：-

API

属性覆盖：示例用到 9 / 9 个自有属性（100%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

Logo

主题化品牌 Logo。

属性	说明	类型	默认值
`size`	六档尺寸；对应市面常见 logo 高度。	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	-
`display`	受控显示模式。与 `defaultDisplay`：有本值则为受控。	`"text" \| "mark" \| "lockup"`	-
`defaultDisplay`	非受控初始显示模式。	`"text" \| "mark" \| "lockup"`	`'mark'`
`onDisplayChange`	显示模式变更；与当前值相同时不回调。	`((display: LogoDisplay) => void)`	-
`src`	小标图地址（mark / text）。	`string`	-
`lockupSrc`	长 logo 整图地址（仅 lockup）。	`string`	-
`title`	标题（text 模式；建议提供）。	`ReactNode`	-
`subtitle`	副标题（text 模式，可选）。	`ReactNode`	-
`alt`	图片替代文本。	`string`	`字符串 title 或 'Logo'`
`onClick`	点击；为后续跳转预留，有值时根可键盘激活。	`MouseEventHandler<HTMLSpanElement>`	-

另有 278 项原生属性与事件继承自 HTMLAttributes，原样透传。

导出类型：LogoDisplay、LogoProps、LogoRenderFlags、LogoSize、UseLogoDisplayStateInput

函数与常量

名称	说明	签名 / 类型
`normalizeLogoDisplay`	校验并归一化显示模式。	`(value: LogoDisplay \| undefined, fallback: LogoDisplay) => LogoDisplay`
`resolveLogoAlt`	从 title 推导默认 alt。	`(alt: string \| undefined, title: ReactNode \| undefined) => string`
`resolveLogoRenderFlags`	按 display 解析渲染标志；保证长图与文字不同时出现。	`(display: LogoDisplay) => LogoRenderFlags`
`resolveLogoSize`	解析 Logo 尺寸：组件 prop → Provider → md。	`(size: LogoSize \| undefined, configured: ControlSize \| undefined) => LogoSize`
`useLogoDisplayState`	Logo 显示模式的受控/非受控状态。组件内无切换 UI 时，调用方可用返回的 `setDisplay` 做侧栏折叠等切换。	`(input: UseLogoDisplayStateInput) => { readonly display: LogoDisplay; readonly setDisplay: (next: LogoDisplay) => void; readonly controlled: boolean; }`

摘自源码 JSDoc。

Logo.onClick：点击；为后续跳转预留，有值时根可键盘激活。