관리-도구

편집 파일: buttons.blade.php

<div class="card bg-white border-0 mb-3"> <div class="card-body"> <h2 class="text-primary text-uppercase mb-3">Buttons</h2> <div class="row align-items-center mb-4"> <div class="col-md-12"> <h3 class="text-dark mb-3">Primary</h3> {{-- small button --}} <div class="row"> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-primary btn-sm"> <i class="fi fi-sr-check-circle"></i> Place Order </button> </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><button class="btn btn-primary btn-sm"> <i class="fi fi-sr-check-circle"></i> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-primary btn-sm" disabled> Place Order </button> </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><button class="btn btn-primary btn-sm" disabled> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> </div> {{-- medium button --}} <div class="row"> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-primary"> Place Order </button> </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><button class="btn btn-primary"> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-primary" disabled> Place Order </button> </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><button class="btn btn-primary" disabled> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> </div> {{-- Lg Button --}} <div class="row"> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-primary btn-lg"> Place Order </button> </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><button class="btn btn-primary btn-lg"> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-primary btn-lg" disabled> Place Order </button> </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><button class="btn btn-primary btn-lg" disabled> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> </div> </div> <div class="col-md-12"> <h3 class="text-dark mb-3">Secondary</h3> {{-- small button --}} <div class="row"> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-secondary btn-sm"> Place Order <i class="fi fi-rr-check-circle"></i> </button> </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><button class="btn btn-secondary btn-sm"> Place Order <i class="fi fi-rr-check-circle"></i> </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-secondary btn-sm" disabled> Place Order </button> </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><button class="btn btn-secondary btn-sm" disabled> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> </div> {{-- medium button --}} <div class="row"> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-secondary"> Place Order </button> </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><button class="btn btn-secondary"> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-secondary" disabled> Place Order </button> </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><button class="btn btn-secondary" disabled> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> </div> {{-- Lg Button --}} <div class="row"> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-secondary btn-lg"> Place Order </button> </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><button class="btn btn-secondary btn-lg"> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-secondary btn-lg" disabled> Place Order </button> </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><button class="btn btn-secondary btn-lg" disabled> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> </div> </div> <div class="col-md-12"> <h3 class="text-dark mb-3">Outlined</h3> {{-- small button --}} <div class="row"> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-outline-primary btn-sm"> Place Order </button> </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><button class="btn btn-outline-primary btn-sm"> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-outline-primary btn-sm" disabled> Place Order </button> </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><button class="btn btn-outline-primary btn-sm" disabled> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> </div> {{-- medium button --}} <div class="row"> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-outline-primary"> Place Order </button> </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><button class="btn btn-outline-primary"> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-outline-primary" disabled> Place Order </button> </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><button class="btn btn-outline-primary" disabled> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> </div> {{-- Lg Button --}} <div class="row"> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-outline-primary btn-lg"> Place Order </button> </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><button class="btn btn-outline-primary btn-lg"> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-outline-primary btn-lg" disabled> Place Order </button> </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><button class="btn btn-outline-primary btn-lg" disabled> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> </div> </div> <div class="col-md-12"> <h3 class="text-dark mb-3">Text</h3> {{-- small button --}} <div class="row"> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-text btn-sm"> Place Order </button> </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><button class="btn btn-text btn-sm"> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-text btn-sm" disabled> Place Order </button> </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><button class="btn btn-text btn-sm" disabled> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> </div> {{-- medium button --}} <div class="row"> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-text"> Place Order </button> </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><button class="btn btn-text"> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-text" disabled> Place Order </button> </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><button class="btn btn-text" disabled> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> </div> {{-- Lg Button --}} <div class="row gy-4"> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-text btn-lg"> Place Order </button> </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><button class="btn btn-text btn-lg"> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> <div class="col-lg-6"> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-text btn-lg" disabled> Place Order </button> </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><button class="btn btn-text btn-lg" disabled> Place Order </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> <div class="col-lg-6"> <h3 class="text-primary">Button xs</h3> <div class="mb-3"> {{-- snippet container --}} <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button class="btn btn-outline-primary btn-xs"> <i class="fi fi-sr-language-exchange"></i> View </button> </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><button class="btn btn-outline-primary btn-xs"> <i class="fi fi-sr-language-exchange"></i> View </button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> <div class="col-lg-6"> <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <div class="d-flex flex-wrap justify-content-end gap-3"> <button type="reset" class="btn btn-secondary px-3 px-sm-4 w-120">Reset</button> <button type="button" class="btn btn-primary px-3 px-sm-4 form-submit" data-form-id="get-storage-connection-route"> <i class="fi fi-sr-disk"></i> Save information </button> </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="d-flex flex-wrap justify-content-end gap-3"> <button type="reset" class="btn btn-secondary px-3 px-sm-4 w-120">Reset</button> <button type="button" class="btn btn-primary px-3 px-sm-4 form-submit" data-form-id="get-storage-connection-route"> <i class="fi fi-sr-disk"></i> Save information </button> </div></code></pre> </div> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div class="component-snippets-container"> <div class="component-snippets-preview"> <div id="liveAlertPlaceholder"> <div></div> </div> <button type="button" class="btn bg-secondary text-white lh-1 px-3 rounded-45"> Check New Themes <i class="fi fi-rr-up-right-from-square"></i> </button> </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><button type="button" class="btn bg-secondary text-white lh-1 px-3 rounded-45"> Check New Themes <i class="fi fi-rr-up-right-from-square"></i> </button></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> <a href="{{route('admin.system-setup.language.index')}}" class="d-flex mt-2 gap-1 align-items-center text-decoration-none"> <i class="fi fi-rr-arrow-small-left mt-1 fs-5"></i> <span class="text text-capitalize">{{translate('Back to Language Setup')}}</span> </a> </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><a href="{{route('admin.system-setup.language.index')}}" class="d-flex mt-2 gap-1 align-items-center text-decoration-none"> <i class="fi fi-rr-arrow-small-left mt-1 fs-5"></i> <span class="text text-capitalize">{{translate('Back to Language Setup')}}</span> </a></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 class="d-flex flex-wrap gap-3 align-items-center"> <button class="btn bg-danger bg-opacity-10 text-danger p-2 px-3" data-toggle="modal" data-target="#rejectModal"> {{ translate('reject') }} </button> <button class="btn bg-primary bg-opacity-10 text-primary p-2 px-3" data-toggle="modal" data-target="#approveModal"> {{ translate('approve') }} </button> <button class="btn bg-success bg-opacity-10 text-success p-2 px-3" data-toggle="modal" data-target="#refundModal"> {{ translate('refund') }} </button> </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="d-flex flex-wrap gap-3 align-items-center"> <button class="btn bg-danger bg-opacity-10 text-danger p-2 px-3" data-toggle="modal" data-target="#rejectModal"> {{ translate('reject') }} </button> <button class="btn bg-primary bg-opacity-10 text-primary p-2 px-3" data-toggle="modal" data-target="#approveModal"> {{ translate('approve') }} </button> <button class="btn bg-success bg-opacity-10 text-success p-2 px-3" data-toggle="modal" data-target="#refundModal"> {{ translate('refund') }} </button> </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 class="dropdown"> <a type="button" class="btn btn-outline-primary" href="{{ route('admin.category.export',['searchValue'=>request('searchValue')]) }}"> <i class="fi fi-sr-inbox-in"></i> <span class="fs-12">{{ translate('export') }}</span> </a> </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 type="button" class="btn btn-outline-primary" href="{{ route('admin.category.export',['searchValue'=>request('searchValue')]) }}"> <i class="fi fi-sr-inbox-in"></i> <span class="fs-12">{{ translate('export') }}</span> </a> </div></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> </div> </div> </div> </div>