AppFloorPlan

AppFloorPlan in Storybook

Die AppFloorPlan-Komponente legt das Gesamtlayout für die gesamte Anwendung fest, einschließlich des Inhalts für die einzelnen Bereiche. Im Einzelnen steuert sie:

die Kopfzeile
die Fußzeile
die Anzeige des Navigationsbereichs: links (Seitenbereich) oder oben (Unterkopfzeile)
den rechten Bereich

Das Gesamtlayout der Anwendung wird durch eine AppFloorPlan-Komponente verwaltet. Für spezifische Bereiche der Anwendung können Sie jedoch Jutro-Layoutinhaltskomponenten wie Grid oder Flex oder benutzerdefinierte Komponenten verwenden.

Ganz allgemein:

Die AppFloorPlan-Komponente legt das Layout und die Routen für Ihre Anwendung fest. Sie umschließt jede einzelne Seite.
Auf jeder Seite wird das jeweilige Layout innerhalb des von AppFloorPlan vorgegebenen Bereichs verwaltet. Hier fügen Sie eine der verfügbaren Layoutinhaltskomponenten ein.

Note: Durch die verschiedenen Eigenschaften und Render-Funktionen, die an die AppFloorPlan-Komponente übergeben werden, ist es möglich, unterschiedliche Seitenlayoutstrukturen zu erstellen, indem der vordefinierte Inhalt verwendet oder benutzerdefinierte Komponenten bereitgestellt werden.

Code

Note:

Die @jutro/auth -Abhängigkeit ist nun optional für @jutro/router und @jutro/components-Pakete. Allerdings erfordert die AppFloorPlan-Komponente, dass @jutro/auth zu Ihren App-Abhängigkeiten hinzugefügt wird, um verwendet werden zu können.

Importanweisung

import { AppFloorPlan } from '@jutro/floorplan';

Komponentenvertrag

Eigenschaften

className

Typ

string

Beschreibung

CSS class name for this component.

contentAsSectionElement

Typ

boolean

Beschreibung

If set to true, content is rendered within <section> HTML tags, otherwise <main> is used. This is used when the page contains nested floorplans as only one element with main role is recommended.

contentClassName

Typ

string

Beschreibung

Additional class name for the main component.

contentLayout

Typ

'canvas' | 'default' | 'center'

Beschreibung

Layout type of the main content.

excludeScrollToTopRoutes

Typ

Route[]

Beschreibung

Routes to be excluded from automatic scroll to the top on a location change.

header

Typ

FloorplanHeaderProps

Beschreibung

Properties for the application's Header component.

leftSide

Typ

object

className: Typ
string
Beschreibung
CSS class name for this component.
collapsed: Typ
boolean
Beschreibung
If set to true, component is currently collapsed.
collapsible: Typ
boolean
Beschreibung
If set to true, component can be collapsed.
contextSwitcher: Typ
Nullable<ContextSwitcherPropTypes>
Beschreibung
Context switcher object.
renderContextSwitcher: Typ
RenderContextSwitcher
Beschreibung
Callback to render custom ContextSwitcher instead of default one.

Beschreibung

Props passed to SideNavigation component.

noContentPadding

Typ

boolean

Beschreibung

If set to true, padding of the page content will be removed.

renderFooter

Typ

({ className }: { className: string }) => ReactNode

Beschreibung

Function to render a custom footer.

rightSide

Typ

object

collapsible

Typ

boolean

Beschreibung

If set to true, component can be collapsed. This prop is false by default for desktop and true for smaller devices.

isInitiallyCollapsed

Typ

boolean

Beschreibung

If set to true, component will be collapsed on initial render. This prop is false by default for desktop and true for smaller devices.

shouldFocusAfterRender

Typ

boolean

Beschreibung

If set to true, component will be in focus after render. This is useful for proper accessibility support because the content will be automatically read by a screen reader.

sides

Typ

SideContentShape[]

