SnackBarGFC - Android

Le plugin capacitor-snackbar-gfc est une implementation native du composant SnackBars d'Android. Vous pouvez maintenant utiliser ce package comme plugin Ionic Capacitor dans votre application.

Soutenez nos développements

Votre don nous permettra de developper plus de plugin open source mais également a maintenir ceux déjà publiés pour garantir une compatibilité avec les future version d'android, d'ios et de capacitor. Merci de votre soutien !

❤Je fais un don❤

Sommaire

1. Plateformes prise en charge
2. Installation
   2.1 Récuperation du package sur npm
   2.2 Ajout du plugin dans votre MainActivity.java
3. Screenshot
4. Méthodes du plugin
5. Interfaces du plugin
   5.1 SnackbarOpts
   5.2 MessageStyleOpts
   5.3 ButtonActionStyleOpts
6. Enums du plugin
   6.1 DURATION_ENUM
   6.2 POSITION_ENUM
   6.3 TYPE_LINE_ENUM
7. Utilisation du plugin
   7.1 Intégration du plugin
   7.2 Méthode show(options:SnackbarOpts)
   7.3 Méthode dismissShowingSnackbar()
   7.4 Méthode addListener('snackbarEvent')
8. Demo
9. Nos autres plugins

1. Plateformes prise en charge

• [x] Android

2. Installation

2.1 Récuperation du package sur npm

npm install capacitor-snackbar-gfc --save

2.2 Ajout du plugin dans votre MainActivity.java

Le fichier MainActivity est disponible dans app/java/packageid/ depusi android studio

    // Autres imports...
    import com.gfc.snackbargfc.SnackBarGFC;
    
    public class MainActivity extends BridgeActivity {
      @Override
      public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    
        this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
    
          add(SnackBarGFC.class);  // Ajout du plugin SnackBarGFC 
    
        }});
      }
    }

3. Screenshot

| Message seulement | Message seulement + centré | Message seul + Multiline | |---------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------| | | | |

| Basic + changement couleur bouton + multiline | Changement de couleur + Message centré + multiline | Changement de couleur | |---------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------| | | | |

4. Méthodes du plugin

| Methodes | Android | |:----------------------------------------------------------------------------------------|:----------| | show(option: SnackbarOpts): Promise<{}> | Disponible| | dismissShowingSnackbar() | Disponible| | addListener(eventName: 'snackbarEvent', listenerFunc: () => void): PluginListenerHandle | Disponible|

5. Interfaces du plugin

5.1 SnackbarOpts

| Propriété | Etat | Type | Defaut | Commentaire | |:------------------|:------------|:---------------------------------------------------|:---------|:-----------------------------------------------------------------------------------------------------------------------| | message | Obligatoire | string | null | Si message est null alors il y a une erreur | | duration | Obligatoire | DURATION_ENUM | 'short' | Si buttonAction est à true et duration à indefinite alors c'est la valeur long qui est prise en compte | | messageStyle | Obligatoire | MessageStyleOpts | Object | il faut renseigner la propriété messagePosition et messageTypeLine | | buttonAction | Obligatoire | boolean | 'false' | La SnackBar contiendra un bouton si buttonAction est à true | | buttonActionStyle | Optionel | ButtonActionStyleOpts | Object | Si buttonAction est à true il faudra renseigner la propriété buttonActionText | | backgroundColor | Optionel | string | '#4A4747'| Les couleurs devront commencer par # et contenir 7 caractères (ex: #4A4747) |

5.2 MessageStyleOpts

| Propriété | Etat | Type | Defaut | Commentaire | |:----------------|:------------|:-------------------------------------|:----------|:----------------------------------------------------------------------------| | messagePosition | Obligatoire | POSITION_ENUM | null | | | messageTypeLine | Obligatoire | TYPE_LINE_ENUM | 'default' | | | messageMaxLine | Optionel | number | 5 | A renseigner uniquement si messageTypeLine est égale à multiline | | messageColor | Optionel | string | '#FFFFFF' | Les couleurs devront commencer par # et contenir 7 caractères (ex: #FFFFFF) |

5.3 ButtonActionStyleOpts

| Propriété | Etat | Type | Defaut | Commentaire | |:------------------|:------------|:-------|:----------|:----------------------------------------------------------------------------| | buttonActionText | Obligatoire | string | null | | | buttonActionColor | Optionel | string | '#E35A5A' | Les couleurs devront commencer par # et contenir 7 caractères (ex: #FFFFFF) |

6. Enums du plugin

6.1 DURATION_ENUM

| Propriété | Valeur | |:----------|:-------------| | SHORT | 'short' | | LONG | 'long' | | INDEFINITE| 'indefinite' |

6.2 POSITION_ENUM

| Propriété| Valeur | |:---------|:----------| | DEFAULT | 'default' | | CENTER | 'center' |

6.3 TYPE_LINE_ENUM

| Propriété| Valeur | |:---------|:------------| | DEFAULT | 'default' | | MULTILINE| 'multiline' |

7. Utilisation du plugin

7.1 Intégration du plugin

// Autres imports...
import{Plugins} from '@capacitor/core'
const {SnackBarGFC} = Plugins;

7.2 Méthode show(options: SnackbarOpts)

const opts: SnackbarOpts = {
                message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                duration: DURATION_ENUM.INDEFINITE,
                messageStyle: {
                    messagePosition: POSITION_ENUM.DEFAULT,
                    messageTypeLine: TYPE_LINE_ENUM.DEFAULT,
                    messageColor: '#F0F0F0'
                },
                buttonAction: true,
                buttonActionStyle: {
                    buttonActionText: 'Close',
                    buttonActionColor: '#BA85FA'
                },
                backgroundColor: '#292929'
           }

SnackBarGFC.show(opts);

7.3 Méthode dismissShowingSnackbar()

    ionViewWillLeave() {
        SnackBarGFC.dismissShowingSnackbar();
    }

7.4 Méthode addListener('snackbarEvent')

Cette évenement est déclenché lorsque l'utilisateur clique sur le bouton du composant

    ngOnInit() {
        SnackBarGFC.addListener('snackbarEvent', () => {
            // votre code...
        });
    }

8. Demo du plugin

Téléchargez notre demo.

9. Nos autres plugins

| Nom | Package | Version | Plateformes | |:-----------------|:---------------------------------|:--------|:------------| | AppRateGFC | capacitor-apprate-gfc | | Android | | DateTimePickerGFC | capacitor-datetimepicker-gfc | | Android | | CalendarEventGFC | capacitor-calendarevent-gfc | | Android |