관리-도구

편집 파일: tab-menu.blade.php

<div class="card mb-3">
    <div class="card-body">
        <h2 class="text-primary text-uppercase mb-3">Tab Menu</h2>
        <div class="row g-4">
            <div class="col-lg-6">
                {{-- snippet container --}}
                <div class="component-snippets-container">
                    <div class="component-snippets-preview">
                        <div id="liveAlertPlaceholder">
                            <div></div>
                        </div>
                        <div>
                            {{-- Tab Menu --}}
                            <ul class="nav nav-pills nav--tab" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link active" id="pills-business-tab" data-bs-toggle="pill" href="#pills-business" role="tab"
                                        aria-controls="pills-business" aria-selected="true">
                                        Business Information
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="pills-other-tab" data-bs-toggle="pill" href="#pills-other" role="tab"
                                        aria-controls="pills-other" aria-selected="false">
                                        Other Information
                                    </a>
                                </li>
                            </ul>

<div class="tab-content" id="pills-tabContent">
     <div class="tab-pane fade show active" id="pills-business" role="tabpanel" aria-labelledby="pills-business-tab">
         {{-- demo content --}}
         <div class="mt-4">
             <h4>Business Information</h4>
             <p>Details about the business go here.</p>
         </div>
     </div>
     <div class="tab-pane fade" id="pills-other" role="tabpanel" aria-labelledby="pills-other-tab">
         {{-- demo content --}}
         <div class="mt-4">
             <h4>Other Information</h4>
             <p>Additional details go here.</p>
         </div>
     </div>
 </div></code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- snippet container ends --}}
            </div>
            <div class="col-lg-6">
                {{-- snippet container --}}
                <div class="component-snippets-container">
                    <div class="component-snippets-preview">
                        <div id="liveAlertPlaceholder">
                            <div></div>
                        </div>
                        <div>
                            <ul class="nav nav-pills nav--tab" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link active" id="pills-business-tab" data-bs-toggle="pill"
                                        href="#pills-business" role="tab" aria-controls="pills-business"
                                        aria-selected="true">
                                        <i class="fi fi-rr-home"></i> Business Information
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="pills-other-tab" data-bs-toggle="pill" href="#pills-other"
                                        role="tab" aria-controls="pills-other" aria-selected="false">
                                        <i class="fi fi-rr-home"></i> Other Information
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-business" role="tabpanel"
                                    aria-labelledby="pills-business-tab">
                                    {{-- demo content --}}
                                    <div class="mt-4">
                                        <h4>Business Information</h4>
                                        <p>Details about the business go here.</p>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-other" role="tabpanel"
                                    aria-labelledby="pills-other-tab">
                                    {{-- demo content --}}
                                    <div class="mt-4">
                                        <h4>Other Information</h4>
                                        <p>Additional details go here.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="position-relative snippets-code-hover">
                        <div class="component-snippets-code-header">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#html-tab-pane"
                                        type="button" role="tab" aria-controls="html-tab-pane" aria-selected="true">Html</button>
                            </ul>
                            <button class="btn btn-icon copy-button">
                                <i class="fi fi-rr-copy"></i>
                            </button>
                        </div>
                        <div class="tab-content content position-absolute start-0 top-100 shadow-lg bg-white p-1 z-3 mw-100"
                            id="myTabContent">
                            <div class="tab-pane fade show active" id="html-tab-pane" role="tabpanel" aria-labelledby="home-tab"
                                tabindex="0">
                                <div class="component-snippets-code-container">
<pre><code><ul class="nav nav-pills nav--tab" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
        <a class="nav-link active" id="pills-business-tab" data-bs-toggle="pill" href="#pills-business" role="tab"
            aria-controls="pills-business" aria-selected="true">
            <i class="fi fi-rr-home"></i> Business Information
        </a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link" id="pills-other-tab" data-bs-toggle="pill" href="#pills-other" role="tab"
            aria-controls="pills-other" aria-selected="false">
            <i class="fi fi-rr-home"></i> Other Information
        </a>
    </li>
