first init
This commit is contained in:
arifal
183
resources/views/ui/popovers.blade.php
Executable file
183
resources/views/ui/popovers.blade.php
Executable file
@@ -0,0 +1,183 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Popovers'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Popovers'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Live demo
|
||||
</h5>
|
||||
<p class="card-subtitle">We use JavaScript similar to the snippet above to render the
|
||||
following live popover. Titles are set via <code>data-bs-title</code> and body
|
||||
content is set via <code>data-bs-content</code>.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<button type="button" class="btn btn-danger" data-bs-toggle="popover" title="Popover title"
|
||||
data-bs-content="And here's some amazing content. It's very engaging. Right?">Click
|
||||
to toggle popover</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Popover Directions
|
||||
</h5>
|
||||
<p class="card-subtitle"> Four options are available: top, right, bottom, and left
|
||||
aligned.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<!-- Top Position -->
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover"
|
||||
data-bs-placement="top"
|
||||
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on top
|
||||
</button>
|
||||
|
||||
<!-- Bottom Position -->
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover"
|
||||
data-bs-placement="bottom"
|
||||
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on bottom
|
||||
</button>
|
||||
|
||||
<!-- Left Position -->
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover"
|
||||
data-bs-placement="left"
|
||||
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
||||
title="Popover title">
|
||||
Popover on left
|
||||
</button>
|
||||
|
||||
<!-- Right Position -->
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover"
|
||||
data-bs-placement="right"
|
||||
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dismiss on Next Click
|
||||
</h5>
|
||||
<p class="card-subtitle">Use the <code>focus</code> trigger to dismiss popovers
|
||||
on the user’s next click of a different element than the toggle element.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" tabindex="0" class="btn btn-success" data-bs-toggle="popover"
|
||||
data-bs-trigger="focus"
|
||||
data-bs-content="And here's some amazing content. It's very engaging. Right?"
|
||||
title="Dismissible popover">
|
||||
Dismissible popover
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Hover
|
||||
</h5>
|
||||
<p class="card-subtitle">Use the <code>data-bs-trigger="hover"</code> trigger Hover to
|
||||
show popover.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" tabindex="0" class="btn btn-dark" data-bs-toggle="popover"
|
||||
data-bs-trigger="hover"
|
||||
data-bs-content="And here's some amazing content. It's very engaging. Right?" title="Ohh Wow !">
|
||||
Please Hover Me
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Custom Popovers
|
||||
</h5>
|
||||
<p class="card-subtitle"> ou can customize the appearance of popovers using CSS
|
||||
variables. We set a custom class with
|
||||
<code>data-bs-custom-class="primary-popover"</code> to scope our custom appearance
|
||||
and use it to override some of the
|
||||
local CSS variables.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-bs-custom-class="primary-popover" data-bs-title="Primary popover"
|
||||
data-bs-content="This popover is themed via CSS variables.">
|
||||
Primary popover
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-bs-custom-class="success-popover" data-bs-title="Success popover"
|
||||
data-bs-content="This popover is themed via CSS variables.">
|
||||
Success popover
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-bs-custom-class="danger-popover" data-bs-title="Danger popover"
|
||||
data-bs-content="This popover is themed via CSS variables.">
|
||||
Danger popover
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-bs-custom-class="info-popover" data-bs-title="Info popover"
|
||||
data-bs-content="This popover is themed via CSS variables.">
|
||||
Info popover
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Disabled Elements
|
||||
</h5>
|
||||
<p class="card-subtitle">Elements with the <code>disabled</code> attribute
|
||||
aren’t interactive, meaning users cannot hover or click them to trigger a
|
||||
popover (or tooltip). As a workaround, you’ll want to trigger the popover from a
|
||||
wrapper <code><div></code> or <code><span></code> and override the
|
||||
<code>pointer-events</code> on the disabled element.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<span class="d-inline-block" data-bs-toggle="popover" data-bs-trigger="hover"
|
||||
data-bs-content="Disabled popover">
|
||||
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled
|
||||
button</button>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
Reference in New Issue
Block a user