库存

每个捆绑包所包含的元素以及它们交付的格式。这个表不是任何人维护的列表：它是每个捆绑包所发货的注册，汇编自其声明并检查其组件的走访。它回答的是有哪些 — 而不是应该有哪些，这是扫描无法解决的问题，元素必须自行声明。

计数	数量
发现的元素	131
待完成的格式	541
尚未做出的决定	0
形状	61
抽象基类	6
样式	103
模板	91
Vue	100
脚本	63
架构	0
AI	0
React	0
Flutter	0

按格式的元素

每个组件一行，每个渲染器一列。组件是 `components/` 目录下的一个目录，包含它能被绘制的所有方式 — `spinner/spinner.scss`，`spinner.html.twig`，`spinner.vue`，`spinner.ts` — 所以这里没有必要再按名称调和四个目录。每个单元格计算其背后的文件 — 将鼠标悬停在一个上以查看它们。每个已声明的元素在相同级别读取 — 在单一格式中找到的一行可能是一个间隙或希望没有其他内容的原始元素，理清这一点是这个表的工作，而不是它已经知道的事情。四种状态，通过下一步是谁的移动区分：检查，元素存在；警告，想要但缺失；划掉的圆圈，故意不使用；空白，尚未有人裁定。将鼠标悬停在警告或圆圈上以查看声明所说的内容。

元素	模板	Vue
@WexampleSymfonyCodingBundle
`code-input`		2
`console`		2
`source-editor`		2
`source-findings`		2
`source-view`		2
@WexampleSymfonyDesignSystemBundle
`banner`	2	2
`bar`		2
`breadcrumb`		2
`button`		2
`button-link`		2
`button-menu`		2
`button-target`		2
`code-block`		2
collection/bar-list/`abstract-entity-bar-list`		2
collection/chat/`abstract-entity-chat`		2
collection/grid/`abstract-entity-grid`		2
collection/table/`abstract-entity-table`		2
collection/wall/`abstract-entity-wall`		2
`color-scheme-switch`
`confirm`
`content-image`		2
`copy-button`
`count-badge`
`data-table`		2
`date-display`		2
`dev-menu`
`diff`
`distribution`		2
`dock`	2
`document-embed`		2
`dots`		2
`dropzone`
`embed`
`fallback`
`file-explorer`		2
`file-path`		2
`filter-bar`		2
form/`button-input`		2
form/`checkbox-input`		2
form/`date-input`		2
form/`datetime-input`		2
form/`email-input`		2
form/`emoji-picker`		2
form/`file-input`		2
form/`hidden-input`		2
form/`number-input`		2
form/`otp-input`		2
form/`password-input`		2
form/`radio-input`		2
form/`range-input`		2
form/`select-input`		2
form/`submit-input`		2
form/`switch-input`		2
form/`tel-input`		2
form/`text-input`		2
form/`textarea-input`		2
form/`time-input`		2
form/`url-input`		2
form/`week-input`		2
`graph-log`		2
`image-crop`		2
`inline-svg`
`isolated`
`led`
`list-expanded`		2
`live-update-status`		2
`load-more`		2
`marker`		2
`media`		2
`menu-collapsible-panel`
`menu-item-collapsible`
`menu-item-link`		2
`menu-navigation`
`menu-separator`		2
`message`		2
`modal`	2
`overlay`	2
`page-tabs`
`pagination`		2
`panel`	2
`period-nav`		2
`progress-bar`		2
`properties`		2
`select`
`select-search`
`spinner`		2
`status-icon`		2
`stepper`		2
`switch`		2
`tab`		2
`tab-item`
`text-link`		2
`theme-select`
`timeline`		2
`toast`	2	2
`toast-stack`
`tool-dock`
`tooltip`
`tour`
`tree`		2
`tree-node`		2
`tree-row-directory`		2
`tree-row-file`		2
`upload-handler`
`wall`
`zone-collapsible`		2
`zone-resizer`		2
`zone-toolbar`
@WexampleSymfonyDesignSystemDemoBundle
collection/bar-list/`demo-bar-list`		2
collection/chat/`demo-entity-chat`		2
collection/table/`demo-compact-table`		2
collection/table/`demo-dates-table`		2
collection/table/`demo-entity-table`		2
collection/table/`demo-live-table`		2
collection/table/`demo-selectable-table`		2
collection/wall/`demo-entity-wall`		2
`demo-console`		2
`demo-dates`		2
`demo-distribution`		2
`demo-explorer`		2
`demo-file-explorer`		2
`demo-image-crop`		2
`demo-keyboard`		2
`demo-period`		2
`demo-progress`		2
`demo-status-icons`		2
`demo-tabs`		2
form/`demo-form`		2
search/`demo-search-box`		2
search/result/`demo-message`		2
search/result/`demo-room`		2