</ul>
<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-business" role="tabpanel" aria-labelledby="pills-business-tab">
        {{-- demo content --}}
        <div class="mt-4">
            <h4>Business Information</h4>
            <p>Details about the business go here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-other" role="tabpanel" aria-labelledby="pills-other-tab">
        {{-- demo content --}}
        <div class="mt-4">
            <h4>Other Information</h4>
            <p>Additional details go here.</p>
        </div>
    </div>
</div></code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- snippet container ends --}}
            </div>
            <div class="col-lg-6">
                {{-- snippet container --}}
                <div class="component-snippets-container">
                    <div class="component-snippets-preview">
                        <div id="liveAlertPlaceholder">
                            <div></div>
                        </div>
                        <div>
                            <ul class="nav nav-pills nav--tab" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link active" id="pills-business-tab" data-bs-toggle="pill" href="#pills-business" role="tab"
                                        aria-controls="pills-business" aria-selected="true">
                                        Business Information (1)
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="pills-other-tab" data-bs-toggle="pill" href="#pills-other" role="tab"
                                        aria-controls="pills-other" aria-selected="false">
                                        Other Information (1)
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-business" role="tabpanel" aria-labelledby="pills-business-tab">
                                    {{-- demo content --}}
                                    <div class="mt-4">
                                        <h4>Business Information</h4>
                                        <p>Details about the business go here.</p>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-other" role="tabpanel" aria-labelledby="pills-other-tab">
                                    {{-- demo content --}}
                                    <div class="mt-4">
                                        <h4>Other Information</h4>
                                        <p>Additional details go here.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="position-relative snippets-code-hover">
                        <div class="component-snippets-code-header">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#html-tab-pane"
                                        type="button" role="tab" aria-controls="html-tab-pane" aria-selected="true">Html</button>
                            </ul>
                            <button class="btn btn-icon copy-button">
                                <i class="fi fi-rr-copy"></i>
                            </button>
                        </div>
                        <div class="tab-content content position-absolute start-0 top-100 shadow-lg bg-white p-1 z-3 mw-100"
                            id="myTabContent">
                            <div class="tab-pane fade show active" id="html-tab-pane" role="tabpanel" aria-labelledby="home-tab"
                                tabindex="0">
                                <div class="component-snippets-code-container">
<pre><code><ul class="nav nav-pills nav--tab" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
        <a class="nav-link active" id="pills-business-tab" data-bs-toggle="pill" href="#pills-business" role="tab"
            aria-controls="pills-business" aria-selected="true">
            Business Information (1)
        </a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link" id="pills-other-tab" data-bs-toggle="pill" href="#pills-other" role="tab"
            aria-controls="pills-other" aria-selected="false">
            Other Information (1)
        </a>
    </li>
</ul>
<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-business" role="tabpanel" aria-labelledby="pills-business-tab">
        {{-- demo content --}}
        <div class="mt-4">
            <h4>Business Information</h4>
            <p>Details about the business go here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-other" role="tabpanel" aria-labelledby="pills-other-tab">
        {{-- demo content --}}
        <div class="mt-4">
            <h4>Other Information</h4>
            <p>Additional details go here.</p>
        </div>
    </div>
</div></code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- snippet container ends --}}
            </div>
            <div class="col-lg-6">
                {{-- snippet container --}}
                <div class="component-snippets-container">
                    <div class="component-snippets-preview">
                        <div id="liveAlertPlaceholder">
                            <div></div>
                        </div>
                        <div>
                            <ul class="nav nav-pills nav--tab" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link active" id="pills-business-tab" data-bs-toggle="pill" href="#pills-business" role="tab"
                                        aria-controls="pills-business" aria-selected="true">
                                        <i class="fi fi-rr-home"></i> Business Information (1)
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="pills-other-tab" data-bs-toggle="pill" href="#pills-other" role="tab"
                                        aria-controls="pills-other" aria-selected="false">
                                        <i class="fi fi-rr-home"></i> Other Information (1)
                                    </a>
                                </li>
                            </ul>