componenterforderlich: Typ
ReactComponent
Beschreibung
Component to render as content.
labelerforderlich: Typ
IntlMessageShape
Beschreibung
The aria-label describing the content. This text is not rendered and is only used for accessibility.
componentProps: Typ
object
Beschreibung
Props to pass to the component passed to the component property. The type depends on the value of the component property.
icon: Typ
string | Icon
Beschreibung
An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.
id: Typ
string
Beschreibung
Unique identifier for the component.

Beschreibung

List of pages to render in the panel.

Beschreibung

Right panel config.

routes

Typ

Route[]

Beschreibung

App routes to be shown in the subheader or, if the screen is mall, the burger menu.

scrollContent

Typ

boolean

Beschreibung

If set to true, the height of the content is set to the height of the screen and the footer will be displayed at the bottom of the screen.

showFooter

Typ

boolean

Beschreibung

If set to false, the footer will not be shown.

showHeader

Typ

boolean

Beschreibung

If set to false, the header will not be shown.

showLeftSide

Typ

boolean

Beschreibung

If set to true and if a value has been passed to sideRoutes, then the left side panel will be shown.

showRightSide

Typ

boolean

Beschreibung

If set to false, the right side panel will not be shown.

showSubHeader

Typ

boolean

Beschreibung

If set to false, the subheader will not be shown.

sideRoutes

Typ

Route[]

Beschreibung

App routes to be shown in leftSide.

subHeader

Typ

object

className: Typ
string
Beschreibung
CSS class name for this component.
contextSwitcher: Typ
Nullable<ContextSwitcherPropTypes>
Beschreibung
Context switcher component that will be rendered in the left side of the header.
renderContextSwitcher: Typ
RenderContextSwitcher
Beschreibung
Callback to render custom ContextSwitcher instead of default one.
renderCustomComponent: Typ
JSXElementConstructor<Record<string, never>>
Beschreibung
Custom component placed on the right side of subheader or in burger menu.

Beschreibung

Sub header config.

Kopfzeileneigenschaften

Die Eigenschaft header in der AppFloorPlan-Komponente unterstützt ein Objekt mit den folgenden Eigenschaften:

