لوحة التوقيع · الحدث
Drawing color via drawing_fill, trigger color and density via modifier classes on the signature pad root.
Drawing color
<.signature_pad class="signature-pad" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad" drawing_fill="var(--color-accent)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad" drawing_fill="var(--color-brand)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad" drawing_fill="var(--color-alert)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad" drawing_fill="var(--color-success)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad" drawing_fill="var(--color-info)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
المشغّل فقط
<.signature_pad class="signature-pad" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad signature-pad--accent" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad signature-pad--brand" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad signature-pad--alert" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad signature-pad--success" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad signature-pad--info" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
الحجم
<.signature_pad class="signature-pad signature-pad--sm" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad signature-pad--md" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad signature-pad--lg" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad signature-pad--xl" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
أقصى عرض
<.signature_pad class="signature-pad max-w-2xs" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad max-w-md" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad max-w-xl" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad max-w-2xl" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
Rounded
<.signature_pad class="signature-pad signature-pad--rounded-none" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad signature-pad--rounded-sm" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad signature-pad--rounded-md" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad signature-pad--rounded-lg" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad signature-pad--rounded-xl" drawing_fill="var(--color-ink)">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>