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 grid-cols-2 gap-6">
 3        <div>
 4            <h2class="text-xl font-medium">Account settings</h2>
 5 
 6            <pclass="mt-2 text-gray-500 text-sm">
 7                Lorem ipsum dolor sit amet consectetur adipisicing elit.
 8            </p>
 9        </div>
10 
11        <formclass="space-y-6">
12            <divclass="grid grid-cols-2 gap-4">
13                <divclass="space-y-2">
14                    <labelfor="first_name">First name</label>
15 
16                    <input
17class="rounded-lg shadow-sm border px-3 py-2"
18type="text"
19id="first_name"
20                    />
21 
22                    @error('first_name')
23                        <p>{{ $message }}</p>
24                    @enderror
25                </div>
26 
27                <divclass="space-y-2">
28                    <labelfor="last_name">Last name</label>
29 
30                    <input
31class="rounded-lg shadow-sm border px-3 py-2"
32type="text"
33id="last_name"
34                    />
35 
36                    @error('last_name')
37                        <p>{{ $message }}</p>
38                    @enderror
39                </div>
40            </div>
41 
42<!-- More repeated inputs here... -->
43 
44            <footerclass="flex">
45                <buttonclass="bg-primary-600 text-white shadow font-semibold text-sm px-5 py-2">Save details<button>
46            </footer>
47        </form>
48    </div>
49</section>

Pour ça:

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

É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