Quartz provides several higher-order components that help with layout composition and responsive design. These components wrap other components to add additional functionality or modify their behavior.
Flex Component
The Flex component creates a flexible box layout that can arrange child components in various ways. It’s particularly useful for creating responsive layouts and organizing components in rows or columns.
type FlexConfig = {
components: {
Component: QuartzComponent
grow?: boolean // whether component should grow to fill space
shrink?: boolean // whether component should shrink if needed
basis?: string // initial main size of the component
order?: number // order in flex container
align?: "start" | "end" | "center" | "stretch" // cross-axis alignment
justify?: "start" | "end" | "center" | "between" | "around" // main-axis alignment
}[]
direction?: "row" | "row-reverse" | "column" | "column-reverse"
wrap?: "nowrap" | "wrap" | "wrap-reverse"
gap?: string
}Example Usage
Component.Flex({
components: [
{
Component: Component.Search(),
grow: true, // Search will grow to fill available space
},
{ Component: Component.Darkmode() }, // Darkmode keeps its natural size
],
direction: "row",
gap: "1rem",
})MobileOnly Component
The MobileOnly component is a wrapper that makes its child component only visible on mobile devices. This is useful for creating responsive layouts where certain components should only appear on smaller screens.
Example Usage
Component.MobileOnly(Component.Spacer())DesktopOnly Component
The DesktopOnly component is the counterpart to MobileOnly. It makes its child component only visible on desktop devices. This helps create responsive layouts where certain components should only appear on larger screens.
Example Usage
Component.DesktopOnly(Component.TableOfContents())ConditionalRender Component
The ConditionalRender component is a wrapper that conditionally renders its child component based on a provided condition function. This is useful for creating dynamic layouts where components should only appear under certain conditions.
type ConditionalRenderConfig = {
component: QuartzComponent
condition: (props: QuartzComponentProps) => boolean
}Example Usage
Component.ConditionalRender({
component: Component.Search(),
condition: (props) => props.displayClass !== "fullpage",
})The example above would only render the Search component when the page is not in fullpage mode.
Component.ConditionalRender({
component: Component.Breadcrumbs(),
condition: (page) => page.fileData.slug !== "index",
})The example above would hide breadcrumbs on the root index.md page.