Skip to content

Commit 8001d0f

Browse files
FredxdFredxd
committed
loading component
1 parent 1aec5e4 commit 8001d0f

File tree

8 files changed

+126
-4
lines changed

8 files changed

+126
-4
lines changed

‎templates/examples/actions/button/icon-buttons.html.twig‎

Lines changed: 88 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,88 @@
1-
<twig:button>
2-
<twig:ux:icon name="iconoir:search" class="size-[1.2em]"/>
3-
Search
4-
</twig:button>
1+
<?php
2+
3+
namespace App\UI\Toolbox\Feedback;
4+
5+
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
6+
use Symfony\UX\TwigComponent\Attribute\UIComponentDoc;
7+
use Symfony\UX\TwigComponent\Attribute\UIComponentExample;
8+
use Symfony\UX\TwigComponent\Attribute\UIComponentProp;
9+
10+
#[AsTwigComponent('loading', template: '@UIToolbox/ui/feedback/loading.html.twig')]
11+
#[UIComponentDoc('UI/Toolbox/Feedback/Loading.md')]
12+
#[UIComponentProp(
13+
name: 'style',
14+
type: 'string',
15+
description: 'Loading style',
16+
allowedValues: ['spinner', 'dots', 'ring', 'ball', 'bars', 'infinity'],
17+
)]
18+
#[UIComponentProp(
19+
name: 'size',
20+
type: 'string',
21+
description: 'Size of the loading animation',
22+
allowedValues: ['xs', 'sm', 'md', 'lg', 'xl'],
23+
)]
24+
#[UIComponentProp(
25+
name: 'class',
26+
type: 'string',
27+
description: 'Additional CSS classes',
28+
)]
29+
#[UIComponentExample(
30+
title: 'Loading spinner',
31+
description: 'Spinner loading animation',
32+
templateName: '@UIToolboxDoc/examples/feedback/loading/loading-spinner.html.twig',
33+
)]
34+
#[UIComponentExample(
35+
title: 'Loading dots',
36+
description: 'Dots loading animation',
37+
templateName: '@UIToolboxDoc/examples/feedback/loading/loading-dots.html.twig',
38+
)]
39+
#[UIComponentExample(
40+
title: 'Loading ring',
41+
description: 'Ring loading animation',
42+
templateName: '@UIToolboxDoc/examples/feedback/loading/loading-ring.html.twig',
43+
)]
44+
#[UIComponentExample(
45+
title: 'Loading ball',
46+
description: 'Ball loading animation',
47+
templateName: '@UIToolboxDoc/examples/feedback/loading/loading-ball.html.twig',
48+
)]
49+
#[UIComponentExample(
50+
title: 'Loading bars',
51+
description: 'Bars loading animation',
52+
templateName: '@UIToolboxDoc/examples/feedback/loading/loading-bars.html.twig',
53+
)]
54+
#[UIComponentExample(
55+
title: 'Loading infinity',
56+
description: 'Infinity loading animation',
57+
templateName: '@UIToolboxDoc/examples/feedback/loading/loading-infinity.html.twig',
58+
)]
59+
#[UIComponentExample(
60+
title: 'Loading with colors',
61+
description: 'Loading animation with color classes',
62+
templateName: '@UIToolboxDoc/examples/feedback/loading/loading-colors.html.twig',
63+
)]
64+
class Loading
65+
{
66+
public ?string $style = null;
67+
public ?string $size = null;
68+
public ?string $class = null;
69+
70+
public function getClasses(): string
71+
{
72+
$classes = ['loading'];
73+
74+
if ($this->style) {
75+
$classes[] = 'loading-' . $this->style;
76+
}
77+
78+
if ($this->size) {
79+
$classes[] = 'loading-' . $this->size;
80+
}
81+
82+
if ($this->class) {
83+
$classes[] = $this->class;
84+
}
85+
86+
return implode(' ', $classes);
87+
}
88+
}

‎templates/examples/feedback/loading/loading-ball.html.twig‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<twig:loading style="ball" size="xs" />
2+
<twig:loading style="ball" size="sm" />
3+
<twig:loading style="ball" />
4+
<twig:loading style="ball" size="lg" />
5+
<twig:loading style="ball" size="xl" />

‎templates/examples/feedback/loading/loading-bars.html.twig‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<twig:loading style="bars" size="xs" />
2+
<twig:loading style="bars" size="sm" />
3+
<twig:loading style="bars" />
4+
<twig:loading style="bars" size="lg" />
5+
<twig:loading style="bars" size="xl" />

‎templates/examples/feedback/loading/loading-colors.html.twig‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<twig:loading color="primary" />
2+
<twig:loading color="secondary" />
3+
<twig:loading color="accent" />
4+
<twig:loading color="neutral" />
5+
<twig:loading color="info" />
6+
<twig:loading color="success" />
7+
<twig:loading color="warning" />
8+
<twig:loading color="error" />

‎templates/examples/feedback/loading/loading-dots.html.twig‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<twig:loading style="dots" size="xs" />
2+
<twig:loading style="dots" size="sm" />
3+
<twig:loading style="dots" />
4+
<twig:loading style="dots" size="lg" />
5+
<twig:loading style="dots" size="xl" />

‎templates/examples/feedback/loading/loading-infinity.html.twig‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<twig:loading style="infinity" size="xs" />
2+
<twig:loading style="infinity" size="sm" />
3+
<twig:loading style="infinity" />
4+
<twig:loading style="infinity" size="lg" />
5+
<twig:loading style="infinity" size="xl" />

‎templates/examples/feedback/loading/loading-ring.html.twig‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<twig:loading style="ring" size="xs" />
2+
<twig:loading style="ring" size="sm" />
3+
<twig:loading style="ring" />
4+
<twig:loading style="ring" size="lg" />
5+
<twig:loading style="ring" size="xl" />

‎templates/examples/feedback/loading/loading-spinner.html.twig‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<twig:loading size="xs" />
2+
<twig:loading size="sm" />
3+
<twig:loading />
4+
<twig:loading size="lg" />
5+
<twig:loading size="xl" />

0 commit comments

Comments
 (0)