コンポーザーの添付ファイル
添付ファイルを取り扱うコンポーザーパネル:プロンプトの上の56pxのタイルのストリップ、画像のサムネイル、もう1つのファイルのファイル名のプラグイン文書アイコン、各コーナーで区切られたファイル。 キューイングされたファイルは、別の後に1つに上陸し、ファイルのアップロードブロックが9pxのパーセンテージがコーナーにカウントアップしながら、ファイルのアップロードブロックがそのドロップゾーンをトレースする方法を強調表示し、100のパーセンテージがブアウトし、同じスポットで空白を解除します。
インストール
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
キューをアップロード
ComposerWithAttachments キューを所有します。任意のファイル attachments と、 progress: 0 その後、そのターンを待ちます, その後、そのリングを描画し、コーナーでカウントアップ; 進捗値のないファイルは、すぐに上陸として表示します. アップロードはシミュレートされるので、ブロックは、バックエンドアグノーティックにとどまります: それをチューン uploadDuration そして、 uploadGapと聞いて、 onUploadComplete そして、 onAllUploaded. 好きな時にファイルを追加します。キューの後ろに結合します。
const [files, setFiles] = useState<ComposerAttachment[]>([]);
function attach(picked: File[]) { setFiles((prev) => [ ...prev, ...picked.map((file) => ({ id: crypto.randomUUID(), name: file.name, kind: kindOf(file), progress: 0, // queued: lands after the ones before it })), ]);}
<ComposerWithAttachments attachments={files} onAttachmentsChange={setFiles} // dismissals come back through here uploadDuration={1100} // one simulated upload, ms uploadGap={240} // pause before the next ring starts, ms onUploadComplete={(file) => console.log("landed", file.name)} onAllUploaded={() => console.log("all landed")}/>タイルの種類
6種類。 image タイルを埋めます src そして霜を付けられた白い却下を得て下さい;文書、スプレッドシート、提示、コードおよびビデオ タイプは既に出荷する24pxのプラグインのアイコンを、9pxの下のファイル名とタイルにtuncated運びます。両方 ComposerAttachmentStrip シングルと ComposerAttachmentTile コンポーザー以外の表面にエクスポートされます。
{/* Six tile kinds: images show the thumbnail, the rest carry the plugin document icons */}<ComposerAttachmentStrip attachments={[ { id: "1", name: "cat.jpg", kind: "image", src: "/uploads/cat.jpg" }, { id: "2", name: "payroll.docx", kind: "document" }, { id: "3", name: "timetable.xlsx", kind: "spreadsheet" }, { id: "4", name: "launch.key", kind: "presentation" }, { id: "5", name: "types.tsx", kind: "code" }, { id: "6", name: "birthday.mp4", kind: "video" }, ]} onRemove={(id) => remove(id)}/>
{/* Or one tile at a time */}<ComposerAttachmentTile attachment={file} onRemove={() => remove(file.id)} />自分のアップローダーを持参する
リングは単なる数です。キューとハンドをスキップします。 ComposerPanel 添付ファイル自身をマッピングし、各ファイルの実際の転送進捗状況をマッピングします。 progress: リングはそれに従い、値が埋め込まれたファイルのマークをクリアします。
{/* Real uploads: feed the ring from your own progress events on the core panel */}<ComposerPanel attachments={files.map((file) => ({ ...file, progress: uploads[file.id], // 0–100 draws the ring, undefined means landed }))} onRemoveAttachment={(id) => cancel(id)}/>