관리-도구

편집 파일: dropdown.blade.php

<div class="card mb-3">
    <div class="card-body">
        <h2 class="text-primary text-uppercase mb-3 h1">Dropdown</h2>
        <div class="row g-3 mb-5">
            <div class="col-lg-6">
                <div class="">
                    <h2 class="text-primary text-uppercase mb-3">Normal</h2>
                    {{-- snippet container --}}
                    <div class="component-snippets-container">
                        <div class="component-snippets-preview">
                            <div id="liveAlertPlaceholder">
                                <div></div>
                            </div>
                            <div class="select-wrapper">
                                <select class="form-select" name="">
                                    <option value="10">10 Items</option>
                                    <option value="20">20 Items</option>
                                    <option value="30">30 Items</option>
                                    <option value="40">40 Items</option>
                                    <option value="50">50 Items</option>
                                </select>
                            </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="select-wrapper">
    <select class="form-select" name="">
        <option value="10">10 Items</option>
        <option value="20">20 Items</option>
        <option value="30">30 Items</option>
        <option value="40">40 Items</option>
        <option value="50">50 Items</option>
    </select>
</div></code></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- snippet container ends --}}
                </div>
            </div>

<div class="col-lg-6">
                <div class="">
                    <h2 class="text-primary text-uppercase mb-3">Select</h2>
                    {{-- snippet container --}}
                    <div class="component-snippets-container">
                        <div class="component-snippets-preview">
                            <div id="liveAlertPlaceholder">
                                <div></div>
                            </div>
                            <select class="custom-select" name="" data-without-search="-1"
                                data-placeholder="Select from dropdown">
                                <option></option> 
                                <option value="AL">Alabama</option>
                                <option value="WY">Wyoming</option>
                            </select>
                        </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 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><select class="custom-select" name="" data-without-search="-1"
    data-placeholder="Select from dropdown">
    <option></option> 
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select></code></pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- snippet container ends --}}
                    </div>
            </div>

<div class="col-lg-6">
                <div class="">
                    <h2 class="text-primary text-uppercase mb-3">Select with search</h2>
                    {{-- snippet container --}}
                    <div class="component-snippets-container">
                        <div class="component-snippets-preview">
                            <div id="liveAlertPlaceholder">
                                <div></div>
                            </div>
                            <select class="custom-select" name="" data-placeholder="Select from dropdown">
                                <option></option> 
                                <option value="AL">Alabama</option>
                                <option value="WY">Wyoming</option>
                            </select>
                        </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><select class="custom-select" name="" data-placeholder="Select from dropdown">
    <option></option> 
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select></code></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- snippet container ends --}}
                    </div>
                </div>
            </div>

<div class="col-lg-6">
                <div class="">
                    <h2 class="text-primary text-uppercase mb-3">Multiple Select</h2>
                    {{-- snippet container --}}
                    <div class="component-snippets-container">
                        <div class="component-snippets-preview">
                            <div id="liveAlertPlaceholder">
                                <div></div>
                            </div>
                            <select class="custom-select multiple-select2" name="options[]" multiple="multiple" data-max-length="5"
                                data-placeholder="Select from multiple dropdown">
                                <option value="1">Option 01</option>
                                <option value="2">Option 02</option>
                                <option value="3">Option 03</option>
                                <option value="4">Option 04</option>
                                <option value="5">Option 05</option>
                                <option value="6">Option 06</option>
                                <option value="7">Option 07</option>
                            </select>
                        </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><select class="custom-select multiple-select2" name="options[]" multiple="multiple" data-max-length="5" data-placeholder="Select from multiple dropdown">
    <option value="1">Option 01</option>
    <option value="2">Option 02</option>
    <option value="3">Option 03</option>
    <option value="4">Option 04</option>
    <option value="5">Option 05</option>
    <option value="6">Option 06</option>
    <option value="7">Option 07</option>
</select></code></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- snippet container ends --}}
                    </div>
                </div>
            </div>
                <div class="col-lg-6">
                    <div class="">
                        <h2 class="text-primary text-uppercase mb-3">Dropdown with Media</h2>
                         {{-- snippet container --}}
                    <div class="component-snippets-container">
                        <div class="component-snippets-preview">
                            <div id="liveAlertPlaceholder">
                                <div></div>
                            </div>
                            <div class="dropdown">
                                <a class="" href="javascript:" data-bs-toggle="dropdown">
                                    <img class="rounded-circle border border-2" width="36"
                                        src="{{ getStorageImages(path: auth('admin')->user()->image_full_url, type: 'backend-profile') }}"
                                        alt="{{ translate('image_description') }}">
                                </a>
                                <div class="dropdown-menu dropdown-menu-end">
                                    <div class="dropdown-item">
                                        <div class="media gap-2 align-items-center">
                                            <img class="rounded-circle border border-2" width="40"
                                                src="{{ getStorageImages(path: auth('admin')->user()->image_full_url, type: 'backend-profile') }}"
                                                alt="{{ translate('image_description') }}">
                                            <div class="media-body">
                                                <h4 class="fw-bold mb-1">{{ auth('admin')->user()->name }}</h4>
                                                <p class="fs-12 text-body-light fw-medium">admin</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item media gap-2 align-items-center"
                                        href="{{ route('admin.profile.update', ['id' => auth('admin')->user()->id]) }}">
                                        <i class="fi fi-sr-settings text-body-light"></i>
                                        <span class="text-truncate media-body"
                                            title="Settings">{{ translate('settings') }}</span>
                                    </a>
                                    <a class="dropdown-item media gap-2 align-items-center" href="javascript:"
                                        data-toggle="modal" data-target="#sign-out-modal">
                                        <i class="fi fi-sr-sign-out-alt text-body-light"></i>
                                        <span class="text-truncate media-body"
                                            title="{{ translate('logout') }}">{{ translate('logout') }}</span>
                                    </a>
                                </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="dropdown">
    <a class="" href="javascript:" data-bs-toggle="dropdown">
        <img class="rounded-circle border border-2" width="36"
            src="{{ getStorageImages(path: auth('admin')->user()->image_full_url, type: 'backend-profile') }}"
            alt="{{ translate('image_description') }}">
    </a>
    <div class="dropdown-menu dropdown-menu-end">
        <div class="dropdown-item">
            <div class="media gap-2 align-items-center">
                <img class="rounded-circle border border-2" width="40"
                    src="{{ getStorageImages(path: auth('admin')->user()->image_full_url, type: 'backend-profile') }}"
                    alt="{{ translate('image_description') }}">
                <div class="media-body">
                    <h4 class="fw-bold mb-1">{{ auth('admin')->user()->name }}</h4>
                    <p class="fs-12 text-body-light fw-medium">admin</p>
                </div>
            </div>
        </div>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item media gap-2 align-items-center"
            href="{{ route('admin.profile.update', ['id' => auth('admin')->user()->id]) }}">
            <i class="fi fi-sr-settings text-body-light"></i>
            <span class="text-truncate media-body"
                title="Settings">{{ translate('settings') }}</span>
        </a>
        <a class="dropdown-item media gap-2 align-items-center" href="javascript:"
            data-toggle="modal" data-target="#sign-out-modal">
            <i class="fi fi-sr-sign-out-alt text-body-light"></i>
            <span class="text-truncate media-body"
                title="{{ translate('logout') }}">{{ translate('logout') }}</span>
        </a>
    </div>
</div></code></pre>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- snippet container ends --}}
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

관리-도구

편집 파일: dropdown.blade.php

🔐 System Login