Listo Design System
Le Listo Design System est une bibliothèque de composants UI/UX pour l'application de gestion de la paie Listo Paye.
Liens
Statut | |
---|---|
WidgetBook | design.listo.pro |
Pub.dev | listo_design_system |
Comment Utiliser le Projet
Installation
Pour utiliser le package listo_design_system
, ajoutez-le comme dépendance dans votre fichier pubspec.yaml
:
dependencies:
listo_design_system:
Copier cette dépendance telle quelle dans votre fichier pubspec.yaml
. L'utilisateur associé n'a que le droit de
lecture sur le contenu du repository.
Utiliser le Main Theme
Pour utiliser le thème principal de Listo Design System, ajoutez le widget ListoTheme
à votre application :
import 'package:flutter/material.dart';
import 'package:listo_design_system/listo_design_system.dart';
import 'router.dart';
class App extends StatelessWidget {
App({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: F.title,
theme: ListoDesignSystem.themes.main,
home: const Scaffold(
body: Center(
child: Text('Hello World!'),
),
),
);
}
}
Lancement du Widgetbook
Pour lancer le projet Widgetbook :
- Naviguez vers le dossier du design system.
- Entrez dans le sous répertoire
widgets_demo
. - Exécutez la commande
flutter run -d chrome
.
Libraries
- atoms/adaptive/adaptative_dispatcher
- atoms/adaptive/adaptive_mdd
- atoms/adaptive/adaptive_module
- atoms/adaptive/dashboard_desktop
- atoms/alert
- atoms/atoms_module
- atoms/cards/cards_module
- atoms/cards/client_card
- atoms/cards/libelle_seul_card
- atoms/cards/listo_card
- atoms/cards/va_info_card
- atoms/checkbox
- atoms/form_panel
- atoms/inputs/base_input_text
- atoms/inputs/input_amount
- atoms/inputs/input_text
- atoms/inputs/inputs_module
- atoms/inputs/text_area
- atoms/labels/amount_title
- atoms/labels/form_base_labels
- atoms/labels/form_key_value_list
- atoms/labels/form_label
- atoms/labels/form_list
- atoms/labels/form_note
- atoms/labels/form_period_label
- atoms/labels/form_title
- atoms/labels/labels_module
- atoms/popin
- atoms/profil
- atoms/progress_bar
- atoms/search/search_anchor
- atoms/search/search_bar
- atoms/search/search_module
- atoms/tag
- atoms/title_line
- charts/charts_module
- charts/chiffre_cle
- charts/container
- charts/indicator
- charts/legend
- charts/pie
- extensions/context_extensions
- extensions/extensions_module
- extensions/size_extensions
- extensions/widget_extensions
- listo_design_system
- molecules/affiliations_oc/affiliations_garantie_form
- molecules/affiliations_oc/affiliations_oc_module
- molecules/affiliations_oc/contrat_oc
- molecules/affiliations_oc/contrat_oc_entity
- molecules/affiliations_oc/employee
- molecules/app_bar/app_bar_module
- molecules/app_bar/legacy/app_bar
- molecules/app_bar/logo_app_bar
- molecules/card_list/card_list
- molecules/card_list/card_list_module
- molecules/card_list/client_card_v2
- molecules/card_list/contracts_selector
- molecules/checkbox_with_text
- molecules/modals/confirmation_modal
- molecules/modals/modals_module
- molecules/molecules_module
- molecules/navigation_menu/collapse_state
- molecules/navigation_menu/destination_data
- molecules/notifications/notifications_module
- molecules/status_service/environment
- molecules/status_service/micro_service_status
- molecules/table/listo_data_table
- molecules/tabs/tabs
- molecules/upload/custom_file
- molecules/upload/custom_file_wrapper
- molecules/upload/file_list
- molecules/upload/list_item_download
- molecules/upload/upload_area
- molecules/upload/upload_config
- molecules/upload/upload_controller
- molecules/upload/upload_dialog
- molecules/upload/upload_module
- svg/icon_account
- svg/icon_change
- svg/septeo_logo
- svg/speech_bubble
- svg/svg_module