chore(docs): add form control warning

italia · Dec 7, 2023 · bec7d9f · bec7d9f
1 parent 09cde15
commit bec7d9f
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 0 deletions.
diff --git a/docs/componenti/paginazione.md b/docs/componenti/paginazione.md
@@ -466,3 +466,75 @@ Aggiungendo la classe `.pagination-total` al tag `<nav>` che contiene la paginaz
   <p>100-110 di 300 elementi</p>
 </nav>
 {% endcapture %}{% include example.html content=example %}
+
+Con il posizionamento centrale
+
+{% comment %}Example name: Con numero totale elementi per pagina e posizionamento{% endcomment %}
+{% capture example %}
+<nav class="pagination-wrapper justify-content-center pagination-total" aria-label="Esempio di navigazione con total number">
+  <ul class="pagination">
+    <li class="page-item">
+      <a class="page-link" href="#">
+        <svg class="icon icon-primary"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-chevron-left"></use></svg>
+        <span class="visually-hidden">Pagina precedente</span>
+      </a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item"><span class="page-link">...</span></li>
+    <li class="page-item active">
+      <a class="page-link" href="#" aria-current="page">
+        <span class="d-inline-block d-sm-none">Pagina </span>24
+      </a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">25</a></li>
+    <li class="page-item"><a class="page-link" href="#">26</a></li>
+    <li class="page-item"><a class="page-link" href="#">27</a></li>
+    <li class="page-item"><a class="page-link" href="#">28</a></li>
+    <li class="page-item"><span class="page-link">...</span></li>
+    <li class="page-item"><a class="page-link" href="#">50</a></li>
+    <li class="page-item">
+      <a class="page-link" href="#">
+        <span class="visually-hidden">Pagina successiva</span>
+        <svg class="icon icon-primary"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-chevron-right"></use></svg>
+      </a>
+    </li>
+  </ul>
+  <p>100-110 di 300 elementi</p>
+</nav>
+{% endcapture %}{% include example.html content=example %}
+
+Con il posizionamento a destra
+
+{% comment %}Example name: Con numero totale elementi per pagina e posizionamento{% endcomment %}
+{% capture example %}
+<nav class="pagination-wrapper justify-content-end pagination-total" aria-label="Esempio di navigazione con total number">
+  <ul class="pagination">
+    <li class="page-item">
+      <a class="page-link" href="#">
+        <svg class="icon icon-primary"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-chevron-left"></use></svg>
+        <span class="visually-hidden">Pagina precedente</span>
+      </a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item"><span class="page-link">...</span></li>
+    <li class="page-item active">
+      <a class="page-link" href="#" aria-current="page">
+        <span class="d-inline-block d-sm-none">Pagina </span>24
+      </a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">25</a></li>
+    <li class="page-item"><a class="page-link" href="#">26</a></li>
+    <li class="page-item"><a class="page-link" href="#">27</a></li>
+    <li class="page-item"><a class="page-link" href="#">28</a></li>
+    <li class="page-item"><span class="page-link">...</span></li>
+    <li class="page-item"><a class="page-link" href="#">50</a></li>
+    <li class="page-item">
+      <a class="page-link" href="#">
+        <span class="visually-hidden">Pagina successiva</span>
+        <svg class="icon icon-primary"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-chevron-right"></use></svg>
+      </a>
+    </li>
+  </ul>
+  <p>100-110 di 300 elementi</p>
+</nav>
+{% endcapture %}{% include example.html content=example %}
diff --git a/docs/form/introduzione.md b/docs/form/introduzione.md
@@ -18,6 +18,8 @@ Bootstrap Italia applica automaticamente a tutti i form `display: block` e `widt
 
 Per raggruppare correttamente gli elementi di un modulo form è bene utilizzare la classe `.form-group` per ogni singolo blocco, in questo modo l'elemento input, l'etichetta, il testo di aiuto opzionale e la messaggistica di validazione otterranno lo stile grafico e le funzionalità per loro predisposte. Si può usare con `<fieldset>`, `<div>` o qualsiasi altro elemento.
 
+Gli elementi dei campi devono avere la classe `.form-control` applicata.
+
 ### Dimensionamento delle colonne
 
 Strutture più complesse possono essere costruite usando il sistema a griglia, da utilizzare per layout che richiedono più colonne, larghezze diverse e opzioni di allineamento aggiuntive. La classe `.row` ne assicura una corretta spaziatura.

diff --git a/src/scss/custom/_pager.scss b/src/scss/custom/_pager.scss
@@ -24,6 +24,15 @@ nav.pagination-wrapper {
       font-weight: $pager-font-weight;
       text-align: center;
     }
+    &.justify-content-end {
+      display: grid;
+    }
+    &.justify-content-center {
+      width: 100%;
+      .pagination {
+        justify-content: center;
+      }
+    }
   }
 
   //jump to page