관리-도구

편집 파일: toaster.blade.php

<div class="border border-dashed border-primary rounded p-3 mb-3"> <h2 class="text-primary mb-3">Toaster</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> <button type="button" class="btn btn-success" data-toast-type="success" data-toast-heading="Successfully Message">Show success toast</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 btn-success" data-toast-type="success" data-toast-heading="Successfully Message">Show success toast</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> <button type="button" class="btn btn-danger" data-toast-type="error" data-toast-heading="Failed Message" data-toast-close-btn>Show error toast</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 btn-danger" data-toast-type="error" data-toast-heading="Failed Message" data-toast-close-btn>Show error toast</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> <button type="button" class="btn btn-warning" data-toast-type="warning" data-toast-heading="Warning Message" data-toast-description="Lorem ipsum dolor sit amet, consectetr adipiscing" data-toast-close-btn>Show warning toast</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 btn-warning" data-toast-type="warning" data-toast-heading="Warning Message" data-toast-description="Lorem ipsum dolor sit amet, consectetr adipiscing" data-toast-close-btn>Show warning toast</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> <button type="button" class="btn btn-info" data-toast-type="info" data-toast-heading="Attention/Info Message" data-toast-description="Lorem ipsum dolor sit amet, consectetr adipiscing" data-toast-btn-text="Learn More" data-toast-btn-link="#">Show info toast</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 btn-info" data-toast-type="info" data-toast-heading="Attention/Info Message" data-toast-description="Lorem ipsum dolor sit amet, consectetr adipiscing" data-toast-btn-text="Learn More" data-toast-btn-link="#">Show info toast</button></code></pre> </div> </div> </div> </div> </div> {{-- snippet container ends --}} </div> </div> </div>