UI компоненты

Спиннер

Основы

Используя компонент moonshine::spinner, вы можете создавать индикаторы загрузки.

<x-moonshine::spinner />
<x-moonshine::spinner />

Размер

Доступные размеры:

  • sm
  • md
  • lg
  • xl
<x-moonshine::spinner size="sm" />
<x-moonshine::spinner size="md" />
<x-moonshine::spinner size="lg" />
<x-moonshine::spinner size="xl" />
<x-moonshine::spinner size="sm" />
<x-moonshine::spinner size="md" />
<x-moonshine::spinner size="lg" />
<x-moonshine::spinner size="xl" />

Цвет

Доступные цвета:

primary secondary success warning error info

<x-moonshine::spinner color="primary" />
<x-moonshine::spinner color="secondary" />
<x-moonshine::spinner color="success" />
<x-moonshine::spinner color="warning" />
<x-moonshine::spinner color="error" />
<x-moonshine::spinner color="info" />
<x-moonshine::spinner color="primary" />
<x-moonshine::spinner color="secondary" />
<x-moonshine::spinner color="success" />
<x-moonshine::spinner color="warning" />
<x-moonshine::spinner color="error" />
<x-moonshine::spinner color="info" />

Позиционирование

Параметр absolute="true" задает абсолютное позиционирование индикатора загрузки.

<x-moonshine::spinner :absolute="true" />
<x-moonshine::spinner :absolute="true" />

Параметр fixed="true" задает фиксированное позиционирование индикатора загрузки.

<x-moonshine::spinner :fixed="true" />
<x-moonshine::spinner :fixed="true" />