appSwitcherCollapsibleGroupsThreshold: Typ
number
Beschreibung
Number of items from which the groups in AppSwitcher are collapsible and the search field is displayed.
appSwitcherFooterText: Typ
IntlMessageShape | LinkPropTypes
Beschreibung
Text displayed on the footer link in AppSwitcher. See IntlMessageShape and Link for more detailed information on the accepted types.
appSwitcherFooterUrl: Typ
Record<string, (...args: any[]) => void>
Beschreibung
URL to which the footer link in the AppSwitcher leads.
appSwitcherHideFooter: Typ
boolean
Beschreibung
If set to true, the footer in the AppSwitcher is hidden.
appSwitcherItems: Typ
AppSwitcherItems
Beschreibung
Array of items to be displayed in the App Switcher menu.
appSwitcherSearchEnabled: Typ
boolean
Beschreibung
If set to true, enables the search field in AppSwitcher if the number of items are equal to or above the appSwitcherCollapsibleGroupsThreshold value.
avatarChildren: Typ
React.ReactNode
Beschreibung
Avatar content to be rendered before routes links.
avatarProps: Typ
AvatarPropTypes
Beschreibung
Avatar props to be passed down if not using auth info (username, imageSource, title, subtitle).
burgerMenuRoutes: Typ
Route[]
Beschreibung
Routes to be rendered in the burger menu, for breakpoints smaller than desktop.
callbackMap: Typ
Record<string, (...args: any[]) => void>
Beschreibung
Map to resolve callbacks on avatar links.
className: Typ
string
Beschreibung
CSS class name for this component.
commonAvatarRoutes: Typ
Array<DropdownMenuLinkShape>
Beschreibung
Array of items to be displayed as common Avatar content.
contextSwitcher: Typ
Nullable<ContextSwitcherPropTypes>
Beschreibung
Context switcher object.
helpPopoverItems: Typ
React.ReactNode[]
Beschreibung
Help popover items.
helpUrl: Typ
IntlMessageShape | LinkPropTypes
Beschreibung
The link path for the help page.
languageSelectorProps: Typ
LanguageSelectorProps
Beschreibung
Props passed to Language Selector.
logoAlt: Typ
IntlMessageShape
Beschreibung
Logo image's alt prop.
logoSrc: Typ
string
Beschreibung
Display a logo from source.
logoTitle: Typ
IntlMessageShape
Beschreibung
The title for the logo.
logoUrl: Typ
string
Beschreibung
Link path to a logo.
notificationChildren: Typ
React.ReactNode
Beschreibung
Notification content to be rendered.
onAppSwitcherFooterClick: Typ
(event: React.SyntheticEvent) => void
Beschreibung
Callback which will be triggered when the footer link in the AppSwitcher is clicked.
onLoadValues: Typ
function
Beschreibung
Function for asynchronous data loading in the search field.
onSearchValueChange: Typ
function
Beschreibung
Display a search field. Callback for the search field value change.
renderBurgerMenuCustomItem: Typ
JSXElementConstructor<Record<string, never>>
Beschreibung
Component to be rendered inside burger menu after navigation.
renderContextSwitcher: Typ
RenderContextSwitcher
Beschreibung
Callback to render custom ContextSwitcher instead of default one.
renderCustomComponent: Typ
JSXElementConstructor<Record<string, never>>
Beschreibung
Custom component to be rendered in the application header. It will be rendered on the left of actions menu.
renderHeader: Typ
(props: RenderHeaderProps) => ReactNode
Beschreibung
Function to render a custom header.
renderHelpPopoverItems: Typ
() => ReactElement
Beschreibung
Render custom help popover items.
searchAvailableValues: Typ
LookupOptionShape[]
Beschreibung
An array of choice objects to display, works only if onLoadValues is not supplied.
searchFieldPlaceholder: Typ
IntlMessageShape
Beschreibung
Search field placeholder text.
searchOptionTypes: Typ
LookupOptionType[]
Beschreibung
Array of option types variants in the search lookup field.
showAppSwitcher: Typ
boolean
Beschreibung
If set to true, will show App Switcher.
showAvatar: Typ
boolean
Beschreibung
Display the avatar.
showHelp: Typ
boolean
Beschreibung
If set to true, shows the Help dropdown.
showLanguageSelector: Typ
boolean
Beschreibung
If set to true, shows the Language Selector.
showNotifications: Typ
boolean
Beschreibung
Display the notification icon.
useAuthInfo: Typ
boolean
Beschreibung
If set to true, uses Okta auth information.

Aktivieren und Deaktivieren verschiedener Bereiche von AppFloorPlan

Sie können die einzelnen Bereiche von AppFloorPlan deaktivieren oder aktivieren, indem Sie die entsprechende Eigenschaft auf false bzw. true festlegen. Alle folgenden Eigenschaften sind standardmäßig auf true festgelegt:

showHeader: Kopfzeile einblenden oder ausblenden, hat Vorrang vor der Eigenschaft header.
showSubHeader: Obere Navigation einblenden oder ausblenden. Damit sie angezeigt wird, ist mindestens eine Route in routes mit showOnNavBar=true erforderlich.
showFooter: Fußzeile einblenden oder ausblenden
showRightSide: Rechte Seite einblenden oder ausblenden. Wenn die Eigenschaft auf false festgelegt ist, wird der rechte Bereich nicht angezeigt, auch wenn Sie rightSide konfigurieren.
showLeftSide: Linke Navigation einblenden oder ausblenden. Damit sie angezeigt wird, ist mindestens eine Route in sideRoutes mit showOnNavBar=true erforderlich.

Sie können Routen mit der Eigenschaft routes oder sideRoutes von AppFloorPlan steuern. Um Ihrer App neue Seiten hinzuzufügen, fügen Sie sie einer dieser Eigenschaften hinzu.

