@cieloazul310/gatsby-theme-aoi-layout
A layout component for
@cieloazul310/gatsby-theme-aoi
Layout component
import { Layout } from '@cieloazul310/gatsby-theme-aoi';Main package @cieloazul310/gatsby-theme-aoi includes a following component.
<Layout>
LayoutProps
-
children (Required):
React.ReactNode -
title?:
string -
description?:
string -
keywords?:
string[] -
image?:
string -
loading?:
boolean -
componentViewports?:
Partial<ComponentViewports> -
drawerWidth?:
number -
tabSticky?:
boolean -
drawerContents?:
React.ReactNode -
tabs?:
React.ReactNode -
bottomNavigation?:
React.ReactNode -
fab?:
React.ReactNode
ComponentViewports
Component viewports is a configuration for <SwipeableDrawer> <PermanentDrawer> <BottomNavigation> <Fab> viewports.
| key | default |
|---|---|
swipeableDrawer |
"smDown" |
permanentDrawer |
"mdUp" |
bottomNav |
"xsDown" |
fab |
"smDown" |
MUI breakpoints (ex. "smDown", "mdUp") or boolean
Shadowing components
.
├── BottomNav
│ └── index.tsx
├── DrawerInner
│ ├── Contents.tsx
│ ├── DrawerFooter.tsx
│ ├── DrawerSharer.tsx
│ ├── StateHandler.tsx
│ └── index.tsx
├── Fab
│ └── index.tsx
├── Footer
│ ├── Copyrights.tsx
│ ├── Socials.tsx
│ └── index.tsx
├── FooterMenu
│ └── index.tsx
├── Header
│ ├── ButtonLeft.tsx
│ ├── ButtonRight.tsx
│ ├── ShareButtons.tsx
│ └── index.tsx
├── SEO
│ └── index.tsx
├── TabContainer
│ └── index.tsx
├── index.tsx
└── menu.tsxhttps://github.com/cieloazul310/gatsby-aoi/tree/main/packages/gatsby-theme-aoi-layout/src
Gatsby Theme Aoi packages
@cieloazul310/gatsby-theme-aoi@cieloazul310/gatsby-theme-aoi-components@cieloazul310/gatsby-theme-aoi-layout@cieloazul310/gatsby-theme-aoi-top-layout@cieloazul310/gatsby-theme-aoi-utils