1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Отображение данных treedatafiles

File Tree Structure

Дерево файлов и каталогов проекта с иконками расширений и папок.

📁 src
📁 components
📄 Button.astro
📄 Card.astro
📄 styles.css
📄 astro.config.mjs

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

astro 
---
import { FileTreeStructure } from 'astro-component-kit';
---

<FileTreeView>Content</FileTreeView>
--- import { FileTreeStructure } from 'astro-component-kit'; --- <FileTreeView>Content</FileTreeView>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/FileTreeStructure.astro:

astro 
---
---
<div class="tree">
  <div class="folder active">📁 src</div>
  <div class="indent">
    <div class="folder">📁 components</div>
    <div class="indent">
      <div class="file">📄 Button.astro</div>
      <div class="file">📄 Card.astro</div>
    </div>
    <div class="file">📄 styles.css</div>
  </div>
  <div class="file">📄 astro.config.mjs</div>
</div>
<style>
  .tree { font-family: monospace; font-size: 0.85rem; color: #94a3b8; line-height: 1.8; }
  .indent { padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,0.1); }
  .folder { color: #fff; font-weight: 700; cursor: pointer; }
  .folder.active { color: #818cf8; }
  .file { cursor: pointer; padding-left: 4px; }
  .file:hover { color: #fff; }
</style>
--- --- <div class="tree"> <div class="folder active">📁 src</div> <div class="indent"> <div class="folder">📁 components</div> <div class="indent"> <div class="file">📄 Button.astro</div> <div class="file">📄 Card.astro</div> </div> <div class="file">📄 styles.css</div> </div> <div class="file">📄 astro.config.mjs</div> </div> <style> .tree { font-family: monospace; font-size: 0.85rem; color: #94a3b8; line-height: 1.8; } .indent { padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,0.1); } .folder { color: #fff; font-weight: 700; cursor: pointer; } .folder.active { color: #818cf8; } .file { cursor: pointer; padding-left: 4px; } .file:hover { color: #fff; } </style>

Краткая информация

Категория
Отображение данных
Имя файла
FileTreeStructure.astro
Зависимости
Нет — чистый Astro + CSS
Теги
treedatafiles