<div class="border border-dashed border-primary rounded p-3 mt-4">
            <h2 class="text-primary text-uppercase mb-3">With Slider buttons</h2>
            <div class="row g-4">
                <div class="col-lg-6">
                    {{-- snippet container --}}
                    <div class="component-snippets-container">
                        <div class="component-snippets-preview">
                            <div id="liveAlertPlaceholder">
                                <div></div>
                            </div>
                            <div>
                                <div class="position-relative nav--tab-wrapper">
                                    <ul class="nav nav-pills nav--tab" id="pills-tab" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link active" id="pills-general-tab" data-bs-toggle="pill"
                                                href="#pills-general" role="tab" aria-controls="pills-general"
                                                aria-selected="true">
                                                General
                                            </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-product-tab" data-bs-toggle="pill"
                                                href="#pills-product" role="tab" aria-controls="pills-product"
                                                aria-selected="false">
                                                Products
                                            </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-order-tab" data-bs-toggle="pill"
                                                href="#pills-order" role="tab" aria-controls="pills-order"
                                                aria-selected="false">
                                                Orders
                                            </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-customer-tab" data-bs-toggle="pill"
                                                href="#pills-customer" role="tab" aria-controls="pills-customer"
                                                aria-selected="false">
                                                Customer
                                            </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-vendor-tab" data-bs-toggle="pill"
                                                href="#pills-vendor" role="tab" aria-controls="pills-vendor"
                                                aria-selected="false">
                                                Vendors
                                            </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-delivaryman-tab" data-bs-toggle="pill"
                                                href="#pills-delivaryman" role="tab" aria-controls="pills-delivaryman"
                                                aria-selected="false">
                                                Delivery Men
                                            </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-shipping-method-tab" data-bs-toggle="pill"
                                                href="#pills-shipping-method" role="tab"
                                                aria-controls="pills-shipping-method" aria-selected="false">
                                                Shipping Method
                                            </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-delivery-restriction-tab" data-bs-toggle="pill"
                                                href="#pills-delivery-restriction" role="tab"
                                                aria-controls="pills-delivery-restriction" aria-selected="false">
                                                Delivery Restriction
                                            </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-priority-setup-tab" data-bs-toggle="pill"
                                                href="#pills-priority-setup" role="tab"
                                                aria-controls="pills-priority-setup" aria-selected="false">
                                                Priority Setup
                                            </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-invoice-tab" data-bs-toggle="pill"
                                                href="#pills-invoice" role="tab" aria-controls="pills-invoice"
                                                aria-selected="false">
                                                Invoice
                                            </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-website-setup-tab" data-bs-toggle="pill"
                                                href="#pills-website-setup" role="tab"
                                                aria-controls="pills-website-setup" aria-selected="false">
                                                Website Setup
                                            </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-refund-tab" data-bs-toggle="pill"
                                                href="#pills-refund" role="tab" aria-controls="pills-refund"
                                                aria-selected="false">
                                                Refund
                                            </a>
                                        </li>
                                    </ul>
                                    <div class="nav--tab__prev">
                                        <button type="button" class="btn btn-circle border-0 bg-white text-primary">
                                            <i class="fi fi-sr-angle-left"></i>
                                        </button>
                                    </div>
                                    <div class="nav--tab__next">
                                        <button type="button" class="btn btn-circle border-0 bg-white text-primary">
                                            <i class="fi fi-sr-angle-right"></i>
                                        </button>
                                    </div>

</div>

