Skip to component content
Layout154 / 155

AppFrame

Own a bounded application header and content viewport.

Example

Project workspace

Bounded content, without a split view or custom stylesheet.
Source
AppFrame.tsxtsx
import {
  AppFrame,
  ContentRegion,
  NavigationTitle,
  Text,
  ViewFrame,
} from "@/ohmygui";
export default function Example() {
  return (
    <ViewFrame height={320}>
      <AppFrame
        as="section"
        viewport={false}
        header={
          <NavigationTitle title="Project workspace" size="compact" level={3} />
        }
      >
        <ContentRegion label="Project details">
          <Text>
            Bounded content, without a split view or custom stylesheet.
          </Text>
        </ContentRegion>
      </AppFrame>
    </ViewFrame>
  );
}