Die Einstellung sideRoutes sorgt dafür, dass die Navigation auf der linken Seite angezeigt wird. Die Einstellung routes bewirkt, dass die Navigation oben in der Unterkopfzeile angezeigt wird. Wenn Sie die Navigation sowohl oben als auch links wünschen, können Sie sowohl sideRoutes als auch routes festlegen.

Diese Routen haben die folgende Form:

export type Route = {
  // react-router-dom Route and Redirect props
  //URL path of the route
  path?: string,
  // If true, will only match if the path matches 
  // the location.pathname exactly
  exact?: boolean,
  //If true, a path that has a trailing slash will 
  // only match a location.pathname with a trailing slash
  strict?: boolean,
  // Match is case sensitive
  sensitive?: boolean,
  //Path to which redirect when entering the current page
  redirect?: string,
  //When true, redirecting will push a new entry onto 
  // the history instead of replacing the current one
  push?: boolean,
  //The location to redirect to
  to?: IntlToShape,
  //A pathname to redirect from
  from?: string,
  // end of react-router-dom
  
  //Identifier for the route
  id?: string,
  // Component to be rendered as the destination page 
  // for this route
  component?: ReactComponent,
  //Properties for the component to be rendered
  componentProps?: Record<string, unknown>,
  //Title to be displayed for the route
  title?: IntlMessageShape,
  //Defines whether the route should be shown in the navigation
  showOnNavBar?: boolean,
  //Nav link properties
  navLink?: NavLinkPropTypes,
  //Array of sub-routes
  routes?: Route[],
  //An external path
  href?: string,
};

Weitere Informationen finden Sie auf der Seite zum Routing.

Grundrissüberschreibungen

Sie können für einzelne Seiten der Anwendung eine andere Definition verwenden. Erstellen Sie eine Konfiguration (FloorplanOverride) mit einer matches-Eigenschaft mit Pfaden zu Seiten.

 { 
  ...
  matches: ["/welcome", "/contact"];
  ...
 }

Wenn mehrere Überschreibungskonfigurationen für den gleichen Pfad definiert sind, hat die erste Vorrang.

Bei mehreren Konfigurationen ohne die matches-Eigenschaft gilt die erste als Standardkonfiguration. Wenn Sie keine Überschreibung für eine Seite angeben, wird die Standardkonfiguration verwendet.

In der Überschreibungskonfiguration müssen nur die Unterschiede zur Standardkonfiguration angegeben werden, da sie mit dieser zusammengeführt wird.

  export const example2PageDefinition = (): FloorPlanOverride {
    return {
        // Configuration override for the /example2 path only
        showRightSide: false,
        matches: '/example2'
    }
  }
  export const floorPlanDefinition = (): FloorPlan { 
    return { 
      // Default `AppFloorPlan` configuration definition
      contentLayout: 'canvas'
      showRightSide: true,
      rightSide: {
        ...
      }
    }
  }

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

Inhaltslayout

In AppFloorPlan können Sie beim Anwenden des Innenabstandslayouts für einen Hauptinhaltscontainer die Eigenschaft contentLayout mit einer ihrer Varianten verwenden:

center: maximale Breite und horizontal zentriert
canvas: ohne Innenabstand
default: mit Guidewire-Standardinnenabstand

contentLayout legt das Standardlayout für alle Seiten in einer Anwendung fest. Wenn Sie das Layout für Unterseiten abweichend vom Standard ändern möchten, müssen Sie die gewünschten Einstellungen definieren über FloorplanOverrides:

  export const example2PageDefinition = (): FloorPlanOverride {
    return {
        contentLayout: 'center',
        matches: '/example2'
    }
  }
  export const floorPlanDefinition = (): FloorPlan { 
    return { 
      // Default configuration
      contentLayout: 'canvas'
    }
  }

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

