Skip to main content

# Tests des composants additionnels

# Chosen.js

Liste simple avec recherche

# Navigation par étapes

- Réception
  de la demande
- Instruction
- Validation des droits
- Validation de la demande
- Récapitulatif

# Tableau

## Tableau simple

|  | Nir | Nom | Prénom test de libelle très très très très très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

## Tableau contraint

Ajout de la classe `table-fixedwidth` pour contraindre le tableau dans son conteneur

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

## Tableau contraint à taille de cellules variables

Ajout de la classe `table-fixedwidth` et des classes `cell-action, cell-xs, cell-sm, cell-md, cell-lg, cell-xlg ou cell-date` sur les lignes du tableau pour définir leurs tailles.

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

## Tableau à taille de colonnes variables

Utilisation de la classe `table-fitcontent` et d'une déclarartion de taille en pixel pour créer un tableau à taille fixe

    <table class="table table-bordered table-striped table-fitcontent">
    <colgroup>
      <col style="width: 40px;">
      <col style="width: 40px;">
      <col style="width: 100px;">
      <col style="width: 100px;">
      <col style="width: 100px;">
      <col style="width: 100px;">
      <col style="width: 60px;">
    </colgroup>
    <thead>
    ...

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

## Tableau contraint avec contenu sur plusieurs ligne

Ajout des classes`table-multipleline-header et table-multipleline-body` pour permettre aux contenus de passer sur plusieurs lignes

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

## Tableau responsive

Un tableau peut également être inclus dans un conteneur possédant la classe `table-responsive` pour lui permettre de scroller à l'intérieur de celui-ci. Cette technique peut cependant provoquer des effets indésirables si le tableau possède des éléments flottants (liste déroulantes, infobulles).

|  | Nir | Nom | Prénom test de libelle très long | date de naissance |
--- | --- | --- | --- | --- | --- | ---
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand armand sigmund sidonie anatole fernand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
101 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René Victor Emmanuel Felicien Léopold Ferdinand armand sigmund sidonie anatole fernand | 16/05/1945 |
102 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |
103 |  | 1 65 05 35 567 897 | CHATEAUBRIAND | Jean René | 16/05/1945 |

# Cnam icons

## STYLE ALTERNATIF POUR LES BOUTONS ICÔNES

Les icones possédant un fond peuvent être affichées sous forme de bouton avec le même comportement au survol et au clic que les boutons d'actions.

      <button class="btn btn-lg btn-icon btn-icon-secondary">
        <span class="am-icon icon-reset-circle-right"></span>
      </button>
      <button class="btn btn-lg btn-icon btn-icon-secondary">
        <span class="am-icon icon-reset-circle-left"></span>
      </button>
      <button class="btn btn-lg btn-icon btn-icon-secondary">
        <span class="am-icon icon-help-circle"></span>
      </button>
      <button class="btn btn-lg btn-icon btn-icon-secondary">
        <span class="am-icon icon-alert-circle"></span>
      </button>
      <button class="btn btn-lg btn-icon btn-icon-secondary">
        <span class="am-icon icon-info-circle"></span>
      </button>
      <button class="btn btn-lg btn-icon btn-icon-secondary">
        <span class="am-icon icon-plus-circle"></span>
      </button>
      <button class="btn btn-lg btn-icon btn-icon-secondary">
        <span class="am-icon icon-cross-circle"></span>
      </button>
      <button class="btn btn-lg btn-icon btn-icon-secondary">
        <span class="am-icon icon-minus-circle"></span>
      </button>
      <button class="btn btn-lg btn-icon btn-icon-secondary">
        <span class="am-icon icon-cross-square"></span>
      </button>
      <button class="btn btn-lg btn-icon btn-icon-secondary">
        <span class="am-icon icon-plus-square"></span>
      </button>
      <button class="btn btn-lg btn-icon btn-icon-secondary">
        <span class="am-icon icon-minus-square"></span>
      </button>

## Flèches et directions

- am-icon icon-double-arrow-left
- am-icon icon-double-arrow-right
- am-icon icon-arrow-up
- am-icon icon-arrow-down
- am-icon icon-arrow-left
- am-icon icon-arrow-right
- am-icon icon-caret-left
- am-icon icon-caret-right
- am-icon icon-caret-up
- am-icon icon-caret-down
- am-icon icon-move
- am-icon icon-maximize
- am-icon icon-minimize
- am-icon icon-modify-width
- am-icon icon-modify-width-divider
- am-icon icon-modify-height
- am-icon icon-modify-height-divider
- am-icon icon-reset-right
- am-icon icon-reset-left
- am-icon icon-reset-circle-right
- am-icon icon-reset-circle-left

## Actions courantes

