aico-image-editor/src/components/canvasControls/colorTab/colorTab.html

Combine multiple image into and create single combined image

<div class="block mb-0 position-relative" x-data="colorTab">
    <ul class="nav nav-tabs nav-tabs-alt" role="tablist">
        <li class="nav-item flex-fill">
            <button type="button" class="nav-link text-primary w-100 border-end" id="color-tab" data-bs-toggle="tab" data-bs-target="#color" role="tab" aria-controls="color" aria-selected="true" @click="activeSubTab = 'color'" :class="activeSubTab === 'color' ? 'active' : ''">
                <span class="" x-text="getTranslatedHTML('colors')"></span>
            </button>
        </li>
        <li class="nav-item flex-fill">
            <button type="button" class="nav-link text-primary w-100" id="gradient-tab" data-bs-toggle="tab" data-bs-target="#gradient" role="tab" aria-controls="gradient" aria-selected="true" @click="activeSubTab = 'gradient'" :class="activeSubTab === 'gradient' ? 'active' : ''">
                <span class="" x-text="getTranslatedHTML('gradients')"></span>
            </button>
        </li>
    </ul>
    <div class="block-content block-content-full tab-content">
        <div class="tab-pane" role="tabpanel" id="color" aria-labelledby="color-tab" :class="activeSubTab === 'color' ? 'active' : ''">
            <color-sub-tab datatemplateurl="./colorSubTab.html"  styles="global" shadow="true"></color-sub-tab>
        </div>
        <div class="tab-pane" role="tabpanel" id="gradient" aria-labelledby="gradient-tab" :class="activeSubTab === 'gradient' ? 'active' : ''">
            <gradient-sub-tab datatemplateurl="./gradientSubTab.html"  styles="global" shadow="true"></gradient-sub-tab>
        </div>
    </div>
</div>