165 lines
12 KiB
Plaintext
165 lines
12 KiB
Plaintext
- 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
|