Table des matières

Module 6 : SmartCommon - Composants

SmartCommon est la bibliothèque de composants React partagés pour toutes les applications SmartMaker. Ce module couvre les composants essentiels.

Prérequis

Installation

1. Configurer le registry npm

Dans le fichier .npmrc : 

@cap-rel:registry=https://inligit.fr/api/v4/projects/197/packages/npm/

2. Installer le package

snippet.bash
npm install @cap-rel/smartcommon

3. Importer les styles

Dans main.jsx :

snippet.javascript
import "@cap-rel/smartcommon/dist/smartcommon-style.css";

Catégories de composants

Catégorie Composants Usage
Mise en page Page, Block, Panel, Popup Structure des pages
Navigation Navbar, Sidebar, Tabbar Menus et navigation
Formulaires Input, Select, Calendar, etc. Saisie de données
Affichage String, Number, Datetime, etc. Formatage des données
UI Button, Spinner, Tag, List Éléments d'interface

Chapitres

# Chapitre Contenu
1 Mise en page Page, Block, Panel, Popup
2 Navigation Navbar, Sidebar, Tabbar
3 Formulaires Input, Select, Calendar, Form
4 Affichage Formats et composants de display

Import des composants

snippet.javascript
// Import individuel
import { Page, Block, Button } from '@cap-rel/smartcommon';
 
// Ou import groupé
import {
    // Mise en page
    Page,
    Block,
    Panel,
    Popup,
 
    // Navigation
    Navbar,
    Tabbar,
    TabbarItem,
 
    // Formulaires
    Form,
    Input,
    Select,
    Calendar,
    Boolean,
 
    // Affichage
    List,
    ListItem,
    Button,
    Spinner,
    Tag
} from '@cap-rel/smartcommon';

Objectifs du module

À la fin de ce module, vous saurez :

Commencer : Mise en page →