Hi
Well in all cases you dont have to write HTML code.
Let's say we needed to create this with TailWind
This would be the HTML code to do it..
Now, lets do the same thing with DaisyUI
With SithasoDaisy, you develop your UI using predefined components using the Abstract Designer. Open the abstract designer, drop a SDUICard, a SDUInput, SDUIToggles and SDUIButton, update some properties and you are good to go!
Example in SithasoDaisy coming soon.
Well in all cases you dont have to write HTML code.
Let's say we needed to create this with TailWind
This would be the HTML code to do it..
B4X:
<div class="w-80 rounded-2xl bg-gray-100">
<div class="flex flex-col gap-2 p-8">
<input placeholder="Email" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2 focus:ring-offset-gray-100" />
<label class="flex cursor-pointer items-center justify-between p-1">
Accept terms of use
<div class="relative inline-block">
<input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />
<span class="pointer-events-none absolute left-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:left-7 peer-checked:bg-gray-900"></span>
</div>
</label>
<label class="flex cursor-pointer items-center justify-between p-1">
Submit to newsletter
<div class="relative inline-block">
<input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />
<span class="pointer-events-none absolute left-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:left-7 peer-checked:bg-gray-900"></span>
</div>
</label>
<button class="inline-block cursor-pointer rounded-md bg-gray-700 px-4 py-3.5 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 focus-visible:ring-offset-2 active:scale-95">Save</button>
</div>
</div>Now, lets do the same thing with DaisyUI
B4X:
<div class="card bg-base-200 w-80">
<div class="card-body">
<input placeholder="Email" class="input input-bordered" />
<label class="label cursor-pointer">
Accept terms of use
<input type="checkbox" class="toggle" />
</label>
<label class="label cursor-pointer">
Submit to newsletter
<input type="checkbox" class="toggle" />
</label>
<button class="btn btn-neutral">Save</button>
</div>
</div>With SithasoDaisy, you develop your UI using predefined components using the Abstract Designer. Open the abstract designer, drop a SDUICard, a SDUInput, SDUIToggles and SDUIButton, update some properties and you are good to go!
Example in SithasoDaisy coming soon.