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

Поставить звезду
Макеты и Сетки layoutflexspacing

Horizontal Cluster

Горизонтальный кластер для кнопок и меток с автоматическим переносом строк.

Horizontal Cluster

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

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

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

<ClusterHorizontal>Content</ClusterHorizontal>
--- import { HorizontalCluster } from 'astro-component-kit'; --- <ClusterHorizontal>Content</ClusterHorizontal>

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

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

astro 
---
/**
 * ClusterHorizontal — Auto-wrapping flex row for buttons, badges, or list items.
 */
interface Props {
  gap?: string;
  align?: 'flex-start' | 'center' | 'flex-end';
  className?: string;
}

const { gap = '0.75rem', align = 'center', className = '' } = Astro.props;
---

<div class={`cluster ${className}`} style={`--gap: ${gap}; --align: ${align};`}>
  <slot>
    <span class="cluster-tag">Tag 1</span>
    <span class="cluster-tag">Tag 2</span>
    <span class="cluster-tag">Tag 3</span>
    <span class="cluster-tag">Tag 4</span>
    <span class="cluster-tag">Tag 5</span>
  </slot>
</div>

<style>
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, 0.75rem);
    align-items: var(--align, center);
    width: 100%;
  }
  .cluster-tag {
    padding: 0.4rem 0.8rem;
    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
    border-radius: 9999px;
    font-size: 0.8rem;
    color: #94a3b8;
  }
</style>
--- /** * ClusterHorizontal — Auto-wrapping flex row for buttons, badges, or list items. */ interface Props { gap?: string; align?: 'flex-start' | 'center' | 'flex-end'; className?: string; } const { gap = '0.75rem', align = 'center', className = '' } = Astro.props; --- <div class={`cluster ${className}`} style={`--gap: ${gap}; --align: ${align};`}> <slot> <span class="cluster-tag">Tag 1</span> <span class="cluster-tag">Tag 2</span> <span class="cluster-tag">Tag 3</span> <span class="cluster-tag">Tag 4</span> <span class="cluster-tag">Tag 5</span> </slot> </div> <style> .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, 0.75rem); align-items: var(--align, center); width: 100%; } .cluster-tag { padding: 0.4rem 0.8rem; background: rgb(var(--ink-rgb, 255 255 255) / 0.05); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1); border-radius: 9999px; font-size: 0.8rem; color: #94a3b8; } </style>

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

Категория
Макеты и Сетки
Имя файла
HorizontalCluster.astro
Зависимости
Нет — чистый Astro + CSS
Теги
layoutflexspacing