抽象

在 `components/_abstract/` 下的五个基类，永远不会被绘制 — 它们只是被扩展。`_abstract/vue` 是三个空的 twig 块，三十一种模板填充；`_abstract/form-field` 是构建十二个输入的基础。它们在矩阵之外是因为形状也如此：它们不交付给任何人，因此询问它们的架构或 react 双胞胎就是在问一个它们无法回答的问题。下划线在任何人打开目录之前就表明了这一点。所显示的是每个扩展它所带来的内容。

元素	样式	模板	Vue	脚本	架构	AI	React	Flutter
`_abstract/form-field`
`_abstract/vue`
`_abstract/form`
`_abstract/vue-wrapper`
`_abstract/entity`
`_abstract/entity/bar`

形状

形状是一种没有渲染器的样式：你编写标记，将类放在其上，并从自己的样式表中 `@use` 样式表。`.stack`，`.grid`，`.block`，`.cluster`。它们在这里列出，而不是在上面的表中，因为渲染器的表没有列出没有渲染器的内容 — 它们的缺失正是为什么它的警告都意味着工作而不是一个问得不好的问题。界限由文件划定，而不是由品味：一个形状恰好是一个 `.scss`，没有任何东西渲染它，因此当获得一个 `.html.twig` 时，它移动到 `components/` 并加入矩阵。这个移动是唯一的晋升。每个关于自己的声明是从其自己的样式表的头部读取的，因此没有第二个位置可以漂移。