`contentClassName`{#contentclassname-prop}-Eigenschaft.

Sie können zudem eine contentClassName-Eigenschaft verwenden, um benutzerdefinierte CSS im Hauptinhaltscontainer zu platzieren und so Hintergründe und andere Stile zu ändern.

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 auch einen gewissen Aufwand bedeutet. Für Aspekte wie Reaktionsfähigkeit und Barrierefreiheit 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“.

Code​

Importanweisung​

Komponentenvertrag​

Eigenschaften​

className​

contentAsSectionElement​

contentClassName​

contentLayout​

excludeScrollToTopRoutes​

header​

leftSide​

noContentPadding​

renderFooter​

rightSide​

routes​

scrollContent​

showFooter​

showHeader​

showLeftSide​

showRightSide​

showSubHeader​

sideRoutes​

subHeader​

Kopfzeileneigenschaften​

appSwitcherCollapsibleGroupsThreshold​

appSwitcherFooterText​

appSwitcherFooterUrl​

appSwitcherHideFooter​

appSwitcherItems​

appSwitcherSearchEnabled​

avatarChildren​

avatarProps​

burgerMenuRoutes​

callbackMap​

className​

commonAvatarRoutes​

contextSwitcher​

helpPopoverItems​

helpUrl​

languageSelectorProps​

logoAlt​

logoSrc​

logoTitle​

logoUrl​

notificationChildren​

onAppSwitcherFooterClick​

onLoadValues​

onSearchValueChange​

renderBurgerMenuCustomItem​

renderContextSwitcher​

renderCustomComponent​

renderHeader​

renderHelpPopoverItems​

searchAvailableValues​

searchFieldPlaceholder​

searchOptionTypes​

showAppSwitcher​

showAvatar​

showHelp​

showLanguageSelector​

showNotifications​

useAuthInfo​

Aktivieren und Deaktivieren verschiedener Bereiche von AppFloorPlan​

Routen, Navigation und Seiten​

Grundrissüberschreibungen​

Inhaltslayout​

contentClassName{#contentclassname-prop}-Eigenschaft.​

Beispiele​

Basiskonfiguration​

Benutzerdefinierte Kopfzeile​

Rechte Seite​

Code

Importanweisung

Komponentenvertrag

Eigenschaften

`className`

`contentAsSectionElement`

`contentClassName`

`contentLayout`

`excludeScrollToTopRoutes`

`header`

`leftSide`

`noContentPadding`

`renderFooter`

`rightSide`

`routes`

`scrollContent`

`showFooter`

`showHeader`

`showLeftSide`

`showRightSide`

`showSubHeader`

`sideRoutes`

`subHeader`

Kopfzeileneigenschaften

`appSwitcherCollapsibleGroupsThreshold`

`appSwitcherFooterText`

`appSwitcherFooterUrl`

`appSwitcherHideFooter`

`appSwitcherItems`

`appSwitcherSearchEnabled`

`avatarChildren`

`avatarProps`

`burgerMenuRoutes`

`callbackMap`

`className`

`commonAvatarRoutes`

`contextSwitcher`

`helpPopoverItems`

`helpUrl`

`languageSelectorProps`

`logoAlt`

`logoSrc`

`logoTitle`

`logoUrl`

`notificationChildren`

`onAppSwitcherFooterClick`

`onLoadValues`

`onSearchValueChange`

`renderBurgerMenuCustomItem`

`renderContextSwitcher`

`renderCustomComponent`

`renderHeader`

`renderHelpPopoverItems`

`searchAvailableValues`

`searchFieldPlaceholder`

`searchOptionTypes`

`showAppSwitcher`

`showAvatar`

`showHelp`

`showLanguageSelector`

`showNotifications`

`useAuthInfo`

Aktivieren und Deaktivieren verschiedener Bereiche von AppFloorPlan

Routen, Navigation und Seiten

Grundrissüberschreibungen

Inhaltslayout

`contentClassName`{#contentclassname-prop}-Eigenschaft.

Beispiele

Basiskonfiguration

Benutzerdefinierte Kopfzeile

Rechte Seite