组件 · 文件
FilePreview
A small icon that shows a file's type — a document, an archive, code or a media thumbnail — with a chip that names the type.
也叫 File icon
import { FilePreview } from "@botiverse/raft-ui";A 40px icon that shows what kind of file something is: a page for a document, an archive, a code sheet, or a thumbnail of an image or video, with a small chip that names the type. It stands before a file's name wherever files are listed.
When to use
| Situation | Use |
|---|---|
| A file in the composer, before it is sent | FilePreview, in the composer's attachment (Composer) |
| A file in a list of files | FilePreview at the start of the row |
| The type, next to a name in a line of text | FilePreviewBadge with placement="inline" |
| A file attached to a sent message | The file card (MessageAttachment) |
Anatomy
FilePreview: the 40px box. Required.- One drawing of the file, required:
FilePreviewDocument: a page with lines, for documents;FilePreviewCode: a sheet of code;FilePreviewFile: an archive or any other file;FilePreviewMedia: a thumbnail; put the image or a video poster inside.
FilePreviewBadge: the type chip. On the icon it sits at the bottom corner (placement="corner"); in a line of text it stands before the name (placement="inline").
Variants
| Variant | Use for |
|---|---|
| Document | PDF, DOCX, TXT and other documents |
| Code | Source files, HTML |
| File | Archives and anything else |
| Media | Images and video, showing the file itself |
Content
- Name documents by their extension in the badge: PDF, DOCX, TXT.
- For code, images and other files, let the drawing say the type.
- Write the extension in capitals. It is an abbreviation, not all-caps styling (Typography).
Accessibility
- The drawings are decorative and hidden from assistive technology. The file name next to the icon says what the file is; don't rely on the icon alone.
- The badge text is read as written.
Rules
- Keep the type chip neutral:
fill-mutedwith a hairline, Space Mono. The name beside it carries the meaning, so the type doesn't get a color. - Don't color a file by its type: a color that means nothing is removed (Color). Only a media thumbnail shows color, because it is the file itself.
API
FilePreview
| Prop | 类型 | 默认值 |
|---|---|---|
| Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ReactElement | ((props, state) => ReactElement) |
Also takes the attributes of its element.
FilePreviewBadge
| Prop | 类型 | 默认值 |
|---|---|---|
| "inline" | "corner" | "corner" | |
| Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ReactElement | ((props, state) => ReactElement) |
Also takes the attributes of its element.
FilePreviewCode, FilePreviewDocument, FilePreviewFile, FilePreviewMedia
| Prop | 类型 | 默认值 |
|---|---|---|
| Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ReactElement | ((props, state) => ReactElement) |
Also takes the attributes of its element.
相关组件
改动
- 0.6.0 · Breaking ChangesProps that no longer change anything are removed:
Badgeuppercase;Checkboxsize,variant,color;Statuspulse,attention(status never animates);Switch/SwitchThumbsize;SidebarItemvariant;SidebarItemCount/SidebarItemIndicatorvariantandappearance(the count is always the pink sticker, the indicator the yellow @);NotificationCenterActionButtonvariant;DrawerContentwidth(one-go forms use the wideDialog);AppRailItemIndicatorattention;AppRailItemAttentionchildren;Stepssize,track,renderIndicator,renderTraveler;FilePreviewBadgetype,color. Remove them at call sites. - 0.6.0 · Added
FilePreviewBadgeplacement="inline": the file-type chip before a name ("corner"stays the default). - 0.1.0 · AddedAdded
ConversationPanel,ThreadPanel,Panel,ScrollArea,FilePreview,RaftLogo/ lockup / wordmark, andMobileNav.