> For the complete documentation index, see [llms.txt](https://anacleto.gitbook.io/anacleto/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://anacleto.gitbook.io/anacleto/anacleto-frontend/ui-builder/components.md).

# Components

Anacleto provides you with a set of graphic components that you can combine to create the windows of your application.

Each component is identified by an `id` it must have a type (`component)` and in some cases it can contain other components (components`).`

## Properties

The properties below are available in all Anacleto components

* `id [string]` panel id
* `component [string]` panel type, ex Form
* `components` `[array of component]`an array of inner components
* containerClassName `[string]` component container classes separated by space
* `classNames [string]` component classes separated by space
* `style [object]` component class 
* `events [array of events]`

## Methods

The methods below are available in all Anacleto components, you can call the following method from an Anacleto componente event by using `this` or `panelContext`

```js
this.load({})
```

```
panelsContext.myPanel.load({})
```

### setTitle

```
setTitle(string title)
```

### showToolbar

```
showToolbar(boolean show)
```

### showToolbarSpinner

```
setIsToolbarLoading(boolean show)
```

## Events

Each component of Anacleto makes events available, in each event you will always have the following properties available:

* `this` - the current component
* `panelsContext`- contain reference to other panels

See [frontend script](/anacleto/anacleto-frontend/frontend-script.md).

### afterRender

```js
  afterRender: function();
```

## Toolbar

If a component has the property `isCard:true` then it is possible to define the buttons on the toolbar. 

{% hint style="warning" %}
The toolbar is only available for panels in card mode
{% endhint %}

To do add buttons on toolbar the actions attribute must be specified with the array of buttons on the toolbar. 

If you want to show sub-buttons for a button, specify them in the actions attribute.

```js
{
  actions: [
    {
      label: "Save",
      icon: "pi pi-save",
      events: {
        onClick: {
          body : "alert(\"Save\")"
        }
      },
      actions: [
        {
          label: 'Rename',
          icon: 'pi pi-pencil',
          onClick: (event, context)=>{
            alert("TODO")
          }
        },
        {
          label: 'Delete',
          icon: 'pi pi-times',
          events: {
            onClick: {
              body : "alert(\"Delete\")"
            }
          }
        },
        
      ]
    }
  ]
}
```