Templatelayout

Learning App Shell

Stable

Estrutura de página para experiências de aprendizagem: header, navegação, conteúdo e aside, todos como slots.

Instalação

npx up-web-ds add learning-app-shell

Preview

Basic

Pular para o conteúdo

TypeScript essencial

Uniões e narrowing

Uma união descreve um valor que pode ser uma coisa ou outra.

Full

Pular para o conteúdo
Direito Civil IMódulo 2

Defeitos do negócio jurídico

Erro, dolo, coação, estado de perigo, lesão e fraude contra credores. Cada defeito tem requisitos próprios e consequências distintas.

Questão 1 de 3

Qual defeito exige dolo de aproveitamento?

Progress

Pular para o conteúdo
Direito Civil IMódulo 2

Defeitos do negócio jurídico

Avance pelo conteúdo no seu ritmo. O progresso é atualizado pela página, não pelo shell.

Without Aside

Pular para o conteúdo
Direito Civil IMódulo 2

Defeitos do negócio jurídico

Erro, dolo, coação, estado de perigo, lesão e fraude contra credores. Cada defeito tem requisitos próprios e consequências distintas.

Questão 1 de 3

Qual defeito exige dolo de aproveitamento?

Content Only

Pular para o conteúdo
Direito Civil IMódulo 2

Defeitos do negócio jurídico

Erro, dolo, coação, estado de perigo, lesão e fraude contra credores. Cada defeito tem requisitos próprios e consequências distintas.

Questão 1 de 3

Qual defeito exige dolo de aproveitamento?

Usage

@/components/learning-app-shell
import { LearningAppShell } from '@/components/learning-app-shell'
Learning App Shell
<LearningAppShell
  header={<h2 className="font-heading type-h3">TypeScript essencial</h2>}
  navigation={
    <ol className="flex flex-col gap-1 type-small">
      <li>1. Tipos primitivos</li>
      <li>2. Uniões e narrowing</li>
    </ol>
  }
>
  <article className="flex flex-col gap-2">
    <h3 className="font-heading type-h3">Uniões e narrowing</h3>
    <p className="type-body">
      Uma união descreve um valor que pode ser uma coisa ou outra.
    </p>
  </article>
</LearningAppShell>

Props

Props de LearningAppShell
PropTypeDefaultDescription
children, obrigatóriaReactNodesem valor padrão
asideReactNodesem valor padrãoSecondary context: progress, objectives, resources.
asideLabelstring'Contexto da aula'Accessible name for the complementary landmark.
classNamestringsem valor padrão
footerReactNodesem valor padrão
headerReactNodesem valor padrãoProduct chrome: brand, course title, account.
navigationReactNodesem valor padrãoCourse or module navigation. Rendered in a landmark.
navigationLabelstring'Navegação do curso'Accessible name for the navigation landmark.

prop obrigatória.

Metadata

Notas de acessibilidade

Verificado em tests/e2e/learning-app-shell.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA. Landmarks nomeados para navegação e aside, skip link para o conteúdo e layout guiado pela largura do próprio shell: ele empilha até haver espaço para navegação, conteúdo e contexto sem comprimir a leitura. O exemplo interativo atualiza texto vivo e progressbar ao avançar o curso.

Classificação

Layer
Template
Domínio
Education
Categoria
layout
Status
Stable

Origem e distribuição

Fonte
Internal (up-web-studio)
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
Nenhuma
Ícones
Nenhum
Construído sobre
Nenhum
Usado por
Nenhum ainda