- am-icon icon-detailview
- am-icon icon-eye
- am-icon icon-eye-circle
- am-icon icon-home
- am-icon icon-print
- am-icon icon-calendar
- am-icon icon-download
- am-icon icon-settings-menu
- am-icon icon-trash
- am-icon icon-duplicate
- am-icon icon-logoff
- am-icon icon-more-circle
- am-icon icon-more
- am-icon icon-font-minus
- am-icon icon-font-plus

## Aides et alertes

- am-icon icon-help
- am-icon icon-help-circle
- am-icon icon-alert-circle
- am-icon icon-alert-circle-outline
- am-icon icon-alert-losange
- am-icon icon-alert-triangle
- am-icon icon-info-circle-outline
- am-icon icon-info-circle
- am-icon icon-info-bulle
- am-icon icon-help-circle-outline
- am-icon icon-help-circle

## Etats

- am-icon icon-star
- am-icon icon-star-empty
- am-icon icon-star-half
- am-icon icon-loading
- am-icon icon-locked
- am-icon icon-unlocked
- am-icon icon-cycle
- am-icon icon-refresh
- am-icon icon-forbidden
- am-icon icon-square
- am-icon icon-square-checked
- am-icon icon-check

## Métaphores de bureau

- am-icon icon-clock
- am-icon icon-calculator
- am-icon icon-pencil
- am-icon icon-pick-work
- am-icon icon-paperclip
- am-icon icon-paperclip-circle
- am-icon icon-video
- am-icon icon-tools
- am-icon icon-settings
- am-icon icon-apps
- am-icon icon-chat
- am-icon icon-snailmail
- am-icon icon-folder-plus
- am-icon icon-email
- am-icon icon-email-write
- am-icon icon-calendar-lg
- am-icon icon-postit
- am-icon icon-tag
- am-icon icon-tags
- am-icon icon-book
- am-icon icon-book-alt
- am-icon icon-laptop
- am-icon icon-smartphone
- am-icon icon-tablet
- am-icon icon-desktop
- am-icon icon-camera
- am-icon icon-picture
- am-icon icon-folder
- am-icon icon-folder-open
- am-icon icon-inbox
- am-icon icon-inbox-full
- am-icon icon-document
- am-icon icon-doc-pdf
- am-icon icon-doc-excel
- am-icon icon-doc-word
- am-icon icon-doc-new
- am-icon icon-doc-edit
- am-icon icon-note-full
- am-icon icon-note
- am-icon icon-pins

## Symboles plus, moins, croix

- am-icon icon-collapse-plus
- am-icon icon-collapse-minus
- am-icon icon-cross
- am-icon icon-plus-circle
- am-icon icon-cross-circle
- am-icon icon-minus-circle
- am-icon icon-plus-circle-outline
- am-icon icon-cross-circle-outline
- am-icon icon-minus-circle-outline
- am-icon icon-plus-square-outline
- am-icon icon-cross-square-outline
- am-icon icon-minus-square-outline
- am-icon icon-plus-square
- am-icon icon-cross-square
- am-icon icon-minus-square

## Symboles Filtres et tri

- am-icon icon-filter-az
- am-icon icon-filter-za
- am-icon icon-filter-graph
- am-icon icon-filter
- am-icon icon-filter-up
- am-icon icon-filter-down

## Utilisateurs

- am-icon icon-user-avatar
- am-icon icon-user
- am-icon icon-users
- am-icon icon-user-settings
- am-icon icon-user-new
- am-icon icon-user-search
- am-icon icon-user-edit

## Symboles GRC

- am-icon icon-rss
- am-icon icon-grc-tel-out
- am-icon icon-grc-tel-in
- am-icon icon-grc-mobile-in
- am-icon icon-frontdesk-in
- am-icon icon-frontdesk-out
- am-icon icon-snailmail-in
- am-icon icon-snailmail-out
- am-icon icon-email-out

## Symboles géolocalisation

- am-icon icon-map-pin
- am-icon icon-map-pin-alt
- am-icon icon-map-around

## Symboles domaine médicale

- am-icon icon-med-tool
- am-icon icon-med-tool-alt
- am-icon icon-med-office
- am-icon icon-med-pro-alt
- am-icon icon-heart
- am-icon icon-heart-pulse
- am-icon icon-med-pro
- am-icon icon-emergency
- am-icon icon-vitale

## Autres symboles

- am-icon icon-bell
- am-icon icon-pack
- am-icon icon-cloud-down
- am-icon icon-cloud-up
- am-icon icon-lab
- am-icon icon-barraph
- am-icon icon-wizard
- am-icon icon-treeview
- am-icon icon-lightbulb
- am-icon icon-id
- am-icon icon-bank-account
- am-icon icon-fork
- am-icon icon-link
- am-icon icon-unlink
- am-icon icon-unlink-alt
- am-icon icon-bug