コンテンツにスキップ
Starlight
Filters

    ファイルツリー

    ファイルアイコンや折りたたみ可能なサブディレクトリを使ってディレクトリ構造を表示するには、<FileTree>コンポーネントを使用します。

    プレビュー
    • astro.config.mjs 重要なファイル
    • package.json
    • README.md
    • ディレクトリsrc
      • ディレクトリcomponents
        • Header.astro
      • …
    • ディレクトリpages/
      • …

    インポート

    Section titled “インポート”
    import { FileTree } from '@astrojs/starlight/components';

    使用方法

    Section titled “使用方法”

    <FileTree>コンポーネントを使用して、ファイルアイコンや折りたたみ可能なサブディレクトリを含むファイルツリーを表示します。

    ファイルやディレクトリの構造を指定するには、Markdownの箇条書きリストを<FileTree>の内部で使用します。サブディレクトリを作成するには、ネストしたリストを作成するか、リスト項目の末尾に / を追加して、特定の内容を持たないディレクトリとして表示します。

    import { FileTree } from '@astrojs/starlight/components';
    

    <FileTree>
    

    - astro.config.mjs
    - package.json
    - src
      - components
        - Header.astro
        - Title.astro
      - pages/
    

    </FileTree>
    プレビュー
    • astro.config.mjs
    • package.json
    • ディレクトリsrc
      • ディレクトリcomponents
        • Header.astro
        • Title.astro
      • ディレクトリpages/
        • …

    エントリを強調表示する

    Section titled “エントリを強調表示する”

    ファイルやディレクトリの名前を太字にして目立たせることができます。例: **README.md**。

    import { FileTree } from '@astrojs/starlight/components';
    

    <FileTree>
    

    - src
      - components
        - **Header.astro**
        - Title.astro
    

    </FileTree>
    プレビュー
    • ディレクトリsrc
      • ディレクトリcomponents
        • Header.astro
        • Title.astro

    コメントを追加する

    Section titled “コメントを追加する”

    ファイルやディレクトリにコメントを追加するには、名前の後にテキストを追加します。コメントには、太字や斜体などのMarkdownのインライン形式がサポートされています。

    import { FileTree } from '@astrojs/starlight/components';
    

    <FileTree>
    

    - src
      - components
        - Header.astro **重要な**ファイル
        - Title.astro
    

    </FileTree>
    プレビュー
    • ディレクトリsrc
      • ディレクトリcomponents
        • Header.astro 重要なファイル
        • Title.astro

    プレースホルダーを追加する

    Section titled “プレースホルダーを追加する”

    ...または…を名前として使用することで、プレースホルダーファイルやディレクトリを追加できます。これは、フォルダがさらに多くのアイテムを含むことが期待されていることを読者に示しながら、それらをすべて明示的に指定する必要がない場合に便利です。

    import { FileTree } from '@astrojs/starlight/components';
    

    <FileTree>
    

    - src
      - components
        - Header.astro
        - …
    

    </FileTree>
    プレビュー
    • ディレクトリsrc
      • ディレクトリcomponents
        • Header.astro
        • …

    <FileTree> プロパティ

    Section titled “<FileTree> プロパティ”

    実装: FileTree.astro

    <FileTree>コンポーネントはプロパティを受け付けません。