Razor UI – Une bibliothèque complète de composants de lame

Concevoir une bibliothèque de composants cohérente est difficile, coûteux et prend beaucoup de temps.

Notre solution ? Interface utilisateur du rasoir: un kit d’interface utilisateur d’aspect moderne pour Laravel Blade.

Économisez du temps et de l’argent avec des composants et des modèles interactifs que vous pouvez intégrer directement dans votre projet.

Kit d’interface utilisateur pour Tailwind CSS

Les composants se déclinent en deux variantes.

• HTML — modèles HTML copier-coller prévisualisables qui utilisent Tailwind CSS et Alpine.js
• Interface utilisateur de la lame — un package Laravel qui résume toute la logique de style dans des composants Blade personnalisables. Utilisez simplement les composants sémantiques dans votre mise en page et disposez d’une application entièrement conçue

Conçu pour la pile TALL

Même si l’interface utilisateur de Razor peut être utilisée par toute personne utilisant Tailwind CSS, les développeurs Livewire bénéficieront le plus de notre kit d’interface utilisateur.

Imaginez que vous disposiez d’un système de conception complet avec des composants prêts à l’emploi alimentés par Blade, Tailwind CSS et Alpine.js.

Tu partirais de ça :

 1<sectionclass="py-24">
 2    <divclass="grid md:grid-cols-[2fr,3fr] gap-6 md:gap-12 mt-6">
 3        <aside>
 4            <h2class="text-xl font-semibold tracking-tight">Personal</h2>
 5 
 6            <pclass="mt-1 text-gray-500">
 7                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam ducimus enim.
 8            </p>
 9        </aside>
10 
11        <form
12class="block p-2 space-y-2 bg-white shadow rounded-xl"
13action=""
14        >
15            <divclass="grid grid-cols-2 gap-6 px-4 py-4">
16                <divclass="col-span-2 space-y-2 md:col-span-1">
17                    <label
18class="inline-block text-sm font-medium text-gray-700"
19for="first_name"
20                    >First name</label>
21 
22                    <input
23class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
24id="first_name"
25type="text"
26                    >
27                </div>
28 
29                <divclass="col-span-2 space-y-2 md:col-span-1">
30                    <label
31class="inline-block text-sm font-medium text-gray-700"
32for="last_name"
33                    >Last name</label>
34 
35                    <input
36class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
37id="last_name"
38type="text"
39                    >
40                </div>
41 
42                <divclass="col-span-2 space-y-2">
43                    <label
44class="inline-block text-sm font-medium text-gray-700"
45for="email"
46                    >Email address</label>
47 
48                    <input
49class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
50id="email"
51type="email"
52                    >
53                </div>
54 
55                <divclass="col-span-2 space-y-2">
56                    <label
57class="inline-block text-sm font-medium text-gray-700"
58for="about_me"
59                    >About me</label>
60 
61                    <textarea
62class="block w-full transition duration-75 border-gray-300 rounded-lg shadow-sm focus:border-blue-600 focus:ring-1 focus:ring-inset focus:ring-blue-600"
63id="about_me"
64                    ></textarea>
65                </div>
66            </div>
67 
68            <divclass="border-t"></div>
69 
70            <footerclass="flex items-center justify-end px-4 py-2 space-x-4">
71                <button
72class="inline-flex items-center justify-center h-8 px-3 text-sm font-semibold tracking-tight text-white transition bg-blue-600 rounded-lg shadow hover:bg-blue-500 focus:bg-blue-700 focus:outline-none focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-2 focus:ring-white focus:ring-inset"
73type="submit"
74                >Save details</button>
75            </footer>
76        </form>
77    </div>
78</section>

Pour ça:

 1<x-app-ui::formcard>
 2    <x-slotname="heading">
 3        Personal
 4    </x-slot>
 5 
 6    <x-slotname="description">
 7        Lorem ipsum dolor sit amet consectetur adipisicing elit.
 8    </x-slot>
 9 
10    <x-app-ui::input-group>
11        <x-app-ui::input
12label="First name"
13name="first_name"
14        />
15 
16        <x-app-ui::input
17label="Last name"
18name="last_name"
19        />
20    </x-app-ui::input-group>
21 
22    <x-app-ui::input
23label="Email address"
24type="email"
25name="email"
26    />
27 
28    <x-app-ui::textarea
29label="About me"
30name="about"
31    />
32 
33    <x-slotname="actions">
34        <x-app-ui::button
35type="submit"
36size="sm"
37        >
38            Save details
39        </x-app-ui::button>
40    </x-slot>
41</x-app-ui::form>

Énorme amélioration, non ?

Avec les composants Blade réutilisables de Razor UI, vous n’avez pas à penser à nommer vos propres composants, l’API et le style.

Choisissez simplement des composants dans notre bibliothèque documentée et commencez à construire !

Payez une fois, possédez-le pour toujours

Nous pensons que les meilleurs composants d’interface utilisateur devraient être accessibles à tous. C’est pourquoi nous avons décidé d’aller avec licences à vie plutôt que des plans mensuels ou annuels. En plus de cela, nous proposons également une tarification paritaire, ce qui signifie que les forfaits seront tarifés en fonction du pouvoir d’achat de votre pays.

Ainsi, lorsque vous achetez un package, vous le possédez pour toujours et continuez à recevoir des mises à jour gratuitement !

Le package Blade UI coûte 59 $ et vous pouvez utiliser le code LARAVELNEWS lors du paiement pour économiser 15% sur votre commande.

— to laravel-news.com