Containers
Containers
are blocks responsible for styling the page's content, serving as the layout for the documentation elements.
PageContainer
A special container designed for custom pages
TypeScript
JavaScript
import { PageContainer } from "robindoc";
const HomePage = () => <PageContainer>{/* ... */}</PageContainer>;
export default HomePage;
import { PageContainer } from "robindoc";
const HomePage = () => <PageContainer>{/* ... */}</PageContainer>;
export default HomePage;
DocsContainer
A special container designed for a documentation. Assumes the use of [Sidebar](./sidebar.md)
, [Page](./page.md)
on the page
TypeScript
JavaScript
import { DocsContainer } from "robindoc";
const DocsLayout: React.FC<React.PropsWithChildren> = ({ children }) => (
<DocsContainer>{children}</DocsContainer>;
);
export default DocsLayout;
import { DocsContainer } from "robindoc";
const DocsLayout = ({ children }) => (
<DocsContainer>{children}</DocsContainer>;
);
export default DocsLayout;
BlogContainer
A special container designed for a blog. It differs in that it does not involve the use of [Sidebar](./sidebar.md)
on the page
TypeScript
JavaScript
import { BlogContainer } from "robindoc";
const BlogLayout: React.FC<React.PropsWithChildren> = ({ children }) => (
<BlogContainer>{children}</BlogContainer>;
);
export default BlogLayout;
import { BlogContainer } from "robindoc";
const BlogLayout = ({ children }) => (
<BlogContainer>{children}</BlogContainer>;
);
export default BlogLayout;
Usage
Containers
are independent components and don't rely on any specific page. It's assumed you can use it once across the entire project or section.
For more details on using Containers
, refer to the section App organization.