---
# System prepended metadata

title: Squelette & Composants
tags: [knitiv]

---

# Squelette & Composants
###### tags: `knitiv`

## Squelette

```json=
{
  "layout": "basic",
  "components": [
      {
          "key": "h1",
          "type": "header",
          "view": "header"
      },
      {
          "key": "form1",
          "type": "form"
          "view": "page",
          "dependencies": [
              "form2"
          ]
      },
      {
          "key": "form2",
          "type": "form"
          "view": "page"
      },
      {
          "key": "f1",
          "type": "footer"
          "view": "footer"
      }
  ]
}
```

## Composant

### Boutton
```json=
{
    "type": "kbutton",
    "key": "dashboard-login-button",
    "properties": {
        "color": "blue",
        "disabled": true,
        ...
        "style": {},
        "class": ""
    },
    "watch": {
        "loginValue": {
            "target": "login-input",
            "propertyName": "value",
            "onValueChanged": "func_onValueChanged"
        },
        "passwordValue": {
            "target": "password-input",
            "propertyName": "value",
            "onValueChanged": "func_onValueChanged"
        }
    }
    "events": {
        "click": "func_onButtonClicked"
    }    
}
```

### Input
```json=
{
    "type": "kinput",
    "key": "login-input",
    "properties": {
        "type": "text"
    },
    "events": {
        "input": "func_onLoginInput"
    }    
}
```

### Carte
```json=
{
    "type": "kcard",
    "key": "login-card",
    "components": {
        "title": [
            {
                ...
            }
        ],
        "default": [
            {
                ...
            }
        ],
        "action": [
            {
                ...
            }
        ]
    }  
}
```