재고

번들이 제공하는 모든 요소와 제공되는 형식. 이 표는 누구나 유지하는 목록이 아니라 각 번들이 발행하는 레지스트리로, 선언에서 컴파일되고 구성 요소의 점검과 비교됩니다. 여기에는 무엇이 있는지 — 무엇이 있어야 하는지는 포함되지 않으며, 이는 어떤 스캔으로도 해결할 수 없는 질문이고, 요소들이 스스로 선언해야 하는 것입니다.

계산된 항목	몇 개
발견된 요소	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`는 열두 개의 입력이 구축되는 기반입니다. 그들은 형태와 마찬가지로 매트릭스에서 제외되며, 아무에게도 제공되지 않기 때문에 스키마나 리액트 쌍에 대해 요청하는 것은 그들이 대답할 방법이 없는 질문을 하는 것입니다. 밑줄은 아무도 디렉토리를 열기 전에 그렇게 말합니다. 보여지는 것은 누구나 확장하는 각자가 이미 제공하는 것입니다.

요소	스타일	템플릿	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/`로 이동하여 매트릭스에 합류합니다. 그 이동이 유일한 승진입니다. 각자가 자신에 대해 말하는 것은 자신의 스타일 시트의 머리에서 읽히므로, 다른 곳에서 drift할 수 있는 두 번째 장소는 없습니다.

형태	용도
`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/`의 디렉토리, 메모리가 아닌 디스크에서 나열됩니다. 믹스인, 유틸리티 및 토큰은 요소가 아니며 여기에 행이 될 수 없습니다; 레이아웃 및 공유 스크립트는 요소이며 아직 다루어지지 않았습니다.

@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