# ez-form-view



<!-- Auto Generated Below -->


## Properties

| Property         | Attribute       | Description                                                               | Type               | Default     |
| ---------------- | --------------- | ------------------------------------------------------------------------- | ------------------ | ----------- |
| `fields`         | --              | Define a lista de metadados usada para criar os campos de user interface. | `IFormViewField[]` | `undefined` |
| `selectedRecord` | --              | Define os registros da linha selecionada.                                 | `Record`           | `undefined` |
| `singleColumn`   | `single-column` | Define se o formulario deve possuir apenas 1 coluna.                      | `boolean`          | `false`     |


## Events

| Event            | Description                                                                     | Type                         |
| ---------------- | ------------------------------------------------------------------------------- | ---------------------------- |
| `ezContentReady` | Evento emitido quando o componente foi totalmente carregado na DOM.             | `CustomEvent<HTMLElement[]>` |
| `formItemsReady` | Responsável por notificar quando ocorrer a renderização de itens do formulário. | `CustomEvent<FormItems>`     |


## Methods

### `addCustomEditor(fieldName: string, customEditor: ICustomEditor, detailContext?: string) => Promise<void>`

Registra um editor customizado para campos da grade e formulário.

#### Returns

Type: `Promise<void>`

---

### `setFieldProp(fieldName: string, propName: string, value: any) => Promise<void>`

Altera/adiciona uma propriedade nos metados do campo.

#### Returns

Type: `Promise<void>`

---

### `showUp() => Promise<void>`



#### Returns

Type: `Promise<void>`




## Dependencies

### Used by

 - [ez-form](../ez-form)

### Depends on

- [ez-custom-form-input](custom-input)
- [ez-collapsible-box](../ez-collapsible-box)
- [ez-check](../ez-check)
- [ez-combo-box](../ez-combo-box)
- [ez-date-input](../ez-date-input)
- [ez-time-input](../ez-time-input)
- [ez-date-time-input](../ez-date-time-input)
- [ez-upload](../ez-upload)
- [ez-number-input](../ez-number-input)
- [ez-text-area](../ez-text-area)
- [ez-text-input](../ez-text-input)
- [ez-search-plus](../ez-search-plus)
- [ez-search](../ez-search)
- [ez-rich-text](../ez-rich-text)
- [ez-multi-select-input](../ez-multi-select-input)

### Graph
```mermaid
graph TD;
  ez-form-view --> ez-custom-form-input
  ez-form-view --> ez-collapsible-box
  ez-form-view --> ez-check
  ez-form-view --> ez-combo-box
  ez-form-view --> ez-date-input
  ez-form-view --> ez-time-input
  ez-form-view --> ez-date-time-input
  ez-form-view --> ez-upload
  ez-form-view --> ez-number-input
  ez-form-view --> ez-text-area
  ez-form-view --> ez-text-input
  ez-form-view --> ez-search-plus
  ez-form-view --> ez-search
  ez-form-view --> ez-rich-text
  ez-form-view --> ez-multi-select-input
  ez-collapsible-box --> ez-icon
  ez-collapsible-box --> ez-text-edit
  ez-text-edit --> ez-text-input
  ez-text-edit --> ez-button
  ez-text-input --> ez-tooltip
  ez-text-input --> ez-icon
  ez-button --> ez-icon
  ez-combo-box --> ez-text-input
  ez-combo-box --> ez-icon
  ez-combo-box --> ez-popover-plus
  ez-combo-box --> ez-combo-box-list
  ez-popover-plus --> ez-popover-core
  ez-date-input --> ez-text-input
  ez-date-input --> ez-popover-plus
  ez-date-input --> ez-calendar
  ez-time-input --> ez-text-input
  ez-time-input --> ez-icon
  ez-date-time-input --> ez-text-input
  ez-date-time-input --> ez-popover-plus
  ez-date-time-input --> ez-calendar
  ez-number-input --> ez-text-input
  ez-text-area --> ez-tooltip
  ez-text-area --> ez-icon
  ez-search-plus --> ez-icon
  ez-search-plus --> ez-text-input
  ez-search-plus --> ez-popover-plus
  ez-search-plus --> ez-search-result-list
  ez-search-result-list --> ez-card-item
  ez-search-result-list --> ez-skeleton
  ez-search --> ez-text-input
  ez-search --> ez-icon
  ez-search --> ez-popover-plus
  ez-search --> search-list
  search-list --> ez-card-item
  ez-rich-text --> ez-text-area
  ez-rich-text --> ez-rich-toolbar
  ez-rich-text --> ez-link-builder
  ez-rich-text --> ez-simple-image-uploader
  ez-rich-toolbar --> ez-rich-toolbar-arrows
  ez-rich-toolbar --> ez-rich-toolbar-letters
  ez-rich-toolbar --> ez-rich-toolbar-configs
  ez-rich-toolbar-arrows --> ez-rich-toolbar-item
  ez-rich-toolbar-item --> ez-icon
  ez-rich-toolbar-letters --> ez-rich-toolbar-item
  ez-rich-toolbar-configs --> ez-rich-toolbar-item
  ez-link-builder --> ez-popup
  ez-link-builder --> ez-modal-container
  ez-link-builder --> ez-text-input
  ez-link-builder --> ez-check
  ez-popup --> ez-button
  ez-modal-container --> ez-icon
  ez-modal-container --> ez-button
  ez-simple-image-uploader --> ez-popup
  ez-simple-image-uploader --> ez-modal-container
  ez-simple-image-uploader --> ez-tooltip
  ez-simple-image-uploader --> ez-text-input
  ez-simple-image-uploader --> ez-icon
  ez-multi-select-input --> ez-icon
  ez-multi-select-input --> ez-tooltip
  ez-multi-select-input --> ez-popover-core
  ez-multi-select-input --> ez-multi-selection-list
  ez-multi-selection-list --> ez-check
  ez-multi-selection-list --> ez-list
  ez-multi-selection-list --> ez-icon
  ez-multi-selection-list --> multi-selection-box-message
  ez-multi-selection-list --> ez-filter-input
  ez-multi-selection-list --> ez-search
  ez-list --> ez-check
  ez-filter-input --> ez-text-input
  ez-filter-input --> ez-icon
  ez-form --> ez-form-view
  style ez-form-view fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------




## CSS Variables
| Variable  | Description | 
 |-|-|
| --ez-form-view\_\_item--min-width | Define o tamanho mínimo dos itens do formulário. | 
| --ez-form-view\_\_item--max-width | Define o tamanho máximo dos itens do formulário. | 
| --ez-form-view\_\_item--width | Define o espaçamento entre itens do formulário. | 
| --ez-form-view\_\_item--padding | Define o padding do formulário. |