Add some examples
This commit is contained in:
samy
Generated
+1
@@ -22,6 +22,7 @@
|
||||
<data directive="@csrf" />
|
||||
<data directive="@dd" injection="true" prefix="<?php dd(" suffix="); ?>" />
|
||||
<data directive="@default" />
|
||||
<data directive="@detectLivewire" />
|
||||
<data directive="@disabled" injection="true" prefix="<?php if(" suffix=") {echo 'disabled';}?>" />
|
||||
<data directive="@dump" injection="true" prefix="<?php dump(" suffix="); ?>" />
|
||||
<data directive="@each" injection="true" prefix="<?php echo $__env->renderEach(" suffix="); ?>" />
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
{{-- A blade form example --}}
|
||||
<x-sk::form.main-wrapper>
|
||||
<x-sk::form.main-title title="Un exemple de formulaire !" class="text-center"/>
|
||||
|
||||
<x-sk::form.form
|
||||
method="POST"
|
||||
action="{{ route('form.blade.submit') }}"
|
||||
>
|
||||
<x-sk::form.section-wrapper
|
||||
title="Personal Information"
|
||||
description="Please fill out a few details, nothing much."
|
||||
>
|
||||
|
||||
<x-sk::form.input
|
||||
name="name"
|
||||
label="Name"
|
||||
type="text"
|
||||
grid-layout="col-span-12 md:col-span-6"
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
|
||||
<x-sk::form.input
|
||||
name="email"
|
||||
label="E-mail"
|
||||
type="email"
|
||||
grid-layout="col-span-12 md:col-span-6"
|
||||
placeholder="you@example.com"
|
||||
help="We'll never share your email."
|
||||
/>
|
||||
|
||||
<x-sk::form.input
|
||||
name="birthdate"
|
||||
label="Birthdate"
|
||||
type="date"
|
||||
grid-layout="col-span-12 md:col-span-4"
|
||||
placeholder="2025-01-01"
|
||||
/>
|
||||
|
||||
<x-sk::form.input
|
||||
name="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
grid-layout="col-span-12 md:col-span-4"
|
||||
/>
|
||||
|
||||
<x-sk::form.input
|
||||
name="age"
|
||||
label="Age"
|
||||
type="number"
|
||||
grid-layout="col-span-12 md:col-span-4"
|
||||
/>
|
||||
|
||||
</x-sk::form.section-wrapper>
|
||||
|
||||
<x-sk::form.section-wrapper
|
||||
title="Professional Details"
|
||||
description="This helps us understand your background and experience."
|
||||
>
|
||||
<x-sk::form.select
|
||||
name="country"
|
||||
label="Country"
|
||||
grid-layout="col-span-12 md:col-span-8"
|
||||
:options="[
|
||||
'pf' => 'French Polynesia',
|
||||
'fr' => 'France',
|
||||
'us' => 'United States',
|
||||
]"
|
||||
help="Select your country of residence"
|
||||
/>
|
||||
|
||||
<x-sk::form.input
|
||||
name="cv"
|
||||
label="CV"
|
||||
type="file"
|
||||
grid-layout="col-span-12 md:col-span-4"
|
||||
multiple
|
||||
/>
|
||||
|
||||
<x-sk::form.textarea
|
||||
name="bio"
|
||||
label="Short Bio"
|
||||
placeholder="Tell us a little bit about yourself"
|
||||
grid-layout="col-span-12"
|
||||
></x-sk::form.textarea>
|
||||
</x-sk::form.section-wrapper>
|
||||
|
||||
<x-sk::form.section-wrapper
|
||||
title="Preferences"
|
||||
description="Your tech stack and personal choices."
|
||||
>
|
||||
<x-sk::form.checkbox-wrapper
|
||||
title="Technologies you use"
|
||||
required
|
||||
>
|
||||
<x-sk::form.checkbox
|
||||
name="laravel"
|
||||
label="Laravel"
|
||||
toggle-look
|
||||
grid-layout="col-span-4"
|
||||
/>
|
||||
<x-sk::form.checkbox
|
||||
name="daisy"
|
||||
label="Daisy UI"
|
||||
toggle-look
|
||||
grid-layout="col-span-4"
|
||||
/>
|
||||
</x-sk::form.checkbox-wrapper>
|
||||
|
||||
<x-sk::form.radio
|
||||
name="prefered_os"
|
||||
title="Prefered OS"
|
||||
help="You must choose. Everbody does."
|
||||
required
|
||||
:options="[
|
||||
'linux' => 'Linux',
|
||||
'also_linux' => 'Linux',
|
||||
]"
|
||||
/>
|
||||
</x-sk::form.section-wrapper>
|
||||
|
||||
<x-sk::form.submit-button
|
||||
:cancel="route('home')"
|
||||
cancelLabel="Go back home"
|
||||
/>
|
||||
</x-sk::form.form>
|
||||
</x-sk::form.main-wrapper>
|
||||
@@ -0,0 +1,26 @@
|
||||
{{--A normal URL modal--}}
|
||||
<a
|
||||
x-data
|
||||
x-confirm-modal
|
||||
data-url="/some-url"
|
||||
data-title="Do that?"
|
||||
data-message="Doing that needs some confirmation."
|
||||
data-confirm-label="Yes, do that"
|
||||
data-cancel-label="No thanks"
|
||||
class="btn btn-primary">
|
||||
Button text
|
||||
</a>
|
||||
|
||||
{{--A modal building a form and reaching the action with a method--}}
|
||||
<a
|
||||
x-data
|
||||
x-confirm-modal
|
||||
data-action="/some-action"
|
||||
data-method="METHOD"
|
||||
data-title="Do that?"
|
||||
data-message="Doing that needs some confirmation."
|
||||
data-confirm-label="Yes, do that"
|
||||
data-cancel-label="No thanks"
|
||||
class="btn btn-error">
|
||||
Button text
|
||||
</a>
|
||||
@@ -0,0 +1,140 @@
|
||||
{{-- A livewire form example --}}
|
||||
<div class="max-w-5xl mx-auto p-6">
|
||||
|
||||
<x-sk::form.main-wrapper>
|
||||
|
||||
<x-sk::form.main-title title="Un exemple de formulaire !"/>
|
||||
|
||||
<x-sk::form.form wire:submit="submit()">
|
||||
<x-sk::form.section-wrapper
|
||||
title="Personal Information"
|
||||
description="Please fill out a few details, nothing much."
|
||||
>
|
||||
|
||||
<x-sk::form.input
|
||||
name="name"
|
||||
label="Name"
|
||||
type="text"
|
||||
grid-layout="col-span-12 md:col-span-6"
|
||||
placeholder="John Doe"
|
||||
wire:model="name"
|
||||
/>
|
||||
|
||||
<x-sk::form.input
|
||||
name="email"
|
||||
label="E-mail"
|
||||
type="email"
|
||||
grid-layout="col-span-12 md:col-span-6"
|
||||
placeholder="you@example.com"
|
||||
help="We'll never share your email."
|
||||
wire:model="email"
|
||||
/>
|
||||
|
||||
<x-sk::form.input
|
||||
name="birthdate"
|
||||
label="Birthdate"
|
||||
type="date"
|
||||
grid-layout="col-span-12 md:col-span-4"
|
||||
placeholder="2025-01-01"
|
||||
wire:model="birthdate"
|
||||
/>
|
||||
|
||||
<x-sk::form.input
|
||||
name="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
grid-layout="col-span-12 md:col-span-4"
|
||||
wire:model="password"
|
||||
/>
|
||||
|
||||
<x-sk::form.input
|
||||
name="age"
|
||||
label="Age"
|
||||
type="number"
|
||||
grid-layout="col-span-12 md:col-span-4"
|
||||
wire:model="age"
|
||||
/>
|
||||
|
||||
</x-sk::form.section-wrapper>
|
||||
|
||||
<x-sk::form.section-wrapper
|
||||
title="Professional Details"
|
||||
description="This helps us understand your background and experience."
|
||||
>
|
||||
<x-sk::form.select
|
||||
name="country"
|
||||
label="Country"
|
||||
grid-layout="col-span-12 md:col-span-8"
|
||||
:options="[
|
||||
'pf' => 'French Polynesia',
|
||||
'fr' => 'France',
|
||||
'us' => 'United States',
|
||||
]"
|
||||
help="Select your country of residence"
|
||||
wire:model="country"
|
||||
/>
|
||||
|
||||
<x-sk::form.input
|
||||
name="cv"
|
||||
label="CV"
|
||||
type="file"
|
||||
grid-layout="col-span-12 md:col-span-4"
|
||||
multiple
|
||||
readonly
|
||||
wire:model="cv"
|
||||
/>
|
||||
|
||||
<x-sk::form.textarea
|
||||
name="bio"
|
||||
label="Short Bio"
|
||||
placeholder="Tell us a little bit about yourself"
|
||||
grid-layout="col-span-12"
|
||||
wire:model="bio"
|
||||
></x-sk::form.textarea>
|
||||
</x-sk::form.section-wrapper>
|
||||
|
||||
<x-sk::form.section-wrapper
|
||||
title="Preferences"
|
||||
description="Your tech stack and personal choices."
|
||||
>
|
||||
<x-sk::form.checkbox-wrapper
|
||||
title="Technologies you use"
|
||||
required
|
||||
>
|
||||
<x-sk::form.checkbox
|
||||
name="laravel"
|
||||
label="Laravel"
|
||||
toggle-look
|
||||
grid-layout="col-span-4"
|
||||
wire:model="laravel"
|
||||
/>
|
||||
<x-sk::form.checkbox
|
||||
name="daisy"
|
||||
label="Daisy UI"
|
||||
toggle-look
|
||||
grid-layout="col-span-4"
|
||||
wire:model="daisy"
|
||||
/>
|
||||
</x-sk::form.checkbox-wrapper>
|
||||
|
||||
<x-sk::form.radio
|
||||
name="prefered_os"
|
||||
title="Prefered OS"
|
||||
help="You must choose. Everbody does."
|
||||
required
|
||||
:options="[
|
||||
'linux' => 'Linux',
|
||||
'also_linux' => 'Linux',
|
||||
]"
|
||||
wire:model="prefered_os"
|
||||
/>
|
||||
|
||||
</x-sk::form.section-wrapper>
|
||||
|
||||
<x-sk::form.submit-button
|
||||
:cancel="route('home')"
|
||||
cancelLabel="Go back home"
|
||||
/>
|
||||
</x-sk::form.form>
|
||||
</x-sk::form.main-wrapper>
|
||||
</div>
|
||||
Reference in New Issue
Block a user