Widgets

Fuwafuwa Framework introduces Widgets as a powerful tool to streamline development and enhance UI consistency. These widgets encapsulate common UI elements, such as forms, inputs, and interactive components.

Widget Categories

Form Widgets

UI Components

Examples

Tabs

<div x-data="{ page: 0 }">
    <ul class="tab-container">
        <li class="tab" :class="{ 'tab-active': page == 0 }" 
            @click="page = 0">Tab 1</li>
        <li class="tab" :class="{ 'tab-active': page == 1 }" 
            @click="page = 1">Tab 2</li>
        <li class="tab tab-disabled">Tab 3</li>
    </ul>
    <div x-show="page == 0">Content 1</div>
    <div x-show="page == 1">Content 2</div>
</div>

Buttons

<!-- Color variants -->
<button class="button button-gray">Button</button>
<button class="button button-green">Button</button>
<button class="button button-red">Button</button>

<!-- Size variants -->
<button class="button button-tiny">Tiny</button>
<button class="button button-small">Small</button>
<button class="button button-large">Large</button>
<button class="button button-huge">Huge</button>

Progress Indicators

<div x-data="{ progress: 60 }">
    <!-- Basic radial progress -->
    <div class="radial-progress" 
         :style="{ '--value': progress }" 
         x-text="progress + '%'"></div>

    <!-- Themed progress -->
    <div class="radial-progress text-primary" 
         :style="{ '--value': progress }"></div>

    <!-- Custom styled progress -->
    <div class="border-4 radial-progress bg-theme-background2 text-theme-text2 border-theme-background1"></div>
</div>

Form Inputs

<!-- Basic input with label -->
<ff:input title="Username" 
          name="username" 
          explanation="Enter your username" />

<!-- Radio group with grid layout -->
<ff:radio title="Options" 
          options="Opt1,1|Opt2,2|Opt3,3" 
          x-model="radio"
          cols="3" />

<!-- Inline radio group -->
<ff:radio title="Options" 
          options="Opt1|Opt2|Opt3" 
          x-model="radio2"
          inline="true" />

Modal Dialog

<!-- Modal trigger -->
<button class="button" @click="modal_modal1.open()">
    Open Modal
</button>

<!-- Modal definition -->
<ff:modal id="modal1" title="Modal Title" size="large">
    <div class="min-h-[70vh] px-6 py-4" x-data="modal1">
        Modal content here
    </div>
</ff:modal>

Common Attributes

Best Practices

• Use semantic form widgets for better accessibility
• Provide clear labels and explanations
• Implement consistent validation feedback
• Use appropriate button variants for different actions
• Consider mobile responsiveness when using modals and tabs