Aller au contenu principal

Mode d'affichage par onglets

Lagoon peut afficher les pages en mode page simple ou en mode onglets applicatifs. Le mode onglets s'active dans App.razor avec IsTabbed="true".

Activer le mode onglets​

App.razor
<LgApp DefaultLayout="typeof(MainLayout)" IsTabbed="true" ShowHeader="true" ShowSidebar="false">
    <StartupTabs>
        <LgStartupTab Link="Demo.Client.Pages.Index.Link()" />
    </StartupTabs>
    <ChildContent>
        <MenuConfiguration />
    </ChildContent>
</LgApp>

Page d'accueil​

La page d'accueil est définie par sa route racine.

HomePage.razor
@inherits LgPage
HomePage.razor.cs
[Route(ROUTE)]
public partial class HomePage : LgPage
{
    private const string ROUTE = "/";

    public static LgPageLink Link()
    {
        return LgPageLink.Create(ROUTE, "#homeTitle", IconNames.Home);
    }
}

Titre et icône de l'onglet​

Pour une page Lagoon, centralisez le titre et l'icône dans la méthode statique Link().

CounterPage.razor.cs
[Route(ROUTE)]
public partial class CounterPage : LgPage
{
    private const string ROUTE = "counter";

    public static LgPageLink Link()
    {
        return LgPageLink.Create(ROUTE, "#menuCounter", IconNames.All.CalculatorFill);
    }
}

L'onglet récupère alors le titre traduit et l'icône via le lien typé.

Ouvrir un onglet​

Un lien vers une route correspondant à une page existante ouvre automatiquement l'onglet associé. En code, utilisez la navigation Lagoon plutôt qu'une URL en dur.

MyComponent.razor.cs
public partial class MyComponent : LgComponentBase
{
    private void OpenCounter()
    {
        // Ouvre la page cible dans le mode de navigation courant de l'application.
        App.NavigateTo(CounterPage.Link().Uri);
    }
}

Onglets ouverts au lancement​

StartupTabs permet de déclarer les pages ouvertes automatiquement au démarrage.

App.razor
<LgApp DefaultLayout="typeof(MainLayout)" IsTabbed="true" ShowHeader="true" ShowSidebar="false">
    <StartupTabs>
        <LgStartupTab Link="Demo.Client.Pages.Index.Link()" Default="true" />
        <LgStartupTab Link="DashboardPage.Link()" Closable="true" PolicyVisible="DashboardReader" />
    </StartupTabs>
    <ChildContent>
        <MenuConfiguration />
    </ChildContent>
</LgApp>

Rechargement de l'onglet actif​

Le comportement de rechargement au clic sur l'onglet actif est piloté par TabReloadDisabled dans OnConfigureBehavior.

Main.cs
public class Main : LgCustomApplication
{
    protected override void OnConfigureBehavior(ApplicationBehavior app)
    {
        // Désactive le rechargement du contenu lorsque l'utilisateur reclique sur l'onglet actif.
        app.TabReloadDisabled = true;
    }
}

Sauvegarder les onglets ouverts​

Par défaut, les onglets ne sont pas sauvegardés. TabSavingMethod permet d'activer :

ValeurEffet
TabSavingMethod.NoneNe sauvegarde pas les onglets.
TabSavingMethod.LocalSauvegarde les onglets dans le navigateur via IndexedDB.
TabSavingMethod.RemoteSauvegarde les onglets dans la base de données serveur.
Main.cs
public class Main : LgCustomApplication
{
    protected override void OnConfigureBehavior(ApplicationBehavior app)
    {
        // Restaure les onglets après rafraîchissement ou reconnexion.
        app.TabSavingMethod = TabSavingMethod.Remote;
    }
}

Fermer tous les onglets​

TryCloseAllTabs() tente de fermer tous les onglets ouverts.

TabsActions.razor
@inherits LgComponentBase

<LgButton Text="#closeAllTabs" OnClick="CloseAllTabsAsync" />
TabsActions.razor.cs
public partial class TabsActions : LgComponentBase
{
    private Task CloseAllTabsAsync(ActionEventArgs args)
    {
        // Les onglets qui refusent la fermeture peuvent afficher leur confirmation.
        App.TryCloseAllTabs();
        return Task.CompletedTask;
    }
}

Voir aussi​