<div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-general" role="tabpanel"
                                        aria-labelledby="pills-general-tab">
                                        {{-- demo content --}}
                                        <div class="mt-4">
                                            <h4>General Information</h4>
                                            <p>General settings and configurations go here.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-product" role="tabpanel"
                                        aria-labelledby="pills-product-tab">
                                        <div class="mt-4">
                                            <h4>Products</h4>
                                            <p>Product management details go here.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-order" role="tabpanel"
                                        aria-labelledby="pills-order-tab">
                                        <div class="mt-4">
                                            <h4>Orders</h4>
                                            <p>Order management details go here.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-customer" role="tabpanel"
                                        aria-labelledby="pills-customer-tab">
                                        <div class="mt-4">
                                            <h4>Customer Management</h4>
                                            <p>Customer related information goes here.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-vendor" role="tabpanel"
                                        aria-labelledby="pills-vendor-tab">
                                        <div class="mt-4">
                                            <h4>Vendor Management</h4>
                                            <p>Vendor related information goes here.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-delivaryman" role="tabpanel"
                                        aria-labelledby="pills-delivaryman-tab">
                                        <div class="mt-4">
                                            <h4>Delivery Men</h4>
                                            <p>Delivery personnel management goes here.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-shipping-method" role="tabpanel"
                                        aria-labelledby="pills-shipping-method-tab">
                                        <div class="mt-4">
                                            <h4>Shipping Methods</h4>
                                            <p>Shipping method configurations go here.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-delivery-restriction" role="tabpanel"
                                        aria-labelledby="pills-delivery-restriction-tab">
                                        <div class="mt-4">
                                            <h4>Delivery Restrictions</h4>
                                            <p>Delivery restriction settings go here.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-priority-setup" role="tabpanel"
                                        aria-labelledby="pills-priority-setup-tab">
                                        <div class="mt-4">
                                            <h4>Priority Setup</h4>
                                            <p>Priority configuration details go here.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-invoice" role="tabpanel"
                                        aria-labelledby="pills-invoice-tab">
                                        <div class="mt-4">
                                            <h4>Invoice Settings</h4>
                                            <p>Invoice configuration details go here.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-website-setup" role="tabpanel"
                                        aria-labelledby="pills-website-setup-tab">
                                        <div class="mt-4">
                                            <h4>Website Setup</h4>
                                            <p>Website configuration details go here.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-refund" role="tabpanel"
                                        aria-labelledby="pills-refund-tab">
                                        <div class="mt-4">
                                            <h4>Refund Settings</h4>
                                            <p>Refund policy and configuration go here.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="position-relative snippets-code-hover">
                            <div class="component-snippets-code-header">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#html-tab-pane"
                                            type="button" role="tab" aria-controls="html-tab-pane" aria-selected="true">Html</button>
                                </ul>
                                <button class="btn btn-icon copy-button">
                                    <i class="fi fi-rr-copy"></i>
                                </button>
                            </div>
                            <div class="tab-content content position-absolute start-0 top-100 shadow-lg bg-white p-1 z-3 mw-100"
                                id="myTabContent">
                                <div class="tab-pane fade show active" id="html-tab-pane" role="tabpanel" aria-labelledby="home-tab"
                                    tabindex="0">
                                    <div class="component-snippets-code-container">
<pre><code><div class="position-relative nav--tab-wrapper">
    <ul class="nav nav-pills nav--tab" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="pills-general-tab" data-bs-toggle="pill" href="#pills-general" role="tab"
                aria-controls="pills-general" aria-selected="true">
                General
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-product-tab" data-bs-toggle="pill" href="#pills-product" role="tab"
                aria-controls="pills-product" aria-selected="false">
                Products
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-order-tab" data-bs-toggle="pill" href="#pills-order" role="tab"
                aria-controls="pills-order" aria-selected="false">
                Orders
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-customer-tab" data-bs-toggle="pill" href="#pills-customer" role="tab"
                aria-controls="pills-customer" aria-selected="false">
                Customer
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-vendor-tab" data-bs-toggle="pill" href="#pills-vendor" role="tab"
                aria-controls="pills-vendor" aria-selected="false">
                Vendors
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-delivaryman-tab" data-bs-toggle="pill" href="#pills-delivaryman" role="tab"
                aria-controls="pills-delivaryman" aria-selected="false">
                Delivery Men
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-shipping-method-tab" data-bs-toggle="pill" href="#pills-shipping-method"
                role="tab" aria-controls="pills-shipping-method" aria-selected="false">
                Shipping Method
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-delivery-restriction-tab" data-bs-toggle="pill"
                href="#pills-delivery-restriction" role="tab" aria-controls="pills-delivery-restriction"
                aria-selected="false">
                Delivery Restriction
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-priority-setup-tab" data-bs-toggle="pill" href="#pills-priority-setup"
                role="tab" aria-controls="pills-priority-setup" aria-selected="false">
                Priority Setup
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-invoice-tab" data-bs-toggle="pill" href="#pills-invoice" role="tab"
                aria-controls="pills-invoice" aria-selected="false">
                Invoice
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-website-setup-tab" data-bs-toggle="pill" href="#pills-website-setup"
                role="tab" aria-controls="pills-website-setup" aria-selected="false">
                Website Setup
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-refund-tab" data-bs-toggle="pill" href="#pills-refund" role="tab"
                aria-controls="pills-refund" aria-selected="false">
                Refund
            </a>
        </li>
    </ul>
    <div class="nav--tab__prev">
        <button type="button" class="btn btn-circle border-0 bg-white text-primary">
            <i class="fi fi-sr-angle-left"></i>
        </button>
    </div>
    <div class="nav--tab__next">
        <button type="button" class="btn btn-circle border-0 bg-white text-primary">
            <i class="fi fi-sr-angle-right"></i>
        </button>
    </div>