形状	用途
`action-icon`	A muted icon button for a secondary action sitting in a corner — close, expand, dismiss —, its corners the controls' own: no button of the design system is round.
`action-link`	An inline link with an icon beside its label, muted until hovered, for a secondary action inside text or a row.
`avatar`	A round frame at text size holding a portrait, an icon or initials, cropped to fill.
`block`	The card: a raised rectangle with a title, a body, media, meta and a footer, each optional.
`chat`	A conversation — the thread of messages, their authors and dates, and the composer under it.
`cluster`	A row of small things that wraps when it runs out of room: tags, pills, buttons.
`container`	Centres its content and caps its width at one of the reading sizes.
`content`	Prose written elsewhere — an article, a description, rendered markdown — given spacing, headings and figures.
`corner-actions`	Icon actions in the corner of a framed thing — a code block, a lead, a block, a message —, out of the way until it is pointed at or reached by the keyboard.
`count`
`diff`	What changes, field by field: what it was and what it becomes, facing each other across an arrow — the value that goes struck, the one that stays in full. Read in a sync under review, a record's history, a change to confirm.
`disk-item`	A file or a directory shown as an icon with its name under it.
`disk-item-explorer`	The grid that lays disk items out, wrapping at a fixed item width.
`doc`	A documentation page: sections in two columns, the prose on one side and the code on the other.
`empty`	What stands where a list, a table or a panel has nothing to show: said once, in the middle of the room the rows would have taken, and quietly — nothing having happened is not an error.
`file-chip`	Files held by a field, one chip each: a thumbnail when it is an image, its kind's icon otherwise, its name — cut, whole in its title —, and the way to take it out. What a media picker shows of its choice, what a file field shows of the files dropped on it.
`flow`	The default vertical rhythm between blocks, and `no-flow` to drop it where it is unwanted.
`footer`	The strip closing a page, aligned on the same gutters as the rest of it.
`form`	Every form shape at once, for whoever draws a form and does not want to name them one by one.
`form/actions`	The row closing a form, where its buttons sit.
`form/addon`	A field with a fixed word beside its value — a unit, a currency — that is not part of it. The frame is the group's: it draws the field's border and ground, the input inside drops its own, so the word and the value sit in one field. The ring of focus goes round the whole, the frozen look too.
`form/assisted`	A field whose value is being filled for it, and how it reads while that happens.
`form/base`	What every input and textarea looks like before anything is said about it.
`form/checkbox`	A checkbox and its label, as a row that can be clicked whole.
`form/filter`	A field narrowing what is shown beside it — a table's rows, a menu's items, a folder's files: a magnifier and what is typed, in one frame. Written on a field with a word beside it (`form--input-group`), the magnifier being that word: <div class="form--input-group form--filter"> <span class="form--input-addon" aria-hidden="true">{{ icon('ph:bold/magnifying-glass') }}</span> <input class="form--input" type="search"> </div>
`form/inline`	A field and what acts on it, on one line: a message and its Send, a name and its Add, a search and its filter. The field takes the room, what acts on it keeps its width and never goes to another line — the shape a bar of options holds (shapes/toolbar), and a form of one question anywhere else.
`form/layout`	The frame of a form: its groups, their labels, and how they follow one another.
`form/messages`	The help text under a field, and the errors that replace it.
`form/password`	A password field and the control revealing what it holds.
`form/radio`
`form/select`	A native select made to read like the other inputs, caret included.
`form/state`	What a field looks like when it is focused, in error, or refusing input.
`form/stepper`	A number changed one step at a time — a quantity —: a button on each side of its figure. The figure keeps the width of a few digits, centred; the browser's own spinner, too small to aim at, is left out.
`form/surface`	Form fields set on a raised ground rather than on the page.
`form/switch`	A checkbox drawn as a switch.
`graph`	The frame a chart is drawn in, filling what it is given and clipping what overflows.
`grid`	Columns that fit themselves to the room available, or a fixed number when asked.
`gutters`	The horizontal and vertical margins a page keeps at its edges, shared so its parts line up.
`header`	The bar at the top of a page: its title, and the controls that belong to it.
`layout`	The frame of a page — a horizontal or vertical split, and a body that scrolls or does not.
`layout-reset-modern`	The reset: box model, margins, lists and typographic defaults, applied once to the document.
`lead`	An introductory paragraph, set apart in italics inside a dotted frame.
`media`	An image or a video held at a ratio — square, round, 16:9 — cropped rather than distorted.
`menu`	A menu, as a bar or as a column: its items, their icons, their counts and their submenus.
`meta-bar`	A thin line of secondary information between two separators, its groups pushed to either end.
`overlay-resizer`	The edges of a box that can be sized: strips lying across its border, drawn nothing — the cursor is what says the edge can be pulled.
`page`
`page-actions`	What a page does, at its foot: its actions in one row, whatever holds the page — a modal, a panel, an embed, the page's own zone. The first group stands at the start, the last one at the end: previous and next, cancel and save.
`page-loading`	A page on its way into the room it will fill — an embed today, a modal or a panel tomorrow: the manager wears `is-page-loading`, the page it held dims, and a spinner stands in the middle of the room.
`page-transition`	A page replaced by the next inside what holds it — a step of a tunnel in a modal: the one leaving slides a few pixels the way the visitor goes and fades, the one arriving comes in from the other side. Only a page marked `data-page-transition="slide"` moves; the classes are the page manager's.
`rail`	A column with a scrolling track between fixed ends, for a side panel or a toolbar of its own.
`stack`	Children laid in a row or a column with one gap, optionally split at a point or divided by rules.
`status-bar`	The line at the foot of what it describes — a listing, an editor, a card — saying where it stands: how many there are, which language, whether what is shown is saved. Read and never acted on: what is done to the thing is its footer's (`block--footer`), and what leads to it is a breadcrumb's. Its height is its own, the same empty or not, so what it sits under does not jump when a word comes and goes. The part said last, at the far end, is `status-bar--end`.
`surface`	The raised ground a block sits on, and the class that tells its children they are on one.
`table-sort`	A header that sorts — a table's, a listing's — is a button dressed as the header it sits in, so the row of labels reads the same sortable or not. The arrow is always there: a faint pair while the column does not order the list, one strong arrow once it does.
`timeline`	Things one under the other, each on a marker, joined by a line: the steps of a procedure, the events of a history, the stages of a run. What each holds is free — a title, a line of text, a table, a form — and the line runs down the whole height of it, to the next marker.
`toolbar`	A row of controls above or below what they act on, grouped and separated.
`upload-tray`	The rows of the uploads window: the design system's progress bar for each file — its name, how far it got —, and what came of it under it.
`wall`	Pictures of every height packed side by side with no holes, each one at its own ratio, as a photo wall is hung. The rows are a twelfth of a column's width, so a tile is as tall as its ratio says by spanning that many twelfths: `grid-row-end: span 9` for a 4:3 landscape — what wallSpan() and the wall template work out from a width and a height. Measuring a column needs the wall to be a container, which is why the tiles sit in a box of their own: a grid cannot read its own width. <div class="wall"> <div class="wall--tiles"> <a class="wall--tile media media--placeholder" style="grid-row-end: span 9">…</a> </div> </div>
`zone`	A region of a layout given its own size, splittable, scrollable, and never handing that size to its children.
`zone-table`	A zone given whole to a table: the table is the region, not a sheet laid in it. Whatever drives the table — its search, its filters, its bulk actions — stands at the top, its pages at the foot, both out of what scrolls; between them the table's own ground runs to the bottom of the zone however few rows there are, and the rows scroll under a header that stays. Any table of the system goes in it, written by the server or by a vue, with whatever holds it on the way — a collection, a mounted component: each of them, down to the table's frame, becomes a column handing its height on.

