@opencitylabs/bootstrap-italia
Version:
Bootstrap Italia templates for Form.io forms
56 lines (37 loc) • 2.13 kB
Markdown
# **Template Form.io Bootstrap Italia**
Questo repository modifica il rendering dei moduli in **formio.js** per utilizzare **HTML** e classi compatibili con il framework [Bootstrap Italia](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/).
La versione pubblica della demo è disponibile [qui](https://formbuilder-bootstrap-italia-opencity-labs-a93e4b76e725c1a5db50.gitlab.io) per l'ultima release stabile pubblicata.
## 🚀 **Installazione**
Per installare le dipendenze necessarie in un'applicazione **React**, eseguire i seguenti comandi:
```sh
npm i @opencitylabs/bootstrap-italia
npm i @formio/js
```
## 🚀 **Utilizzo con Bootstrap Italia**
Per utilizzare **Bootstrap Italia** in Form.io, importa il modulo e abilitalo con il seguente codice:
```javascript
import { Formio, Templates } from "@formio/js";
import bootstrapItalia from "@opencitylabs/bootstrap-italia/bootstrapItalia";
import "@opencitylabs/bootstrap-italia/dist/ocl.min.css"
```
## ⚙️ **Configurazione dello Script**
Per impostare **Bootstrap Italia** come framework predefinito in Form.io:
```javascript
Formio.use(bootstrapItalia);
Templates.framework = bootstrapItalia;
```
## 📋 **Componenti Form.io Accessibili**
Di seguito è riportata una tabella con la lista dei componenti accessibili in Form.io:
| **Categoria** | **Componenti** |
|--------------|-----------------------------------------------------------------------------|
| **Base** | Textfield, Text Area, Number, Password, Checkbox, Select Box, Radio, Button |
| **Avanzati** | Email, Phone Number, Time, Currency, Select |
## 🎨 **Risoluzione problemi icone mancanti**
Se le icone non vengono visualizzate correttamente, aggiungi **Font Awesome** al tuo progetto con il seguente codice:
```html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
Formio.icons = "fontawesome";
</script>
```
📌 **Nota:** Assicurati di caricare il file **CSS** prima di inizializzare Form.io.