</div>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-general" role="tabpanel" aria-labelledby="pills-general-tab">
        {{-- demo content --}}
        <div class="mt-4">
            <h4>General Information</h4>
            <p>General settings and configurations go here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-product" role="tabpanel" aria-labelledby="pills-product-tab">
        <div class="mt-4">
            <h4>Products</h4>
            <p>Product management details go here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-order" role="tabpanel" aria-labelledby="pills-order-tab">
        <div class="mt-4">
            <h4>Orders</h4>
            <p>Order management details go here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-customer" role="tabpanel" aria-labelledby="pills-customer-tab">
        <div class="mt-4">
            <h4>Customer Management</h4>
            <p>Customer related information goes here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-vendor" role="tabpanel" aria-labelledby="pills-vendor-tab">
        <div class="mt-4">
            <h4>Vendor Management</h4>
            <p>Vendor related information goes here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-delivaryman" role="tabpanel" aria-labelledby="pills-delivaryman-tab">
        <div class="mt-4">
            <h4>Delivery Men</h4>
            <p>Delivery personnel management goes here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-shipping-method" role="tabpanel" aria-labelledby="pills-shipping-method-tab">
        <div class="mt-4">
            <h4>Shipping Methods</h4>
            <p>Shipping method configurations go here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-delivery-restriction" role="tabpanel"
        aria-labelledby="pills-delivery-restriction-tab">
        <div class="mt-4">
            <h4>Delivery Restrictions</h4>
            <p>Delivery restriction settings go here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-priority-setup" role="tabpanel" aria-labelledby="pills-priority-setup-tab">
        <div class="mt-4">
            <h4>Priority Setup</h4>
            <p>Priority configuration details go here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-invoice" role="tabpanel" aria-labelledby="pills-invoice-tab">
        <div class="mt-4">
            <h4>Invoice Settings</h4>
            <p>Invoice configuration details go here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-website-setup" role="tabpanel" aria-labelledby="pills-website-setup-tab">
        <div class="mt-4">
            <h4>Website Setup</h4>
            <p>Website configuration details go here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-refund" role="tabpanel" aria-labelledby="pills-refund-tab">
        <div class="mt-4">
            <h4>Refund Settings</h4>
            <p>Refund policy and configuration go here.</p>
        </div>
    </div>
