The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

AppFrame

Gitea

A layout component used as top-level “frame“ for the application.

How to use this component

<i80-app-frame> is a pure layout element used to build the top-level “frame” of an application: a grid that holds the header across the top, the side nav down the left, the main area and the footer. The areas are agnostic of the content and don’t have intrinsic sizes, apart from the ones that are required to make the whole thing work as a top-level application frame.

In HTML the areas are the elements you already write — <header>, <aside>, <main> and <footer>. The frame creates nothing and moves nothing: it recognises those four elements among its children and styles them in place.

Naming an area explicitly

A page that already has a <main> of its own cannot have a second one. On such a page — a documentation page like this one, or a demo embedded in one — put slot="header", slot="sidebar", slot="main", slot="footer" or slot="modals" on any element instead, and the frame treats it as that area. Every example below does this, because it runs inside this page.

The main area

The frame gives the main area the id i80-main, so a “Skip to main content” link in the header can jump straight to it. Only one element per page gets the id: a second frame on the same page, or a copy of one, leaves its main area without it.

Note: the AppSideNav component, which is meant to only be used together with the AppHeader and not as standalone navigation, does not include a skip link.

Basic usage

The most basic application “frame” looks like this:

header
sidebar
main
footer
 
<!-- On a real screen these are your own <header>, <aside>, <main> and <footer>.
     This page already has a <main>, so the areas are named with slot instead. -->
<div class="doc-app-frame-mock-viewport">
  <i80-app-frame>
    <div slot="header" class="doc-placeholder" style="height: 60px; background: #e5ffd2">header</div>
    <div slot="sidebar" class="doc-placeholder" style="width: 120px; height: 100%; background: #e4c5f3">sidebar</div>
    <div slot="main" class="doc-placeholder" style="height: 100%; background: #d2f4ff">main</div>
    <div slot="footer" class="doc-placeholder" style="height: 60px; background: #fff8d2">footer</div>
  </i80-app-frame>
</div>

Leaving an area out

Depending on the UI implementation of the product where the frame is used, an area can simply be left out: don’t write that element and it isn’t there, and the grid closes up around the gap. For example, this is the “frame” of an application that doesn’t have a “header”:

sidebar
main
footer
 
<!-- An area you leave out simply isn't there; the grid closes up around it -->
<div class="doc-app-frame-mock-viewport">
  <i80-app-frame>
    <div slot="sidebar" class="doc-placeholder" style="width: 120px; height: 100%; background: #e4c5f3">sidebar</div>
    <div slot="main" class="doc-placeholder" style="height: 100%; background: #d2f4ff">main</div>
    <div slot="footer" class="doc-placeholder" style="height: 60px; background: #fff8d2">footer</div>
  </i80-app-frame>
</div>

The modals area

Beyond the four areas, the frame provides a modals area: a container fixed over the whole page, for content that has to sit on top of everything else. While it is empty, a display: none style is applied to it.

header
sidebar
main
footer
modals
 
<div class="doc-app-frame-mock-viewport">
  <i80-app-frame>
    <div slot="header" class="doc-placeholder" style="height: 60px; background: #e5ffd2">header</div>
    <div slot="sidebar" class="doc-placeholder" style="width: 120px; height: 100%; background: #e4c5f3">sidebar</div>
    <div slot="main" class="doc-placeholder" style="height: 100%; background: #d2f4ff">main</div>
    <div slot="footer" class="doc-placeholder" style="height: 60px; background: #fff8d2">footer</div>
    <!-- Fixed over the whole page, and hidden while it is empty -->
    <div slot="modals" class="doc-placeholder" style="background: #ffd2d2">modals</div>
  </i80-app-frame>
</div>

If the content is injected dynamically — e.g. by JavaScript — give the element an id so that your code can find it in the DOM:

sidebar
main
 
<div class="doc-app-frame-mock-viewport">
  <i80-app-frame>
    <div slot="sidebar" class="doc-placeholder" style="width: 120px; height: 100%; background: #e4c5f3">sidebar</div>
    <div slot="main" class="doc-placeholder" style="height: 100%; background: #d2f4ff">main</div>
    <!-- Give the area an id and your code can put markup into it from anywhere -->
    <div slot="modals" id="app-frame-modals"></div>
  </i80-app-frame>
</div>

Code consideration

<i80-modal> and <i80-flyout> use the browser’s top layer and don’t need this container at all.

Attributes

<i80-app-frame> renders this component. Everything it understands:

Attribute Values Default Notes
header · aside · main · footer element The four areas. Write the elements; the frame places them. The header sits above both columns when there is a side nav, the <main> gets id="i80-main" as the target of a skip link, and an area you leave out simply isn't there.
slot header · sidebar · main · footer · modals Names an area on any element, for a page that cannot have a second <main> — a documentation page, a demo inside one.
modals element A container fixed over the whole page, hidden while it is empty, for markup injected by JavaScript. <i80-modal> and <i80-flyout> use the browser's top layer and don't need it.

The tag keeps any native element you write inside it, so a server-rendered form, link or button works as it is. See Web Components for loading i80.js and the reference for these examples running.

0.1.0

Første i80-version (fork af upstream, se core/UPSTREAM.md).

On this page: