Item

Item component - composable list item display

案例展示

列表项在实际场景中的使用示例

文件管理器

My Projects
12 items
Design System
8 filesModified 2h ago
project-brief.md
24 KBModified just now
hero-banner.png
2.4 MB1920 × 1080
background-music.mp3
5.8 MB3:42

团队成员

Team Members
SC
Sarah Chen
Admin
Lead Designer • San Francisco
Online
MK
Mike Kim
Frontend Developer • Seoul
Online
EJ
Emma Johnson
Product Manager • London
Away
DW
David Wang
Backend Developer • Beijing
Offline

设置菜单

Account
Profile
Notifications3
Security
Billing
Payment Methods
Sign Out

通知列表

Notifications
JD
John Doe commented on your post
"This looks amazing! Great work on the..."
2m
AS
Amy Smith starred your project
Design System v2.0
15m
Meeting reminder: Design Review
Tomorrow at 2:00 PM
1h

右键菜单

Edit
⌘E
Copy
⌘C
Share
Archive
Pin to Top
Delete
⌘⌫

任务列表

Today's Tasks
4 remaining
Review pull request #234
Completed 2 hours ago
Update component documentation
In Progress
Due today
Design new landing page
Design
Due tomorrow
Fix authentication bug
Bug
High priority

变体

列表项的不同样式变体

Default
Default
Outline
Outline
Ghost
Ghost

选中状态

列表项的选中与未选中状态

Inactive Item
Not selected
Inactive
Active Item
Currently selected
Active