Отображение данных treeinteractivedata

Expandable Row

Интерактивный узел дерева с поддержкой выбора и вложенных ветвей.

▶ Users Database

Columns: id, name, email, avatar, status

Rows: 1,402 entries

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

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

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

<TreeItemInteractive>Content</TreeItemInteractive>

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

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

---
---
<div class="exp-row">
  <div class="main"><span>▶</span> Users Database</div>
  <div class="child">
    <p>Columns: id, name, email, avatar, status</p>
    <p>Rows: 1,402 entries</p>
  </div>
</div>
<style>
  .exp-row { border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 12px; }
  .main { color: #fff; font-size: 0.85rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
  .main span { font-size: 0.6rem; color: #64748b; transition: 0.3s; }
  .child { margin-top: 12px; padding-left: 24px; color: #64748b; font-size: 0.8rem; display: none; line-height: 1.5; }
  .exp-row:hover .main { color: #818cf8; }
  .exp-row:hover .main span { transform: rotate(90deg); color: #818cf8; }
  .exp-row:hover .child { display: block; }
</style>

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

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

Живое превью

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

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

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