update
This commit is contained in:
@@ -0,0 +1,164 @@
|
||||
- var theme_customizer = true;
|
||||
- var counter = true;
|
||||
- var popover_custom = true;
|
||||
- var sidebar = true;
|
||||
- var slick = true;
|
||||
- var header_slider = true;
|
||||
- var animate = true;
|
||||
- var scrollbar = true;
|
||||
- var prism = true;
|
||||
- var clipboard = true;
|
||||
- var customcard = true;
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
include ../../components/taptop
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper.compact-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-title
|
||||
.row
|
||||
.col-6
|
||||
h4
|
||||
| Popover
|
||||
.col-6
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
svg.stroke-icon
|
||||
use(href='../assets/svg/icon-sprite.svg#stroke-home')
|
||||
li.breadcrumb-item Ui Kits
|
||||
li.breadcrumb-item.active Popover
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row.popover-main
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h4 Basic Popover
|
||||
p.f-m-light.mt-1
|
||||
| Use the
|
||||
code data-bs-toggle='popover'
|
||||
| through popover above buttons.
|
||||
.card-header-right
|
||||
ul.list-unstyled.card-option
|
||||
li
|
||||
i.fa.fa-spin.fa-cog
|
||||
li
|
||||
i.view-html.fa.fa-code
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card
|
||||
li
|
||||
i.icofont.icofont-error.close-card
|
||||
.card-body.common-flex
|
||||
button.btn.btn-primary.example-popover.mb-0.me-0(type='button', data-bs-toggle='popover', title='Basic Popover', data-bs-content="If the package restore doesn't help, you can look at the Output window in the Visual Studio.") Hurry Up!
|
||||
button.example-popover.btn.btn-success.mb-0.me-0(type='button', data-bs-trigger='hover', data-container='body', data-bs-toggle='popover', data-bs-placement='bottom', title='Hover Popover', data-offset='-20px -20px', data-bs-content=' Several utility instruction sets have been featured in the Bootstrap 4 to promote very easy learning for beginners in the business of web building.')
|
||||
| Hover tooltip
|
||||
a.btn.btn-lg.btn-secondary(tabindex='0' role='button' data-bs-toggle='popover' data-bs-trigger='focus', title='Dismissible popover', data-bs-title='Dismissible popover' data-bs-content="You are able to even develop and suggest improvements to the Bootstrap 4 before its final version is delivered.") Dismissible popover
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#badge-variations', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#badge-variations
|
||||
| <!--You can use attribute (data-bs-toggle='popover') through make popover on buttons.-->
|
||||
| <div class="card-body common-flex">
|
||||
| <button class="btn btn-primary example-popover mb-0 me-0" type="button" data-bs-toggle="popover" title="Basic Popover" data-bs-content="If the package restore doesn't help, you can look at the Output window in the Visual Studio.">Hurry Up! </button>
|
||||
| <button class="example-popover btn btn-success mb-0 me-0" type="button" data-bs-trigger="hover" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="Hover Popover" data-offset="-20px -20px" data-bs-content=" Several utility instruction sets have been featured in the Bootstrap 4 to promote very easy learning for beginners in the business of web building.">Hover tooltip</button>
|
||||
| <a class="btn btn-lg btn-secondary" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-title="Dismissible popover" data-bs-content="You are able to even develop and suggest improvements to the Bootstrap 4 before its final version is delivered.">Dismissible popover</a>
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h4 Popover Direction
|
||||
p.f-m-light.mt-1
|
||||
| Use the
|
||||
code data-bs-toggle='popover'
|
||||
| through popover directions above buttons.
|
||||
.card-header-right
|
||||
ul.list-unstyled.card-option
|
||||
li
|
||||
i.fa.fa-spin.fa-cog
|
||||
li
|
||||
i.view-html.fa.fa-code
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card
|
||||
li
|
||||
i.icofont.icofont-error.close-card
|
||||
.card-body.common-flex
|
||||
button.example-popover.btn.btn-warning.mb-0.me-0(type='button', data-container='body', data-bs-toggle='popover', data-bs-placement='top', title='Popover On Top', data-bs-content='Popovers need the tooltip plugin considering that a dependency.')
|
||||
| Popover on top
|
||||
button.example-popover.btn.btn-danger.mb-0.me-0(type='button', data-container='body', data-bs-toggle='popover', data-bs-placement='right', title='Popover On Right', data-bs-content='Popovers are opt-in for effectiveness causes, in this way you have to initialize them yourself.')
|
||||
| Popover on right
|
||||
button.example-popover.btn.btn-info.mb-0.me-0(type='button', data-container='body', data-bs-toggle='popover', data-bs-placement='bottom', title='Popover On Bottom', data-bs-content='Identify container:to evade rendering problems in more complex components (like Bootstrap input groups, button groups, etc).')
|
||||
| Popover on bottom
|
||||
button.example-popover.btn.btn-dark.mb-0.me-0(type='button', data-container='body', data-bs-toggle='popover', data-bs-placement='left', title='Popover On Left', data-bs-content='Popovers are opt-in for effectiveness causes, in this way you have to initialize them yourself.')
|
||||
| Popover on left
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#badge-variations', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#badge-variations
|
||||
| <!--You can use attribute (data-bs-toggle='popover') through make popover on buttons(top/bottom/left/right).-->
|
||||
| <button class="example-popover btn btn-warning mb-0 me-0" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Popover On Top" data-bs-content="Popovers need the tooltip plugin considering that a dependency.">Popover on top</button>
|
||||
| <button class="example-popover btn btn-danger mb-0 me-0" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="right" title="Popover On Right" data-bs-content="Popovers are opt-in for effectiveness causes, in this way you have to initialize them yourself.">Popover on right</button>
|
||||
| <button class="example-popover btn btn-info mb-0 me-0" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="Popover On Bottom" data-bs-content="Identify container:to evade rendering problems in more complex components (like Bootstrap input groups, button groups, etc).">Popover on bottom</button>
|
||||
| <button class="example-popover btn btn-dark mb-0 me-0" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="left" title="Popover On Left" data-bs-content="Popovers are opt-in for effectiveness causes, in this way you have to initialize them yourself.">Popover on left</button>
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h4 Popover Offset
|
||||
p.f-m-light.mt-1
|
||||
| Use the
|
||||
code data-bs-offset="*,*"
|
||||
| through popover offset above buttons.
|
||||
.card-header-right
|
||||
ul.list-unstyled.card-option
|
||||
li
|
||||
i.fa.fa-spin.fa-cog
|
||||
li
|
||||
i.view-html.fa.fa-code
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card
|
||||
li
|
||||
i.icofont.icofont-error.close-card
|
||||
.card-body.common-flex
|
||||
button.btn.btn-secondary.mb-0.me-0(type='button' data-bs-offset="50,0" data-bs-toggle='popover' data-bs-delay-show='5000' title='Popover title' data-bs-content="And here's some amazing content. It's very engaging. Right?" data-kt-initialized="1")
|
||||
| Popover offset 50
|
||||
button.example-popover.btn.btn-dark.mb-0.me-0(type='button' data-bs-offset="-50,0" data-container='body', data-bs-toggle='popover', data-bs-placement='left', title='Popover On Left', data-bs-content='Popovers are opt-in for effectiveness causes, in this way you have to initialize them yourself.')
|
||||
| Popover offset -50
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#badge-variations', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#badge-variations
|
||||
| <!--You can use badge-* class through change the colors of badges (primary/secondary/success...).-->
|
||||
| <span class="badge badge-primary">Primary</span>
|
||||
| <span class="badge badge-secondary">Secondary</span>
|
||||
| <span class="badge badge-success">Success</span>
|
||||
| <span class="badge badge-info">Info</span>
|
||||
| <span class="badge badge-warning text-dark">Warning</span>
|
||||
| <span class="badge badge-danger">Danger</span>
|
||||
| <span class="badge badge-light text-dark">Light</span>
|
||||
| <span class="badge badge-dark tag-pills-sm-mb">Dark</span>
|
||||
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
Reference in New Issue
Block a user