レイアウト
ビルトインレイアウト
テーマはレイアウトの動作を上書きすることがあるため、使い方やパラメータ、サンプルを正しく知るには、各テーマのドキュメントを参照するのがよいでしょう。
center
コンテンツを画面中央に表示します。
cover
プレゼンテーションの表紙を表示するために使用します。プレゼンテーションのタイトルや、コンテキストを含めることができます。
default
最も基本的なレイアウトで、あらゆる種類のコンテンツを表示することができます。
end
プレゼンテーションの最後のページです。
fact
事実やデータを画面上で大きく目立たせて見せるために使用します。
full
画面のすべてのスペースを使って、コンテンツを表示します。
image-left
画面の左側に画像を表示し、右側にコンテンツを配置します。
使い方
---
layout: image-left
# the image source
image: ./path/to/the/image
# a custom class name to the content
class: my-cool-content-on-the-right
---
image-right
画面右側に画像を表示し、左側にコンテンツを配置します。
使い方
---
layout: image-right
# the image source
image: ./path/to/the/image
# a custom class name to the content
class: my-cool-content-on-the-left
---
image
画像をページのメインコンテンツとして表示します。
使い方
---
layout: image
# the image source
image: ./path/to/the/image
---
iframe-left
画面の左側にWebページを表示し、右側にコンテンツを配置します。
使い方
---
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
画面の右側にWebページを表示し、左側にコンテンツを配置します。
使い方
---
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
Webページをメインコンテンツとして表示します。
使い方
---
layout: iframe
# the web page source
url: https://github.com/slidevjs/slidev
---
intro
プレゼンテーションの始まりに使用します。一般的にはプレゼンテーションのタイトル、簡潔な説明、著者などです。
none
スタイルなしのレイアウトです。
quote
引用文を目立つように表示します。
section
新しいプレゼンテーションのセクションの開始を示すために使用します。
statement
断言/宣言をメインページのコンテンツとして表示します。
two-cols
ページのコンテンツを2列に分割します。
使い方
---
layout: two-cols
---
# Left
これは左側に表示されます。
::right::
# Right
これは右側に表示されます。
カスタムレイアウト
プロジェクトルートの配下にlayouts/というディレクトリを作成し、そこにカスタムしたVueのレイアウトコンポーネントを配置します。
詳細はレイアウトのセクションを参照してください。
テーマが提供するレイアウト
テーマはレイアウトを提供したり、既存のレイアウトを上書きすることができます。テーマが提供するレイアウトについては、各テーマのドキュメントを参照してください。