</div></code></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- snippet container ends --}}
                </div>
                <div class="col-lg-6">
                    {{-- snippet container --}}
                    <div class="component-snippets-container">
                        <div class="component-snippets-preview">
                            <div id="liveAlertPlaceholder">
                                <div></div>
                            </div>
                            <div>
                                <div class="position-relative nav--tab-wrapper">
                                    <ul class="nav nav-pills nav--tab lang_tab" id="pills-tab" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link active" id="pills-eng-tab" data-bs-toggle="pill"
                                                href="#pills-eng" role="tab" aria-controls="pills-eng"
                                                aria-selected="true">
                                                English(EN)
                                            </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-arabic-tab" data-bs-toggle="pill"
                                                href="#pills-arabic" role="tab" aria-controls="pills-arabic"
                                                aria-selected="false">
                                                Arabic(SA)
                                            </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-bangla-tab" data-bs-toggle="pill"
                                                href="#pills-bangla" role="tab" aria-controls="pills-bangla"
                                                aria-selected="false">
                                                Bangla(BD)
                                            </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="pills-hindi-tab" data-bs-toggle="pill"
                                                href="#pills-hindi" role="tab" aria-controls="pills-hindi"
                                                aria-selected="false">
                                                Hindi(IN)
                                            </a>
                                        </li>
                                    </ul>
                                    <div class="nav--tab__prev">
                                        <button type="button" class="btn btn-circle border-0 bg-white text-primary">
                                            <i class="fi fi-sr-angle-left"></i>
                                        </button>
                                    </div>
                                    <div class="nav--tab__next">
                                        <button type="button" class="btn btn-circle border-0 bg-white text-primary">
                                            <i class="fi fi-sr-angle-right"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-eng" role="tabpanel"
                                        aria-labelledby="pills-eng-tab">
                                        {{-- demo content --}}
                                        <div class="mt-4">
                                            <h4>General Information</h4>
                                            <p>General settings and configurations go here.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-arabic" role="tabpanel"
                                        aria-labelledby="pills-arabic-tab">
                                        <div class="mt-4">
                                            <h4>Products</h4>
                                            <p>Product management details go here.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-bangla" role="tabpanel"
                                        aria-labelledby="pills-bangla-tab">
                                        <div class="mt-4">
                                            <h4>Orders</h4>
                                            <p>Order management details go here.</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-hindi" role="tabpanel"
                                        aria-labelledby="pills-hindi-tab">
                                        <div class="mt-4">
                                            <h4>Customer Management</h4>
                                            <p>Customer related information goes here.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="position-relative snippets-code-hover">
                            <div class="component-snippets-code-header">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#html-tab-pane"
                                            type="button" role="tab" aria-controls="html-tab-pane" aria-selected="true">Html</button>
                                </ul>
                                <button class="btn btn-icon copy-button">
                                    <i class="fi fi-rr-copy"></i>
                                </button>
                            </div>
                            <div class="tab-content content position-absolute start-0 top-100 shadow-lg bg-white p-1 z-3 mw-100"
                                id="myTabContent">
                                <div class="tab-pane fade show active" id="html-tab-pane" role="tabpanel" aria-labelledby="home-tab"
                                    tabindex="0">
                                    <div class="component-snippets-code-container">
<pre><code><div class="position-relative nav--tab-wrapper">
    <ul class="nav nav-pills nav--tab lang_tab" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="pills-eng-tab" data-bs-toggle="pill" href="#pills-eng" role="tab"
                aria-controls="pills-eng" aria-selected="true">
                English(EN)
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-arabic-tab" data-bs-toggle="pill" href="#pills-arabic" role="tab"
                aria-controls="pills-arabic" aria-selected="false">
                Arabic(SA)
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-bangla-tab" data-bs-toggle="pill" href="#pills-bangla" role="tab"
                aria-controls="pills-bangla" aria-selected="false">
                Bangla(BD)
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-hindi-tab" data-bs-toggle="pill" href="#pills-hindi" role="tab"
                aria-controls="pills-hindi" aria-selected="false">
                Hindi(IN)
            </a>
        </li>
    </ul>
    <div class="nav--tab__prev">
        <button type="button" class="btn btn-circle border-0 bg-white text-primary">
            <i class="fi fi-sr-angle-left"></i>
        </button>
    </div>
    <div class="nav--tab__next">
        <button type="button" class="btn btn-circle border-0 bg-white text-primary">
            <i class="fi fi-sr-angle-right"></i>
        </button>
    </div>
</div>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-eng" role="tabpanel" aria-labelledby="pills-eng-tab">
        {{-- demo content --}}
        <div class="mt-4">
            <h4>General Information</h4>
            <p>General settings and configurations go here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-arabic" role="tabpanel" aria-labelledby="pills-arabic-tab">
        <div class="mt-4">
            <h4>Products</h4>
            <p>Product management details go here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-bangla" role="tabpanel" aria-labelledby="pills-bangla-tab">
        <div class="mt-4">
            <h4>Orders</h4>
            <p>Order management details go here.</p>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-hindi" role="tabpanel" aria-labelledby="pills-hindi-tab">
        <div class="mt-4">
            <h4>Customer Management</h4>
            <p>Customer related information goes here.</p>
        </div>
    </div>
</div></code></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- snippet container ends --}}
                </div>
            </div>
        </div>
    </div>
</div>

관리-도구

편집 파일: tab-menu.blade.php

🔐 System Login