这遗漏了什么

扫描未走过的 `assets/` 目录，从磁盘而不是内存列出。Mixins、实用程序和令牌不是元素，可能永远不会在这里成为行；布局和共享脚本是，并且尚未覆盖。

@WexampleSymfonyDesignSystemBundle/common@WexampleSymfonyDesignSystemBundle/css/fonts@WexampleSymfonyDesignSystemBundle/css/mixins@WexampleSymfonyDesignSystemBundle/css/partials@WexampleSymfonyDesignSystemBundle/css/primitives@WexampleSymfonyDesignSystemBundle/css/utilities@WexampleSymfonyDesignSystemBundle/fixtures@WexampleSymfonyDesignSystemBundle/js@WexampleSymfonyDesignSystemBundle/layouts@WexampleSymfonyDesignSystemBundle/partials@WexampleSymfonyDesignSystemDemoBundle/Common@WexampleSymfonyDesignSystemDemoBundle/Entity@WexampleSymfonyDesignSystemDemoBundle/Repository@WexampleSymfonyDesignSystemDemoBundle/forms@WexampleSymfonyDesignSystemDemoBundle/layouts@WexampleSymfonyDesignSystemDemoBundle/pages@WexampleSymfonyDesignSystemDemoBundle/partials@WexampleSymfonyCodingBundle/common@WexampleSymfonyCodingBundle/js

这些来自哪里

一个捆绑包在表中是因为它这样说 — 通过实现 `DesignSystemElementsBundleInterface`，捆绑包向加载器说明其前端路径的方式。每个都在自己的资产中写入 `data/elements.json`，与它们一起发布，因此构建、节点端、其他语言或代理都从相同的文件工作；这个页面只是它们的联合。

@WexampleSymfonyDesignSystemBundle@WexampleSymfonyDesignSystemDemoBundle@WexampleSymfonyCodingBundle