import React from 'react'; import { Button, Card, Col, Container, Row, Popover, Tooltip, Spinner, Pagination, Breadcrumb, BreadcrumbItem, OverlayTrigger } from 'react-bootstrap'; // Import Content import UiContent from '../../../Components/Common/UiContent'; //import Components import BreadCrumbpage from '../../../Components/Common/BreadCrumb'; import PreviewCardHeader from '../../../Components/Common/PreviewCardHeader'; import { PopoversExample, TooltipsExample, BreadcrumbExample, PaginationExample, SpinnersExample } from './UiGeneralCode'; import { Head } from '@inertiajs/react'; import Layout from '../../../Layouts'; const UiGeneral = () => { return (

Popovers example are available with follwing options , Directions are mirrored when using Bootstrap in RTL.

"Popover top" Vivamus sagittis lacus vel augue laoreet rutrum faucibus. }> "Popover right" Vivamus sagittis lacus vel augue laoreet rutrum faucibus. }> "Popover bottom" Vivamus sagittis lacus vel augue laoreet rutrum faucibus. }> "Popover left" Vivamus sagittis lacus vel augue laoreet rutrum faucibus. }> "Dismissible popover" And here's some amazing content. It's very engaging. Right?" }>

Tooltip example are available with follwing options, Directions are mirrored when using Bootstrap in RTL.

Tooltip on Top. }> Tooltip on right. }> Tooltip on bottom. }> Tooltip on left. }> Tooltip with HTML }>

Indicate the current page’s location within a navigational hierarchy

Home Home Library Home Base UI General Base UI General
Default Pagination

Use Pagination attribute to ul element to indicate a series of related content exists across multiple pages.

Previous {1} {2} {3} Next ← Prev {1} {2} {3} Next →
Disabled and Active states

Use disabled attribute to Pagination.Item to links that appear un-clickable and active class to indicate the current page.

← Prev {1} {2} {3} Next → {1} {2} {3}
Sizing

Use pagination-lg or pagination-sm to set different pagination sizes.

{/* */} ←   Prev {1} {2} {3} Next   → {/* */} ←   Prev {1} {2} {3} Next   →
Alignment

Use justify-content-start, justify-content-start, or justify-content-start, class to pagination class to change the alignment of pagination respectively.

{/* */} {/* */} ←   Prev {1} {2} {3} Next   → {/* */} ←   Prev {1} {2} {3} Next   →
Custom Separated Pagination

Use pagination-separated class to pagination class to set custom separated pagination.

{/* */} ← {1} {2} {3} {4} {5} → ← {1} {2} {3} {4} {5} → ← {1} {2} {3} {4} {5} →
Custom Rounded Pagination

Use pagination-rounded class to pagination class to set custom rounded pagination.

{/* */} ← {1} {2} {3} {4} {5} → ← {1} {2} {3} {4} {5} → ← {1} {2} {3} {4} {5} →
Border spinner

Use Spinner attribute for a lightweight loading indicator.

{/* */} Loading... Loading... Loading... Loading... Loading... Loading... Loading... Loading...
Growing spinner

Use spinner-grow class for a lightweight spinner with growing effect.

{/* */} Loading... Loading... Loading... Loading... Loading... Loading... Loading... Loading...
); }; UiGeneral.layout = (page: any) => export default UiGeneral;