Zum Hauptinhalt springen

AppFloorPlan

AppFloorPlan in Storybook

Beispiele​

In den Abschnitten Verwendung und Code finden Sie weitere Einzelheiten sowie Konfigurationsoptionen und Beispiele.

Basiskonfiguration​

Das folgende Beispiel zeigt, wie die verschiedenen Eigenschaften von AppFloorPlan verwendet werden. Eine Seite mit Kopfzeile sowie linkem und rechtem Bereich wird angezeigt, jeweils mit mehreren untergeordneten Elementen.

import React from 'react';
import { AppFloorPlan } from '@jutro/floorplan';
import { FloorPlan } from '@jutro/floorplan';
import { ChatIcon, MailIcon } from '@jutro/icons';
import { Card } from '@jutro/components';

export const floorPlanDefinition = (): FloorPlan {
    return {
        showHeader: true,
        header: {
            showNotifications: true,
            logoSrc: './images/guidewire-logo-dark.svg',
            logoTitle: 'Guidewire',
            showHelp: true,
            showAppSwitcher: true,
            showLanguageSelector: false,
        },
        showSubHeader: false,
        showLeftSide: true,
        leftSide: {
            collapsible: true,
            
        },
        sideRoutes: [
            {
                path: '/',
                exact: true,
                showOnNavBar: false,
                redirect: '/example',
            },
            {
                title: 'Example page',
                path: '/example',
                exact: true,
                component: PageExample,
            },
            {
                title: 'Example page 2',
                path: '/example2',
                exact: true,
                component: PageExample,
            },
        ],
        showRightSide: true,
        rightSide: {
            collapsible: true,
            isInitiallyCollapsed: true,
            sides: [
                { 
                    label: "Open chat",
                    icon: ChatIcon,
                    component: RightSideExample,
                },
                { 
                    label: "Email",
                    icon: MailIcon,
                    component: RightSideExample,
                }
            ],
        },
        showFooter: false,
    };
};

!

export function Jutro(): JSX.Element {
    return <AppFloorPlan floorPlans={[floorPlanDefinition()]} />;
}


const PageExample = (): JSX.Element {
    return <Card title="Example page" 
              subTitle="This can be any type of component" isPanel></Card>
}

const RightSideExample = (): JSX.Element {
    return <Card title="Example page" 
              subTitle="This can be any type of component"></Card>
}

Benutzerdefinierte Kopfzeile​

Warning: Die benutzerdefinierte Kopfzeilenoption ist äußerst flexibel, aber denken Sie daran, dass sie Kosten verursacht. Für Aspekte wie Reaktionsfähigkeit und Zugänglichkeit sind Sie selbst verantwortlich. Jutro enthält einige kleine Blöcke zur Erstellung einer solchen benutzerdefinierten Kopfzeile – siehe das Beispiel für eine benutzerdefinierte Unterkopfzeile in Storybook.

Wenn sich Ihr Kopfzeilendesign erheblich von dem der Basiskonfiguration unterscheidet und die verfügbaren Anpassungsoptionen nicht ausreichen, können Sie mit dem renderHeader-Attribut eine benutzerdefinierte Kopfzeilen-Renderer-Funktion bereitstellen:

const floorplans = {
    'floorplan.default': {
        ...
        renderHeader() {
            // myCustomHeaderRenderer implementation
        }
    }
}

<AppFloorPlan floorPlans={floorplans} />;

Die Funktion renderHeader hat folgende Argumente:

  • navigationRoutes: Sichtbare Routen (Routen mit showOnNavBar nicht festgelegt auf false)
  • header: Eigenschaften der Kopfzeile von AppFloorPlan
  • subHeader: Eigenschaften der Unterkopfzeile von AppFloorPlan

Wenn showSubHeader auf false festgelegt ist, können Sie auch eine eigene Unterkopfzeile als Teil der benutzerdefinierten Kopfzeile implementieren. Die Höhe der benutzerdefinierten Kopfzeile ist dabei in keiner Weise begrenzt.

Rechte Seite​

Die rightSide-Eigenschaft verwendet ein Konfigurationsobjekt, das den Inhalt des rechten Bereichs bestimmt. Betrachten Sie dieses Beispiel auf der rechten Seite:

{
  "showRightSide": true,
  "rightSide": {
    "collapsible": true,
    "sides": [
      {
        "label": {
          "id": "example1",
          "defaultMessage": "Example right side 1"
        },
        "icon": "gw-home",
        "component": "RightSideContent",
        "componentProps": {
          "foodItem": "banana"
        }
      },
      {
        "label": {
          "id": "example2",
          "defaultMessage": "Example right side 2"
        },
        "icon": "gw-star",
        "component": "RightSideContent",
        "componentProps": {
          "foodItem": "cup of coffee"
        }
      }
    ],
    "shouldFocusAfterRender": true,
    "isInitiallyCollapsed": false
  }
}

Damit dieses Beispiel funktioniert, erstellen Sie ein RightSideContent:

function RightSideContent({ foodItem }) {
  return <div>Enjoy this {foodItem}!</div>;
}

Bei der Konfiguration wird ein rechter Bereich mit zwei Schaltflächen erstellt. Durch Klicken auf die Schaltflächen wird zwischen zwei Bereichen gewechselt. Einer von ihnen ist beschriftet mit: „Lassen SIe sich diese Banane schmecken!“, und ein anderer mit: „Lassen Sie sich diese Tasse Kaffee schmecken!“.

Die Eigenschaften, die von rightSide unterstützt werden, finden Sie in der Liste der Eigenschaften auf der Registerkarte „Code“.