foundation-layout.foundationlayoutcomponents

Home > @genesislcap/foundation-layout > foundationLayoutComponents

foundationLayoutComponents variable

Registration object to register the layout with your design system.

Signature:

foundationLayoutComponents: {
    foundationLayout: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
        baseName: string;
        styles: import("@microsoft/fast-element").ElementStyles;
        template: import("@microsoft/fast-element").ViewTemplate<import("./layout-main").FoundationLayout, any>;
    }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
        baseName: string;
        styles: import("@microsoft/fast-element").ElementStyles;
        template: import("@microsoft/fast-element").ViewTemplate<import("./layout-main").FoundationLayout, any>;
    }, typeof import("./layout-main").FoundationLayout>;
    foundationLayoutRegion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
        baseName: string;
        template: import("@microsoft/fast-element").ViewTemplate<any, any>;
    }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
        baseName: string;
        template: import("@microsoft/fast-element").ViewTemplate<any, any>;
    }, typeof import("./layout-region").FoundationLayoutRegion>;
    foundationLayoutItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
        baseName: string;
        template: import("@microsoft/fast-element").ViewTemplate<any, any>;
    }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
        baseName: string;
        template: import("@microsoft/fast-element").ViewTemplate<any, any>;
    }, typeof import("./layout-item").FoundationLayoutItem>;
    register(container?: Container, ...rest: any[]): void;
}

Remarks

Registers the three layout component types with the design system. You require to use the prefix of the design system with each tag. If you wish to alternate the styles of the layout you only need to compose your own custom version of FoundationLayout as this contains the styles for the entire layout.

Example

<zero-layout></zero-layout> if you are using the layout with the zero design-system.