feat(ui): 新增 TextButton / ToggleRow,Table 支持紧凑档
- TextButton:文字按钮(tone 主色/危险、可选图标、disabled), 用于表格行内操作,hover 只加下划线 - ToggleRow:左标签 + 右开关的开关行,支持 hint 与 switchLabel - Table:新增 size='md' | 'sm',sm 把行内边距收到 space-2 - 展示页:按钮补「文字按钮」、开关补「开关行」、表格补「紧凑档」; COMPONENTS.md 契约 3.46 / 3.47 与 README 清单同步
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
.root {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--su-space-1);
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: var(--su-font-size-sm);
|
||||
line-height: var(--su-line-height-sm);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: opacity var(--su-duration-fast) var(--su-ease-out);
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: var(--su-color-primary);
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: var(--su-color-danger);
|
||||
}
|
||||
|
||||
.root:hover:not(:disabled) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.root:focus-visible {
|
||||
border-radius: var(--su-radius-xs);
|
||||
outline: var(--su-focus-ring);
|
||||
outline-offset: var(--su-focus-ring-offset);
|
||||
}
|
||||
|
||||
.root:disabled {
|
||||
color: var(--su-text-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-flex;
|
||||
font-size: var(--su-font-size-md);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.root {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user