用法

什么时候用它

展示可搜索的内容归档，筛选逻辑和数据访问仍由应用负责。

来自@misoto22/folio/website

TSX

import { ContentBand } from '@misoto22/folio/website'

实践建议

避免

不要在展示组件中放入服务凭据、路由逻辑或后端模型。

示例

可搜索的条目

搜索和分类状态由应用维护，应用将筛选后的条目传入组件。控件提供具名输入框、清空操作和筛选按钮的选中状态。

Library

Essays and projects from the studio.

A practice of attention

Noticing what a familiar place reveals.

projects

The shared library

A small tool for a growing collection.

组成部分

在调用处组合，而不是通过 props 配置——所以这个组件没有预料到的布局，依然表达得出来。

CollectionIntro

CollectionIntro props
属性	类型	默认值	说明
title必填	`ReactNode`		—
actions	`ReactNode`		—
compact	`boolean`	`false`	—
context	`ReactNode`		—
description	`ReactNode`		—
media	`ReactNode`		—

CollectionMetadata

CollectionMetadata props
属性	类型	默认值	说明
items必填	`CollectionMetadataItem[]`		—

CollectionGroup

CollectionGroup props
属性	类型	说明
caption	`ReactNode`	—
compact	`boolean`	—
headingId	`string`	—
title	`ReactNode`	—

同时接受 Omit<HTMLAttributes<HTMLElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。

CollectionSearch

CollectionSearch props
属性	类型	默认值	说明
clearLabel必填	`string`		—
label必填	`string`		—
onChange必填	`(value: string) => void`		—
value必填	`string`		—
focusShortcut	`boolean`	`false`	—
placeholder	`string`		—

CollectionControls

CollectionControls props
属性	类型	默认值	说明
items必填	`CollectionFilter[]`		—
onSelect必填	`(value: string \| null) => void`		—
selected必填	`string \| null`		—
filterLabel	`string`		—
quiet	`boolean`		—
search	`CollectionSearchProps`		—
showCounts	`boolean`	`true`	—

HighlightedText

HighlightedText props
属性	类型	说明
query必填	`string`	—
text必填	`string`	—
className	`string`	—

RecordRow

RecordRow props
属性	类型	默认值	说明
title必填	`ReactNode`		—
context	`ReactNode`		—
headingLevel	`2 \| 3`	`2`	—
index	`ReactNode`		—
link	`CollectionLink`		—
media	`ReactNode`		—
metadata	`ReactNode`		—
subtitle	`ReactNode`		—
summary	`ReactNode`		—
trailing	`ReactNode`		—
variant	`'editorial' \| 'media' \| 'compact'`	`'editorial'`	—

FeaturedRecord

FeaturedRecord props
属性	类型	说明
media必填	`ReactNode`	—
title必填	`ReactNode`	—
action	`ReactNode`	—
context	`ReactNode`	—
summary	`ReactNode`	—

CollectionEmpty

CollectionEmpty props
属性	类型	说明
message必填	`string`	—
action	`ReactNode`	—
hint	`string`	—

CollectionFooter

CollectionFooter props
属性	类型	默认值	说明
children	`ReactNode`		—
feedback	`ReactNode`		—

TaxonomyLinks

TaxonomyLinks props
属性	类型	默认值	说明
children必填	`ReactNode`		—
label	`string`		—

ReferenceLink

用于引用资料的轻量链接，与操作按钮区分。

这个组件没有自己的属性。

ReferenceRows

ReferenceRows props
属性	类型	默认值	说明
items必填	`{ id?: string; label: ReactNode; hint?: ReactNode; content: ReactNode }[]`		—

CollectionTally

CollectionTally props
属性	类型	默认值	说明
children必填	`ReactNode`		—

CollectionList

CollectionList props
属性	类型	默认值	说明
children必填	`ReactNode`		—

同时接受 HTMLAttributes<HTMLUListElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。

类型

TSX

export type CollectionLink = ReactElement<{ children?: ReactNode }>

Collection - 内容集合

用法