Layouts

Layouts Internos

Já que temas podem sobrepor o comportamento dos layouts, o melhor jeito de saber exatamente o uso, parâmetros e exemplos é consultando suas respectivas documentações.

center

Exibe o conteúdo no meio da tela.

cover

Usado para exibir a página de capa para a apresentação, pode conter o título, contextualização, etc.

default

O layout mais básico, para exibir qualquer conteúdo.

end

A página final da apresentação.

fact

Para mostrar algum fato ou dado com bastante destaque na tela.

full

Usa todo o espaço da tela para exibir o conteúdo.

image-left

Mostra uma imagem no lado esquerdo da tela, o conteúdo será posicionado à direita.

Uso

---
layout: image-left

# a fonte da imagem
image: ./caminho/para/a/imagem

# uma nome de classe customizado para o conteúdo
class: my-cool-content-on-the-right
---

image-right

Mostra uma imagem no lado direito da tela, o conteúdo será posicionado à esquerda.

Uso

---
layout: image-right

# a fonte da imagem
image: ./caminho/para/a/imagem

# uma nome de classe customizado para o conteúdo
class: my-cool-content-on-the-left
---

image

Mostra uma imagem como o conteúdo principal da página.

Uso

---
layout: image

# a fonte da imagem
image: ./caminho/para/a/imagem
---

iframe-left

Shows a web page on the left side of the screen, the content will be placed on the right side.

Usage

---
layout: iframe-left

# the web page source
url: https://github.com/slidevjs/slidev

# a custom class name to the content
class: my-cool-content-on-the-right
---

iframe-right

Shows a web page on the right side of the screen, the content will be placed on the left side.

Usage

---
layout: iframe-right

# the web page source
url: https://github.com/slidevjs/slidev

# a custom class name to the content
class: my-cool-content-on-the-left
---

iframe

Shows a web page as the main content of the page.

Usage

---
layout: iframe

# the web page source
url: https://github.com/slidevjs/slidev
---

intro

Para introduzir a apresentação, geralmente com o título, uma descrição curta, o autor, etc.

none

Um layout sem nenhum estilo existente.

quote

Para exibir uma citação com destaque.

section

Usado para marcar o início de uma nova seção da apresentação.

statement

Fazer uma afirmação/declaração como o principal conteúdo da página.

two-cols

Separa o conteúdo da página em duas colunas.

Uso

---
layout: two-cols
---

# Esquerda

Isto está à esquerda

::right::

# Direita

Isto está à direita

Layouts Customizados

Crie um diretório layouts/ no diretório raiz do projeto, e simplesmente insira os componentes do seu layout customizado do Vue lá dentro.

Leia mais na seção Customização.

Layouts providos por temas

Temas podem fornecer layouts ou até mesmo sobrepor layouts existentes. É recomendado ler a documentação do tema para ver o que eles provém.