UI компоненты

Индикатор прогресса

Основы

Компонент moonshine::progress-bar позволяет создать индикатор прогресса.

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

  • primary
  • secondary
  • success
  • warning
  • error
  • info
<x-moonshine::progress-bar
    color="primary"
    :value="33"
>
    33%
</x-moonshine::progress-bar>
<x-moonshine::progress-bar
    color="primary"
    :value="33"
>
    33%
</x-moonshine::progress-bar>

Радиальный

Чтобы создать радиальный индикатор прогресса, нужно передать компоненту параметр radial со значением TRUE.

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

  • sm
  • md
  • lg
  • xl
<x-moonshine::progress-bar
    color="secondary"
    :radial="true"
    :value="33"
    size="md"
>
    33%
</x-moonshine::progress-bar>
<x-moonshine::progress-bar
    color="secondary"
    :radial="true"
    :value="33"
    size="md"
>
    33%
</x-moonshine::progress-bar>