refactor: update example views
This commit is contained in:
Łukasz Holeczek
parent
35be1eac55
commit
c5421714ba
@ -12,10 +12,10 @@ const loading = (
|
||||
const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
|
||||
|
||||
// Pages
|
||||
const Login = React.lazy(() => import('./views/pages/login/Login'))
|
||||
const Register = React.lazy(() => import('./views/pages/register/Register'))
|
||||
const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
|
||||
const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
|
||||
const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
|
||||
const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
|
||||
const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404'))
|
||||
const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500'))
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import { shallow } from 'enzyme/build'
|
||||
import App from './App'
|
||||
import ChartLineSimple from './views/charts/ChartLineSimple'
|
||||
import ChartLineSimple from './views/examples/charts/ChartLineSimple'
|
||||
import Dashboard from './views/dashboard/Dashboard.js'
|
||||
|
||||
it('mounts App without crashing', () => {
|
||||
|
||||
@ -73,12 +73,6 @@ const _nav = [
|
||||
anchor: 'Collapse',
|
||||
to: '/base/collapses',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Jumbotron',
|
||||
to: '/base/jumbotrons',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
@ -88,15 +82,9 @@ const _nav = [
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Navs',
|
||||
anchor: 'Navs & Tabs',
|
||||
to: '/base/navs',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Navbars',
|
||||
to: '/base/navbars',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
@ -121,12 +109,6 @@ const _nav = [
|
||||
anchor: 'Tables',
|
||||
to: '/base/tables',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Tabs',
|
||||
to: '/base/tabs',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
|
||||
@ -7,7 +7,7 @@ const DefaultLayout = () => {
|
||||
<AppSidebar />
|
||||
<div className="wrapper d-flex flex-column min-vh-100 bg-light">
|
||||
<AppHeader />
|
||||
<div className="body">
|
||||
<div className="body flex-grow-1 px-3">
|
||||
<TheContent />
|
||||
</div>
|
||||
<AppFooter />
|
||||
|
||||
@ -1,49 +1,51 @@
|
||||
import React from 'react'
|
||||
|
||||
const Toasts = React.lazy(() => import('./views/notifications/toasts/Toasts'))
|
||||
const Tables = React.lazy(() => import('./views/base/tables/Tables'))
|
||||
// examples
|
||||
|
||||
const Accordion = React.lazy(() => import('./views/base/accordion/Accordion'))
|
||||
const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs'))
|
||||
const Cards = React.lazy(() => import('./views/base/cards/Cards'))
|
||||
const Carousels = React.lazy(() => import('./views/base/carousels/Carousels'))
|
||||
const Collapses = React.lazy(() => import('./views/base/collapses/Collapses'))
|
||||
const Colors = React.lazy(() => import('./views/examples/theme/colors/Colors'))
|
||||
const Typography = React.lazy(() => import('./views/examples/theme/typography/Typography'))
|
||||
|
||||
const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons'))
|
||||
const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'))
|
||||
const Navbars = React.lazy(() => import('./views/base/navbars/Navbars'))
|
||||
const Navs = React.lazy(() => import('./views/base/navs/Navs'))
|
||||
const Paginations = React.lazy(() => import('./views/base/paginations/Paginations'))
|
||||
const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'))
|
||||
const Progress = React.lazy(() => import('./views/base/progress/Progress'))
|
||||
const Accordion = React.lazy(() => import('./views/examples/base/accordion/Accordion'))
|
||||
const Breadcrumbs = React.lazy(() => import('./views/examples/base/breadcrumbs/Breadcrumbs'))
|
||||
const Cards = React.lazy(() => import('./views/examples/base/cards/Cards'))
|
||||
const Carousels = React.lazy(() => import('./views/examples/base/carousels/Carousels'))
|
||||
const Collapses = React.lazy(() => import('./views/examples/base/collapses/Collapses'))
|
||||
const ListGroups = React.lazy(() => import('./views/examples/base/list-groups/ListGroups'))
|
||||
const Navs = React.lazy(() => import('./views/examples/base/navs/Navs'))
|
||||
const Paginations = React.lazy(() => import('./views/examples/base/paginations/Paginations'))
|
||||
const Popovers = React.lazy(() => import('./views/examples/base/popovers/Popovers'))
|
||||
const Progress = React.lazy(() => import('./views/examples/base/progress/Progress'))
|
||||
const Tables = React.lazy(() => import('./views/examples/base/tables/Tables'))
|
||||
const Tooltips = React.lazy(() => import('./views/examples/base/tooltips/Tooltips'))
|
||||
|
||||
const Tabs = React.lazy(() => import('./views/base/tabs/Tabs'))
|
||||
const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'))
|
||||
const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns'))
|
||||
const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups'))
|
||||
const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons'))
|
||||
const Charts = React.lazy(() => import('./views/charts/Charts'))
|
||||
const Buttons = React.lazy(() => import('./views/examples/buttons/buttons/Buttons'))
|
||||
const ButtonGroups = React.lazy(() => import('./views/examples/buttons/button-groups/ButtonGroups'))
|
||||
const Dropdowns = React.lazy(() => import('./views/examples/buttons/dropdowns/Dropdowns'))
|
||||
|
||||
const ChecksRadios = React.lazy(() => import('./views/examples/forms/checks-radios/ChecksRadios'))
|
||||
const FormControl = React.lazy(() => import('./views/examples/forms/form-control/FormControl'))
|
||||
const InputGroup = React.lazy(() => import('./views/examples/forms/input-group/InputGroup'))
|
||||
const Layout = React.lazy(() => import('./views/examples/forms/layout/Layout'))
|
||||
const Range = React.lazy(() => import('./views/examples/forms/range/Range'))
|
||||
const Select = React.lazy(() => import('./views/examples/forms/select/Select'))
|
||||
const Validation = React.lazy(() => import('./views/examples/forms/validation/Validation'))
|
||||
|
||||
const CoreUIIcons = React.lazy(() => import('./views/examples/icons/coreui-icons/CoreUIIcons'))
|
||||
const Flags = React.lazy(() => import('./views/examples/icons/flags/Flags'))
|
||||
const Brands = React.lazy(() => import('./views/examples/icons/brands/Brands'))
|
||||
|
||||
const Alerts = React.lazy(() => import('./views/examples/notifications/alerts/Alerts'))
|
||||
const Badges = React.lazy(() => import('./views/examples/notifications/badges/Badges'))
|
||||
const Modals = React.lazy(() => import('./views/examples/notifications/modals/Modals'))
|
||||
const Toasts = React.lazy(() => import('./views/examples/notifications/toasts/Toasts'))
|
||||
|
||||
const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
|
||||
const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
|
||||
|
||||
const Widgets = React.lazy(() => import('./views/examples/widgets/Widgets'))
|
||||
|
||||
const Charts = React.lazy(() => import('./views/examples/charts/Charts'))
|
||||
const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
|
||||
const CoreUIIcons = React.lazy(() => import('./views/icons/coreui-icons/CoreUIIcons'))
|
||||
const Flags = React.lazy(() => import('./views/icons/flags/Flags'))
|
||||
const Brands = React.lazy(() => import('./views/icons/brands/Brands'))
|
||||
const Alerts = React.lazy(() => import('./views/notifications/alerts/Alerts'))
|
||||
const Badges = React.lazy(() => import('./views/notifications/badges/Badges'))
|
||||
const Modals = React.lazy(() => import('./views/notifications/modals/Modals'))
|
||||
const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
|
||||
const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
|
||||
const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
|
||||
|
||||
const ChecksRadios = React.lazy(() => import('./views/forms/checks-radios/ChecksRadios'))
|
||||
const FormControl = React.lazy(() => import('./views/forms/form-control/FormControl'))
|
||||
const InputGroup = React.lazy(() => import('./views/forms/input-group/InputGroup'))
|
||||
const Layout = React.lazy(() => import('./views/forms/layout/Layout'))
|
||||
const Range = React.lazy(() => import('./views/forms/range/Range'))
|
||||
const Select = React.lazy(() => import('./views/forms/select/Select'))
|
||||
const Validation = React.lazy(() => import('./views/forms/validation/Validation'))
|
||||
|
||||
const Login = React.lazy(() => import('./views/pages/login/Login'))
|
||||
const Register = React.lazy(() => import('./views/pages/register/Register'))
|
||||
|
||||
const routes = [
|
||||
{ path: '/', exact: true, name: 'Home' },
|
||||
@ -57,19 +59,16 @@ const routes = [
|
||||
{ path: '/base/cards', name: 'Cards', component: Cards },
|
||||
{ path: '/base/carousels', name: 'Carousel', component: Carousels },
|
||||
{ path: '/base/collapses', name: 'Collapse', component: Collapses },
|
||||
{ path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons },
|
||||
{ path: '/base/list-groups', name: 'List Groups', component: ListGroups },
|
||||
{ path: '/base/navbars', name: 'Navbars', component: Navbars },
|
||||
{ path: '/base/navs', name: 'Navs', component: Navs },
|
||||
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
|
||||
{ path: '/base/popovers', name: 'Popovers', component: Popovers },
|
||||
{ path: '/base/progress', name: 'Progress', component: Progress },
|
||||
{ path: '/base/tables', name: 'Tables', component: Tables },
|
||||
{ path: '/base/tabs', name: 'Tabs', component: Tabs },
|
||||
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
|
||||
{ path: '/buttons', name: 'Buttons', component: Buttons, exact: true },
|
||||
{ path: '/buttons/buttons', name: 'Buttons', component: Buttons },
|
||||
{ path: '/buttons/button-dropdowns', name: 'Dropdowns', component: ButtonDropdowns },
|
||||
{ path: '/buttons/dropdowns', name: 'Dropdowns', component: Dropdowns },
|
||||
{ path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
|
||||
{ path: '/charts', name: 'Charts', component: Charts },
|
||||
{ path: '/forms', name: 'Forms', component: FormControl, exact: true },
|
||||
|
||||
@ -6,6 +6,7 @@ $enable-rtl: true;
|
||||
|
||||
// Import styles
|
||||
@import "@coreui/coreui/scss/coreui";
|
||||
@import "@coreui/chartjs/dist/css/coreui-chartjs.css";
|
||||
|
||||
@import "layout";
|
||||
@import "example";
|
||||
|
||||
@ -1,333 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CBadge,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CRow,
|
||||
CTable,
|
||||
CTableBody,
|
||||
CTableDataCell,
|
||||
CTableHead,
|
||||
CTableHeaderCell,
|
||||
CTableRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const Tables = () => {
|
||||
return (
|
||||
<>
|
||||
<CRow>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Simple Table
|
||||
<DocsLink name="CModal" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTable responsive="sm">
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell>Username</CTableHeaderCell>
|
||||
<CTableHeaderCell>Date registered</CTableHeaderCell>
|
||||
<CTableHeaderCell>Role</CTableHeaderCell>
|
||||
<CTableHeaderCell>Status</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Samppa Nori</CTableDataCell>
|
||||
<CTableDataCell>2012/01/01</CTableDataCell>
|
||||
<CTableDataCell>Member</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="success">Active</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Estavan Lykos</CTableDataCell>
|
||||
<CTableDataCell>2012/02/01</CTableDataCell>
|
||||
<CTableDataCell>Staff</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="danger">Banned</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Chetan Mohamed</CTableDataCell>
|
||||
<CTableDataCell>2012/02/01</CTableDataCell>
|
||||
<CTableDataCell>Admin</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="secondary">Inactive</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Derick Maximinus</CTableDataCell>
|
||||
<CTableDataCell>2012/03/01</CTableDataCell>
|
||||
<CTableDataCell>Member</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="warning">Pending</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Friderik Dávid</CTableDataCell>
|
||||
<CTableDataCell>2012/01/21</CTableDataCell>
|
||||
<CTableDataCell>Staff</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="success">Active</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Striped Table</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTable responsive="sm" striped>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell>Username</CTableHeaderCell>
|
||||
<CTableHeaderCell>Date registered</CTableHeaderCell>
|
||||
<CTableHeaderCell>Role</CTableHeaderCell>
|
||||
<CTableHeaderCell>Status</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Yiorgos Avraamu</CTableDataCell>
|
||||
<CTableDataCell>2012/01/01</CTableDataCell>
|
||||
<CTableDataCell>Member</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="success">Active</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Avram Tarasios</CTableDataCell>
|
||||
<CTableDataCell>2012/02/01</CTableDataCell>
|
||||
<CTableDataCell>Staff</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="danger">Banned</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Quintin Ed</CTableDataCell>
|
||||
<CTableDataCell>2012/02/01</CTableDataCell>
|
||||
<CTableDataCell>Admin</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="secondary">Inactive</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Enéas Kwadwo</CTableDataCell>
|
||||
<CTableDataCell>2012/03/01</CTableDataCell>
|
||||
<CTableDataCell>Member</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="warning">Pending</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Agapetus Tadeáš</CTableDataCell>
|
||||
<CTableDataCell>2012/01/21</CTableDataCell>
|
||||
<CTableDataCell>Staff</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="success">Active</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Condensed Table</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTable responsive="sm" small>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell>Username</CTableHeaderCell>
|
||||
<CTableHeaderCell>Date registered</CTableHeaderCell>
|
||||
<CTableHeaderCell>Role</CTableHeaderCell>
|
||||
<CTableHeaderCell>Status</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Carwyn Fachtna</CTableDataCell>
|
||||
<CTableDataCell>2012/01/01</CTableDataCell>
|
||||
<CTableDataCell>Member</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="success">Active</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Nehemiah Tatius</CTableDataCell>
|
||||
<CTableDataCell>2012/02/01</CTableDataCell>
|
||||
<CTableDataCell>Staff</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="danger">Banned</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Ebbe Gemariah</CTableDataCell>
|
||||
<CTableDataCell>2012/02/01</CTableDataCell>
|
||||
<CTableDataCell>Admin</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="secondary">Inactive</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Eustorgios Amulius</CTableDataCell>
|
||||
<CTableDataCell>2012/03/01</CTableDataCell>
|
||||
<CTableDataCell>Member</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="warning">Pending</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Leopold Gáspár</CTableDataCell>
|
||||
<CTableDataCell>2012/01/21</CTableDataCell>
|
||||
<CTableDataCell>Staff</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="success">Active</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Bordered Table</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTable responsive="sm" bordered>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell>Username</CTableHeaderCell>
|
||||
<CTableHeaderCell>Date registered</CTableHeaderCell>
|
||||
<CTableHeaderCell>Role</CTableHeaderCell>
|
||||
<CTableHeaderCell>Status</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Pompeius René</CTableDataCell>
|
||||
<CTableDataCell>2012/01/01</CTableDataCell>
|
||||
<CTableDataCell>Member</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="success">Active</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Paĉjo Jadon</CTableDataCell>
|
||||
<CTableDataCell>2012/02/01</CTableDataCell>
|
||||
<CTableDataCell>Staff</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="danger">Banned</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Micheal Mercurius</CTableDataCell>
|
||||
<CTableDataCell>2012/02/01</CTableDataCell>
|
||||
<CTableDataCell>Admin</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="secondary">Inactive</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Ganesha Dubhghall</CTableDataCell>
|
||||
<CTableDataCell>2012/03/01</CTableDataCell>
|
||||
<CTableDataCell>Member</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="warning">Pending</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Hiroto Šimun</CTableDataCell>
|
||||
<CTableDataCell>2012/01/21</CTableDataCell>
|
||||
<CTableDataCell>Staff</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="success">Active</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol xs>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Combined All Table</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTable responsive="sm" bordered striped small>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell>Username</CTableHeaderCell>
|
||||
<CTableHeaderCell>Date registered</CTableHeaderCell>
|
||||
<CTableHeaderCell>Role</CTableHeaderCell>
|
||||
<CTableHeaderCell>Status</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Vishnu Serghei</CTableDataCell>
|
||||
<CTableDataCell>2012/01/01</CTableDataCell>
|
||||
<CTableDataCell>Member</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="success">Active</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Zbyněk Phoibos</CTableDataCell>
|
||||
<CTableDataCell>2012/02/01</CTableDataCell>
|
||||
<CTableDataCell>Staff</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="danger">Banned</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Einar Randall</CTableDataCell>
|
||||
<CTableDataCell>2012/02/01</CTableDataCell>
|
||||
<CTableDataCell>Admin</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="secondary">Inactive</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Félix Troels</CTableDataCell>
|
||||
<CTableDataCell>2012/03/01</CTableDataCell>
|
||||
<CTableDataCell>Member</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="warning">Pending</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Aulus Agmundr</CTableDataCell>
|
||||
<CTableDataCell>2012/01/21</CTableDataCell>
|
||||
<CTableDataCell>Staff</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CBadge color="success">Active</CBadge>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Tables
|
||||
@ -1,86 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const Tooltips = () => {
|
||||
const placements = [
|
||||
'top-start',
|
||||
'top',
|
||||
'top-end',
|
||||
'bottom-start',
|
||||
'bottom',
|
||||
'bottom-end',
|
||||
'right-start',
|
||||
'right',
|
||||
'right-end',
|
||||
'left-start',
|
||||
'left',
|
||||
'left-end',
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Tooltips
|
||||
<DocsLink name="CTooltip" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-muted">Hover over the links below to see tooltips:</p>
|
||||
<p className="muted">
|
||||
Tight pants next level keffiyeh
|
||||
<CTooltip content="Tooltip text">
|
||||
<CLink> you probably </CLink>
|
||||
</CTooltip>
|
||||
haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag
|
||||
stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american
|
||||
apparel
|
||||
<CTooltip content="Tooltip text">
|
||||
<CLink> have a </CLink>
|
||||
</CTooltip>
|
||||
terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats.
|
||||
Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A
|
||||
really ironic artisan
|
||||
<CTooltip content="Tooltip text">
|
||||
<CLink> whatever keytar </CLink>
|
||||
</CTooltip>
|
||||
scenester farm-to-table banksy Austin
|
||||
<CTooltip content="Tooltip text">
|
||||
<CLink> twitter handle </CLink>
|
||||
</CTooltip>
|
||||
freegan cred raw denim single-origin coffee viral.
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<hr />
|
||||
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Tooltips
|
||||
<small> placement</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div className="my-3">
|
||||
<CRow>
|
||||
{placements.map((placement) => {
|
||||
return (
|
||||
<CCol md="4" className="py-4 text-center" key={placement}>
|
||||
<CTooltip
|
||||
content={`Tooltip with placement: ${placement}`}
|
||||
placement={placement}
|
||||
>
|
||||
<CButton color="primary">{placement}</CButton>
|
||||
</CTooltip>
|
||||
</CCol>
|
||||
)
|
||||
})}
|
||||
</CRow>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Tooltips
|
||||
@ -1,381 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CForm,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CDropdown,
|
||||
CDropdownDivider,
|
||||
CDropdownHeader,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CRow,
|
||||
CFormLabel,
|
||||
CFormControl,
|
||||
CFormCheck,
|
||||
} from '@coreui/react'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const ButtonDropdowns = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Dropdowns
|
||||
<DocsLink name="CDropdown" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle>Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<hr />
|
||||
<CDropdown className="m-1 btn-group">
|
||||
<CDropdownToggle color="primary">Primary</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown className="m-1 btn-group">
|
||||
<CDropdownToggle color="secondary">Secondary</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown className="m-1 btn-group">
|
||||
<CDropdownToggle color="success">Success</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown className="m-1 btn-group">
|
||||
<CDropdownToggle color="info">Info</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown className="m-1 btn-group">
|
||||
<CDropdownToggle color="warning">Warning</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown className="m-1 btn-group">
|
||||
<CDropdownToggle color="danger">Danger</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<hr />
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle split color="primary">
|
||||
Primary
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle split color="secondary">
|
||||
Secondary
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle split color="success">
|
||||
Success
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle split color="info">
|
||||
Info
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle split color="warning">
|
||||
Warning
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle split color="danger">
|
||||
Danger
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<hr />
|
||||
<CDropdown className="m-1" size="lg">
|
||||
<CDropdownToggle color="secondary">Large button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>{' '}
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle split color="secondary" size="lg">
|
||||
Large split button
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<hr />
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle color="secondary" size="sm">
|
||||
Small button
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>{' '}
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle color="secondary" size="sm" split>
|
||||
Small split button
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<hr />
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle color="secondary">Dropup button</CDropdownToggle>
|
||||
<CDropdownMenu placement="top">
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle split color="secondary">
|
||||
Split dropup
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="top">
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Menus</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDropdown className="m-1 d-inline-block">
|
||||
<CDropdownToggle color="secondary">Direction Up</CDropdownToggle>
|
||||
<CDropdownMenu placement="top">
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
|
||||
<CDropdown className="m-1 d-inline-block">
|
||||
<CDropdownToggle color="secondary">Direction Left</CDropdownToggle>
|
||||
<CDropdownMenu placement="left">
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
|
||||
<CDropdown className="m-1 d-inline-block">
|
||||
<CDropdownToggle color="secondary">Direction Right</CDropdownToggle>
|
||||
<CDropdownMenu placement="right">
|
||||
<CDropdownHeader>Header</CDropdownHeader>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
|
||||
<CDropdown className="m-1 d-inline-block">
|
||||
<CDropdownToggle color="secondary">Default Down</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom" modifiers={[{ name: 'flip', enabled: false }]}>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
|
||||
<hr />
|
||||
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle color="secondary">
|
||||
This dropdown{"'"}s menu is right-aligned
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="right">
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
|
||||
<hr />
|
||||
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle color="secondary">Dropdown with header</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem header>Header</CDropdownItem>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
|
||||
<hr />
|
||||
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle color="secondary">Dropdown with divider</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>Another Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
|
||||
<hr />
|
||||
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle color="secondary">Dropdown with disabled item</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled Action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
|
||||
<hr />
|
||||
|
||||
<CDropdown className="m-1">
|
||||
<CDropdownToggle color="info">Dropdown with form</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CForm className="px-4 py-3">
|
||||
<div className="mb-3">
|
||||
<CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
|
||||
<CFormControl
|
||||
id="exampleDropdownFormEmail1"
|
||||
type="email"
|
||||
placeholder="email@example.com"
|
||||
autoComplete="email"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
|
||||
<CFormControl
|
||||
id="exampleDropdownFormPassword1"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<CFormCheck custom id="exampleDropdownFormCheckbox1" label="Remember me" />
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<CButton color="primary" type="submit">
|
||||
Sign in
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#/pages/register">Register</CDropdownItem>
|
||||
<CDropdownItem>Forgot password?</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default ButtonDropdowns
|
||||
@ -1,190 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCallout,
|
||||
CDropdown,
|
||||
CButtonGroup,
|
||||
CButtonToolbar,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CFormControl,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const ButtonGroups = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Callout
|
||||
<DocsLink name="CCallout" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCallout color="primary">Callout</CCallout>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Button Group
|
||||
<DocsLink name="-Button/#CButtonGroup" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Button Group
|
||||
<small> toolbar</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButtonToolbar className="mb-3">
|
||||
<CButtonGroup className="me-2">
|
||||
<CButton color="secondary">1</CButton>
|
||||
<CButton color="secondary">2</CButton>
|
||||
<CButton color="secondary">3</CButton>
|
||||
<CButton color="secondary">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup className="me-2">
|
||||
<CButton color="secondary">5</CButton>
|
||||
<CButton color="secondary">6</CButton>
|
||||
<CButton color="secondary">7</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary">8</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
<CButtonToolbar className="mb-3">
|
||||
<CButtonGroup className="me-2">
|
||||
<CButton color="secondary">1</CButton>
|
||||
<CButton color="secondary">2</CButton>
|
||||
<CButton color="secondary">3</CButton>
|
||||
<CButton color="secondary">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormControl placeholder="Input group example" />
|
||||
</CInputGroup>
|
||||
</CButtonToolbar>
|
||||
<CButtonToolbar justify="between">
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary">1</CButton>
|
||||
<CButton color="secondary">2</CButton>
|
||||
<CButton color="secondary">3</CButton>
|
||||
<CButton color="secondary">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormControl placeholder="Input group example" />
|
||||
</CInputGroup>
|
||||
</CButtonToolbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Button Group
|
||||
<small> vertical variation</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButtonGroup vertical>
|
||||
<CButton color="secondary">1</CButton>
|
||||
<CButton color="secondary">2</CButton>
|
||||
<CButton color="secondary">3</CButton>
|
||||
</CButtonGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Button Group
|
||||
<small> sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButtonGroup size="lg">
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br />
|
||||
<br />
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br />
|
||||
<br />
|
||||
<CButtonGroup size="sm">
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Button Group
|
||||
<small> nestingccc</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary">1</CButton>
|
||||
<CButton color="secondary">2</CButton>
|
||||
<CDropdown color="secondary">
|
||||
<CDropdownToggle caret color="secondary">
|
||||
Dropdown
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>Dropdown Link</CDropdownItem>
|
||||
<CDropdownItem>Dropdown Link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Button Group
|
||||
<small> vertical</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButtonGroup vertical>
|
||||
<CButton color="secondary">1</CButton>
|
||||
<CButton color="secondary">2</CButton>
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="secondary" caret>
|
||||
Dropdown
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>Dropdown Link</CDropdownItem>
|
||||
<CDropdownItem>Dropdown Link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default ButtonGroups
|
||||
@ -1,960 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const Buttons = () => {
|
||||
return (
|
||||
<>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Standard Buttons
|
||||
<DocsLink name="-Button" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow className="align-items-center">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton href="#" color="primary">
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="secondary">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="success">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="warning">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="danger">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="info">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="light">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="dark">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="link">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active color="primary" aria-pressed="true">
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active color="secondary" aria-pressed="true">
|
||||
Secondary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active color="success" aria-pressed="true">
|
||||
Success
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active color="warning" aria-pressed="true">
|
||||
Warning
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active color="danger" aria-pressed="true">
|
||||
Danger
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active color="info" aria-pressed="true">
|
||||
Info
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active color="light" aria-pressed="true">
|
||||
Light
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active color="dark" aria-pressed="true">
|
||||
Dark
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active color="link" aria-pressed="true">
|
||||
Link
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="primary" disabled>
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="secondary" disabled>
|
||||
Secondary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="success" disabled>
|
||||
Success
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="warning" disabled>
|
||||
Warning
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="danger" disabled>
|
||||
Danger
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="info" disabled>
|
||||
Info
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="light" disabled>
|
||||
Light
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="dark" disabled>
|
||||
Dark
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton color="link" disabled>
|
||||
Link
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>layout="outline" Buttons</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
With <code>outline</code> prop.
|
||||
</p>
|
||||
<CRow className="align-items-center">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="primary">
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="secondary">
|
||||
Secondary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="success">
|
||||
Success
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="warning">
|
||||
Warning
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="danger">
|
||||
Danger
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="info">
|
||||
Info
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="light">
|
||||
Light
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="dark">
|
||||
Dark
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" active color="primary" aria-pressed="true">
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" active color="secondary" aria-pressed="true">
|
||||
Secondary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" active color="success" aria-pressed="true">
|
||||
Success
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" active color="warning" aria-pressed="true">
|
||||
Warning
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" active color="danger" aria-pressed="true">
|
||||
Danger
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" active color="info" aria-pressed="true">
|
||||
Info
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" active color="light" aria-pressed="true">
|
||||
Light
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" active color="dark" aria-pressed="true">
|
||||
Dark
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="primary" disabled>
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="secondary" disabled>
|
||||
Secondary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="success" disabled>
|
||||
Success
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="warning" disabled>
|
||||
Warning
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="danger" disabled>
|
||||
Danger
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="info" disabled>
|
||||
Info
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="light" disabled>
|
||||
Light
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="outline" color="dark" disabled>
|
||||
Dark
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>layout="ghost" Buttons</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use <code>.btn-ghost-*</code> class for layout="ghost" buttons.
|
||||
</p>
|
||||
<CRow className="align-items-center">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="primary">
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="secondary">
|
||||
Secondary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="success">
|
||||
Success
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="warning">
|
||||
Warning
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="danger">
|
||||
Danger
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="info">
|
||||
Info
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="light">
|
||||
Light
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="dark">
|
||||
Dark
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active layout="ghost" color="primary" aria-pressed="true">
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active layout="ghost" color="secondary" aria-pressed="true">
|
||||
Secondary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active layout="ghost" color="success" aria-pressed="true">
|
||||
Success
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active layout="ghost" color="warning" aria-pressed="true">
|
||||
Warning
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active layout="ghost" color="danger" aria-pressed="true">
|
||||
Danger
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active layout="ghost" color="info" aria-pressed="true">
|
||||
Info
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active layout="ghost" color="light" aria-pressed="true">
|
||||
Light
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active layout="ghost" color="dark" aria-pressed="true">
|
||||
Dark
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="primary" disabled>
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="secondary" disabled>
|
||||
Secondary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="success" disabled>
|
||||
Success
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="warning" disabled>
|
||||
Warning
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="danger" disabled>
|
||||
Danger
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="info" disabled>
|
||||
Info
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="light" disabled>
|
||||
Light
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton layout="ghost" color="dark" disabled>
|
||||
Dark
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Square Buttons</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use <code>.btn-square</code> class for square buttons.
|
||||
</p>
|
||||
<CRow className="align-items-center">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="primary">
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="secondary">
|
||||
Secondary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="success">
|
||||
Success
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="warning">
|
||||
Warning
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="danger">
|
||||
Danger
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="info">
|
||||
Info
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="light">
|
||||
Light
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="dark">
|
||||
Dark
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="link">
|
||||
Link
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="square" color="primary" aria-pressed="true">
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="square" color="secondary" aria-pressed="true">
|
||||
Secondary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="square" color="success" aria-pressed="true">
|
||||
Success
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="square" color="warning" aria-pressed="true">
|
||||
Warning
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="square" color="danger" aria-pressed="true">
|
||||
Danger
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="square" color="info" aria-pressed="true">
|
||||
Info
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="square" color="light" aria-pressed="true">
|
||||
Light
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="square" color="dark" aria-pressed="true">
|
||||
Dark
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="square" color="link" aria-pressed="true">
|
||||
Link
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="primary" disabled>
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="secondary" disabled>
|
||||
Secondary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="success" disabled>
|
||||
Success
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="warning" disabled>
|
||||
Warning
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="danger" disabled>
|
||||
Danger
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="info" disabled>
|
||||
Info
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="light" disabled>
|
||||
Light
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="dark" disabled>
|
||||
Dark
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="square" color="link" disabled>
|
||||
Link
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Pill Buttons</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use <code>.btn-pill</code> class for pill buttons.
|
||||
</p>
|
||||
<CRow className="align-items-center">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="primary">
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="secondary">
|
||||
Secondary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="success">
|
||||
Success
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="warning">
|
||||
Warning
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="danger">
|
||||
Danger
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="info">
|
||||
Info
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="light">
|
||||
Light
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="dark">
|
||||
Dark
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="link">
|
||||
Link
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="rounded-pill" color="primary" aria-pressed="true">
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="rounded-pill" color="secondary" aria-pressed="true">
|
||||
Secondary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="rounded-pill" color="success" aria-pressed="true">
|
||||
Success
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="rounded-pill" color="warning" aria-pressed="true">
|
||||
Warning
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="rounded-pill" color="danger" aria-pressed="true">
|
||||
Danger
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="rounded-pill" color="info" aria-pressed="true">
|
||||
Info
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="rounded-pill" color="light" aria-pressed="true">
|
||||
Light
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="rounded-pill" color="dark" aria-pressed="true">
|
||||
Dark
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="rounded-pill" color="link" aria-pressed="true">
|
||||
Link
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="primary" disabled>
|
||||
Primary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="secondary" disabled>
|
||||
Secondary
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="success" disabled>
|
||||
Success
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="warning" disabled>
|
||||
Warning
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="danger" disabled>
|
||||
Danger
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="info" disabled>
|
||||
Info
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="light" disabled>
|
||||
Light
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="dark" disabled>
|
||||
Dark
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="rounded-pill" color="link" disabled>
|
||||
Link
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Sizes</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code>{' '}
|
||||
for additional sizes.
|
||||
</p>
|
||||
<CRow className="align-items-center">
|
||||
<CCol col="2" xl className="mb-3 mb-xl-0">
|
||||
Small
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary" size="sm">
|
||||
Standard Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="secondary" layout="outline" size="sm">
|
||||
Outline Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton size="sm" layout="ghost" color="ghost">
|
||||
Ghost Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton shape="square" color="warning" size="sm">
|
||||
Square Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton shape="rounded-pill" color="danger" size="sm">
|
||||
Pill Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
<CCol col="2" xl className="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton layout="outline" color="secondary">
|
||||
Outline Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton layout="ghost" color="success">
|
||||
Ghost Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton shape="square" color="warning">
|
||||
Square Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton shape="rounded-pill" color="danger">
|
||||
Pill Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
<CCol col="2" xl className="mb-3 mb-xl-0">
|
||||
Large
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary" size="lg">
|
||||
Standard Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton layout="outline" color="secondary" size="lg">
|
||||
Outline Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton layout="ghost" color="success" size="lg">
|
||||
Ghost Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton shape="square" color="warning" size="lg">
|
||||
Square Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton shape="rounded-pill" color="danger" size="lg">
|
||||
Pill Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>With Icons</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow className="align-items-center mt-3">
|
||||
<CCol col="2" className="text-center mt-3">
|
||||
<CButton color="primary">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="text-center mt-3">
|
||||
<CButton color="secondary" layout="outline">
|
||||
<CIcon name="cil-lightbulb" />
|
||||
Outline Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="text-center mt-3">
|
||||
<CButton layout="ghost" color="success">
|
||||
<CIcon name="cil-lightbulb" />
|
||||
Ghost Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="text-center mt-3">
|
||||
<CButton shape="square" color="warning">
|
||||
<CIcon name="cil-lightbulb" />
|
||||
Square Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="text-center mt-3">
|
||||
<CButton shape="rounded-pill" color="danger">
|
||||
<CIcon name="cil-lightbulb" />
|
||||
Pill Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Level Buttons</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Add prop <code>block</code>
|
||||
</p>
|
||||
<CButton color="secondary" size="lg">
|
||||
Block level button
|
||||
</CButton>
|
||||
<CButton color="primary" size="lg">
|
||||
Block level button
|
||||
</CButton>
|
||||
<CButton color="success" size="lg">
|
||||
Block level button
|
||||
</CButton>
|
||||
<CButton color="info" size="lg">
|
||||
Block level button
|
||||
</CButton>
|
||||
<CButton color="warning" size="lg">
|
||||
Block level button
|
||||
</CButton>
|
||||
<CButton color="danger" size="lg">
|
||||
Block level button
|
||||
</CButton>
|
||||
<CButton color="link" size="lg">
|
||||
Block level button
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Level Buttons</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Add prop <code>block</code>
|
||||
</p>
|
||||
<CButton layout="outline" color="secondary" size="lg">
|
||||
Block level button
|
||||
</CButton>
|
||||
<CButton layout="outline" color="primary" size="lg">
|
||||
Block level button
|
||||
</CButton>
|
||||
<CButton layout="outline" color="success" size="lg">
|
||||
Block level button
|
||||
</CButton>
|
||||
<CButton layout="outline" color="info" size="lg">
|
||||
Block level button
|
||||
</CButton>
|
||||
<CButton layout="outline" color="warning" size="lg">
|
||||
Block level button
|
||||
</CButton>
|
||||
<CButton layout="outline" color="danger" size="lg">
|
||||
Block level button
|
||||
</CButton>
|
||||
<CButton layout="ghost" color="info" size="lg">
|
||||
Block level button
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Buttons
|
||||
@ -1,206 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'
|
||||
import {
|
||||
CChartBar,
|
||||
CChartLine,
|
||||
CChartDoughnut,
|
||||
CChartRadar,
|
||||
CChartPie,
|
||||
CChartPolarArea,
|
||||
} from '@coreui/react-chartjs'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const Charts = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Bar Chart
|
||||
<DocsLink href="http://www.chartjs.org" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartBar
|
||||
datasets={[
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
|
||||
},
|
||||
]}
|
||||
labels="months"
|
||||
options={{
|
||||
tooltips: {
|
||||
enabled: true,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Doughnut Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartDoughnut
|
||||
datasets={[
|
||||
{
|
||||
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
|
||||
data: [40, 20, 80, 10],
|
||||
},
|
||||
]}
|
||||
labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
|
||||
options={{
|
||||
tooltips: {
|
||||
enabled: true,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Line Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartLine
|
||||
datasets={[
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: 'rgb(228,102,81,0.9)',
|
||||
data: [30, 39, 10, 50, 30, 70, 35],
|
||||
},
|
||||
{
|
||||
label: 'Data Two',
|
||||
backgroundColor: 'rgb(0,216,255,0.9)',
|
||||
data: [39, 80, 40, 35, 40, 20, 45],
|
||||
},
|
||||
]}
|
||||
options={{
|
||||
tooltips: {
|
||||
enabled: true,
|
||||
},
|
||||
}}
|
||||
labels="months"
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Pie Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartPie
|
||||
datasets={[
|
||||
{
|
||||
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
|
||||
data: [40, 20, 80, 10],
|
||||
},
|
||||
]}
|
||||
labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
|
||||
options={{
|
||||
tooltips: {
|
||||
enabled: true,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Polar Area Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartPolarArea
|
||||
datasets={[
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40],
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100],
|
||||
},
|
||||
]}
|
||||
options={{
|
||||
aspectRatio: 1.5,
|
||||
tooltips: {
|
||||
enabled: true,
|
||||
},
|
||||
}}
|
||||
labels={[
|
||||
'Eating',
|
||||
'Drinking',
|
||||
'Sleeping',
|
||||
'Designing',
|
||||
'Coding',
|
||||
'Cycling',
|
||||
'Running',
|
||||
]}
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Radar Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartRadar
|
||||
datasets={[
|
||||
{
|
||||
label: '2019',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
borderColor: 'rgba(179,181,198,1)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
tooltipLabelColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40],
|
||||
},
|
||||
{
|
||||
label: '2020',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
borderColor: 'rgba(255,99,132,1)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
tooltipLabelColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100],
|
||||
},
|
||||
]}
|
||||
options={{
|
||||
aspectRatio: 1.5,
|
||||
tooltips: {
|
||||
enabled: true,
|
||||
},
|
||||
}}
|
||||
labels={[
|
||||
'Eating',
|
||||
'Drinking',
|
||||
'Sleeping',
|
||||
'Designing',
|
||||
'Coding',
|
||||
'Cycling',
|
||||
'Running',
|
||||
]}
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Charts
|
||||
@ -1,132 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CChartLine } from '@coreui/react-chartjs'
|
||||
import { getStyle, hexToRgba } from '@coreui/utils'
|
||||
|
||||
const brandSuccess = getStyle('success') || '#4dbd74'
|
||||
const brandInfo = getStyle('info') || '#20a8d8'
|
||||
const brandDanger = getStyle('danger') || '#f86c6b'
|
||||
|
||||
const MainChartExample = (attributes) => {
|
||||
const random = (min, max) => {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
const defaultDatasets = (() => {
|
||||
let elements = 27
|
||||
const data1 = []
|
||||
const data2 = []
|
||||
const data3 = []
|
||||
for (let i = 0; i <= elements; i++) {
|
||||
data1.push(random(50, 200))
|
||||
data2.push(random(80, 100))
|
||||
data3.push(65)
|
||||
}
|
||||
return [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: hexToRgba(brandInfo, 10),
|
||||
borderColor: brandInfo,
|
||||
pointHoverBackgroundColor: brandInfo,
|
||||
borderWidth: 2,
|
||||
data: data1,
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandSuccess,
|
||||
pointHoverBackgroundColor: brandSuccess,
|
||||
borderWidth: 2,
|
||||
data: data2,
|
||||
},
|
||||
{
|
||||
label: 'My Third dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandDanger,
|
||||
pointHoverBackgroundColor: brandDanger,
|
||||
borderWidth: 1,
|
||||
borderDash: [8, 5],
|
||||
data: data3,
|
||||
},
|
||||
]
|
||||
})()
|
||||
|
||||
const defaultOptions = (() => {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
maxTicksLimit: 5,
|
||||
stepSize: Math.ceil(250 / 5),
|
||||
max: 250,
|
||||
},
|
||||
gridLines: {
|
||||
display: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
},
|
||||
},
|
||||
}
|
||||
})()
|
||||
|
||||
// render
|
||||
return (
|
||||
<CChartLine
|
||||
{...attributes}
|
||||
datasets={defaultDatasets}
|
||||
options={defaultOptions}
|
||||
labels={[
|
||||
'Mo',
|
||||
'Tu',
|
||||
'We',
|
||||
'Th',
|
||||
'Fr',
|
||||
'Sa',
|
||||
'Su',
|
||||
'Mo',
|
||||
'Tu',
|
||||
'We',
|
||||
'Th',
|
||||
'Fr',
|
||||
'Sa',
|
||||
'Su',
|
||||
'Mo',
|
||||
'Tu',
|
||||
'We',
|
||||
'Th',
|
||||
'Fr',
|
||||
'Sa',
|
||||
'Su',
|
||||
'Mo',
|
||||
'Tu',
|
||||
'We',
|
||||
'Th',
|
||||
'Fr',
|
||||
'Sa',
|
||||
'Su',
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default MainChartExample
|
||||
@ -2,7 +2,6 @@ import React, { lazy } from 'react'
|
||||
|
||||
import {
|
||||
CAvatar,
|
||||
CBadge,
|
||||
CButton,
|
||||
CButtonGroup,
|
||||
CCallout,
|
||||
@ -13,15 +12,21 @@ import {
|
||||
CCol,
|
||||
CProgress,
|
||||
CRow,
|
||||
} from '@coreui/react-ts'
|
||||
} from '@coreui/react'
|
||||
import { CChart } from '@coreui/react-chartjs'
|
||||
import { getStyle, hexToRgba } from '@coreui/utils'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
import MainChartExample from '../charts/MainChartExample.js'
|
||||
import MainChartExample from '../examples/charts/MainChartExample.js'
|
||||
|
||||
const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
|
||||
const WidgetsBrand = lazy(() => import('../widgets/WidgetsBrand.js'))
|
||||
const WidgetsDropdown = lazy(() => import('../examples/widgets/WidgetsDropdown.js'))
|
||||
const WidgetsBrand = lazy(() => import('../examples/widgets/WidgetsBrand.js'))
|
||||
|
||||
const Dashboard = () => {
|
||||
const random = (min, max) => {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<WidgetsDropdown />
|
||||
@ -32,7 +37,7 @@ const Dashboard = () => {
|
||||
<h4 id="traffic" className="card-title mb-0">
|
||||
Traffic
|
||||
</h4>
|
||||
<div className="small text-muted">November 2017</div>
|
||||
<div className="small text-muted">January - July 2021</div>
|
||||
</CCol>
|
||||
<CCol sm="7" className="d-none d-md-block">
|
||||
<CButton color="primary" className="float-end">
|
||||
@ -52,7 +57,91 @@ const Dashboard = () => {
|
||||
</CButtonGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<MainChartExample style={{ height: '300px', marginTop: '40px' }} />
|
||||
<CChart
|
||||
type="line"
|
||||
style={{ height: '300px', marginTop: '40px' }}
|
||||
data={{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: hexToRgba(getStyle('--cui-info'), 10),
|
||||
borderColor: getStyle('--cui-info'),
|
||||
pointHoverBackgroundColor: getStyle('--cui-info'),
|
||||
borderWidth: 2,
|
||||
data: [
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
],
|
||||
fill: true,
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: getStyle('--cui-success'),
|
||||
pointHoverBackgroundColor: getStyle('--cui-success'),
|
||||
borderWidth: 2,
|
||||
data: [
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'My Third dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: getStyle('--cui-danger'),
|
||||
pointHoverBackgroundColor: getStyle('--cui-danger'),
|
||||
borderWidth: 1,
|
||||
borderDash: [8, 5],
|
||||
data: [65, 65, 65, 65, 65, 65, 65],
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
maxTicksLimit: 5,
|
||||
stepSize: Math.ceil(250 / 5),
|
||||
max: 250,
|
||||
},
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CRow className="text-center">
|
||||
@ -96,18 +185,16 @@ const Dashboard = () => {
|
||||
<CCol xs="12" md="6" xl="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<CCallout color="info">
|
||||
<small className="text-muted">New Clients</small>
|
||||
<br />
|
||||
<strong className="h4">9,123</strong>
|
||||
</CCallout>
|
||||
<div className="border-start border-start-3 border-start-info py-1 px-3">
|
||||
<div className="text-medium-emphasis small">New Clients</div>
|
||||
<div className="fs-3 fw-semibold">9,123</div>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CCallout color="danger">
|
||||
<small className="text-muted">Recurring Clients</small>
|
||||
<br />
|
||||
<strong className="h4">22,643</strong>
|
||||
</CCallout>
|
||||
<div className="border-start border-start-3 border-start-danger py-1 px-3 mb-3">
|
||||
<div className="text-medium-emphasis small">Recurring Clients</div>
|
||||
<div className="fs-3 fw-semibold">22,643</div>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
@ -181,18 +268,16 @@ const Dashboard = () => {
|
||||
<CCol xs="12" md="6" xl="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<CCallout color="warning">
|
||||
<small className="text-muted">Pageviews</small>
|
||||
<br />
|
||||
<strong className="h4">78,623</strong>
|
||||
</CCallout>
|
||||
<div className="border-start border-start-3 border-start-warning py-1 px-3 mb-3">
|
||||
<div className="text-medium-emphasis small">Pageviews</div>
|
||||
<div className="fs-3 fw-semibold">78,623</div>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CCallout color="success">
|
||||
<small className="text-muted">Organic</small>
|
||||
<br />
|
||||
<strong className="h4">49,123</strong>
|
||||
</CCallout>
|
||||
<div className="border-start border-start-3 border-start-success py-1 px-3 mb-3">
|
||||
<div className="text-medium-emphasis small">Organic</div>
|
||||
<div className="fs-3 fw-semibold">49,123</div>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CLink, CPopover, CRow, CCol } from '@coreui/react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react'
|
||||
import { Example } from 'src/reusable'
|
||||
|
||||
const Popovers = () => {
|
||||
988
src/views/examples/base/tables/Tables.js
Normal file
988
src/views/examples/base/tables/Tables.js
Normal file
@ -0,0 +1,988 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CRow,
|
||||
CTable,
|
||||
CTableBody,
|
||||
CTableCaption,
|
||||
CTableDataCell,
|
||||
CTableHead,
|
||||
CTableHeaderCell,
|
||||
CTableRow,
|
||||
} from '@coreui/react'
|
||||
import { Example } from 'src/reusable'
|
||||
|
||||
const Tables = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Basic example</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Using the most basic table CoreUI, here's how{' '}
|
||||
<code class="css-0"><CTable></code>-based tables look in CoreUI.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table">
|
||||
<CTable>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Variants</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use contextual classes to color tables, table rows or individual cells.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#variants">
|
||||
<CTable>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Default</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="primary">
|
||||
<CTableHeaderCell scope="row">Primary</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="secondary">
|
||||
<CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="success">
|
||||
<CTableHeaderCell scope="row">Success</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="danger">
|
||||
<CTableHeaderCell scope="row">Danger</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="warning">
|
||||
<CTableHeaderCell scope="row">Warning</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="info">
|
||||
<CTableHeaderCell scope="row">Info</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="light">
|
||||
<CTableHeaderCell scope="row">Light</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="dark">
|
||||
<CTableHeaderCell scope="row">Dark</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Striped rows</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use <code class="css-0">striped</code> property to add zebra-striping to any table row
|
||||
within the <code class="css-0"><CTableBody></code>.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#striped-rows">
|
||||
<CTable striped>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<p className="text-medium-emphasis small">
|
||||
These classes can also be added to table variants:
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#striped-rows">
|
||||
<CTable color="dark" striped>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#striped-rows">
|
||||
<CTable color="success" striped>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Hoverable rows</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use <code class="css-0">hover</code> property to enable a hover state on table rows
|
||||
within a <code class="css-0"><CTableBody></code>.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#hoverable-rows">
|
||||
<CTable hover>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#hoverable-rows">
|
||||
<CTable color="dark" hover>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#hoverable-rows">
|
||||
<CTable striped hover>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Active tables</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#active-tables">
|
||||
<CTable>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow active>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2" active>
|
||||
Larry the Bird
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#active-tables">
|
||||
<CTable color="dark">
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow active>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2" active>
|
||||
Larry the Bird
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Bordered tables</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code class="css-0">bordered</code> property for borders on all sides of the table
|
||||
and cells.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#bordered-tables">
|
||||
<CTable bordered>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<p className="text-medium-emphasis small">
|
||||
<a href="https://coreui.io/docs/4.0/utilities/borders#border-color" class="css-0">
|
||||
Border color utilities
|
||||
</a>{' '}
|
||||
can be added to change colors:
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#bordered-tables">
|
||||
<CTable bordered borderColor="primary">
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Tables without borders</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code class="css-0">borderless</code> property for a table without borders.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#tables-without-borders">
|
||||
<CTable borderless>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#tables-without-borders">
|
||||
<CTable color="dark" borderless>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Small tables</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code class="css-0">small</code> property to make any{' '}
|
||||
<code class="css-0"><CTable></code> more compact by cutting all cell{' '}
|
||||
<code class="css-0">padding</code> in half.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#small-tables">
|
||||
<CTable small>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Vertical alignment</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Table cells of <code class="css-0"><CTableHead></code> are always vertical
|
||||
aligned to the bottom. Table cells in <code class="css-0"><CTableBody></code>{' '}
|
||||
inherit their alignment from <code class="css-0"><CTable></code> and are aligned
|
||||
to the the top by default. Use the align property to re-align where needed.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#vertical-alignment">
|
||||
<CTable align="middle" reponsive>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col" className="w-25">
|
||||
Heading 1
|
||||
</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col" className="w-25">
|
||||
Heading 2
|
||||
</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col" className="w-25">
|
||||
Heading 3
|
||||
</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col" className="w-25">
|
||||
Heading 4
|
||||
</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: middle;</code> from the table
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: middle;</code> from the table
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: middle;</code> from the table
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This here is some placeholder text, intended to take up quite a bit of
|
||||
vertical space, to demonsCTableRowate how the vertical alignment works in the
|
||||
preceding cells.
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow align="bottom">
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: bottom;</code> from the table row
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: bottom;</code> from the table row
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: bottom;</code> from the table row
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This here is some placeholder text, intended to take up quite a bit of
|
||||
vertical space, to demonsCTableRowate how the vertical alignment works in the
|
||||
preceding cells.
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: middle;</code> from the table
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: middle;</code> from the table
|
||||
</CTableDataCell>
|
||||
<CTableDataCell align="top">This cell is aligned to the top.</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This here is some placeholder text, intended to take up quite a bit of
|
||||
vertical space, to demonsCTableRowate how the vertical alignment works in the
|
||||
preceding cells.
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Nesting</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Border styles, active styles, and table variants are not inherited by nested tables.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#nesting">
|
||||
<CTable striped>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell colspan="4">
|
||||
<CTable>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Header</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Header</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Header</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">A</CTableHeaderCell>
|
||||
<CTableDataCell>First</CTableDataCell>
|
||||
<CTableDataCell>Last</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">B</CTableHeaderCell>
|
||||
<CTableDataCell>First</CTableDataCell>
|
||||
<CTableDataCell>Last</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">C</CTableHeaderCell>
|
||||
<CTableDataCell>First</CTableDataCell>
|
||||
<CTableDataCell>Last</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Table head</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Similar to tables and dark tables, use the modifier prop{' '}
|
||||
<code class="css-0">color="light"</code> or <code class="css-0">color="dark"</code> to
|
||||
make <code class="css-0"><CTableHead></code>s appear light or dark gray.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#table-head">
|
||||
<CTable>
|
||||
<CTableHead color="light">
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell>Larry</CTableDataCell>
|
||||
<CTableDataCell>the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#table-head">
|
||||
<CTable>
|
||||
<CTableHead color="dark">
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Table foot</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#table-foot">
|
||||
<CTable>
|
||||
<CTableHead color="light">
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Footer</CTableDataCell>
|
||||
<CTableDataCell>Footer</CTableDataCell>
|
||||
<CTableDataCell>Footer</CTableDataCell>
|
||||
<CTableDataCell>Footer</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Captions</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
A <code class="css-0"><CTableCaption></code> functions like a heading for a
|
||||
table. It helps users with screen readers to find a table and understand what it's
|
||||
about and decide if they want to read it.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#captions">
|
||||
<CTable>
|
||||
<CTableCaption>List of users</CTableCaption>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell>Larry</CTableDataCell>
|
||||
<CTableDataCell>the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<p className="text-medium-emphasis small">
|
||||
You can also put the <code class="css-0"><CTableCaption></code> on the top of
|
||||
the table with <code class="css-0">caption="top"</code>.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#captions">
|
||||
<CTable caption="top">
|
||||
<CTableCaption>List of users</CTableCaption>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell>Larry</CTableDataCell>
|
||||
<CTableDataCell>the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Tables
|
||||
94
src/views/examples/base/tooltips/Tooltips.js
Normal file
94
src/views/examples/base/tooltips/Tooltips.js
Normal file
@ -0,0 +1,94 @@
|
||||
import React from 'react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react'
|
||||
import { Example } from 'src/reusable'
|
||||
|
||||
const Tooltips = () => {
|
||||
const placements = [
|
||||
'top-start',
|
||||
'top',
|
||||
'top-end',
|
||||
'bottom-start',
|
||||
'bottom',
|
||||
'bottom-end',
|
||||
'right-start',
|
||||
'right',
|
||||
'right-end',
|
||||
'left-start',
|
||||
'left',
|
||||
'left-end',
|
||||
]
|
||||
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Tooltip</strong> <small>Basic example</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Hover over the links below to see tooltips:
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/tooltip">
|
||||
<p className="text-medium-emphasis">
|
||||
Tight pants next level keffiyeh
|
||||
<CTooltip content="Tooltip text">
|
||||
<CLink> you probably </CLink>
|
||||
</CTooltip>
|
||||
haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag
|
||||
stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american
|
||||
apparel
|
||||
<CTooltip content="Tooltip text">
|
||||
<CLink> have a </CLink>
|
||||
</CTooltip>
|
||||
terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo
|
||||
thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan
|
||||
chambray. A really ironic artisan
|
||||
<CTooltip content="Tooltip text">
|
||||
<CLink> whatever keytar </CLink>
|
||||
</CTooltip>
|
||||
scenester farm-to-table banksy Austin
|
||||
<CTooltip content="Tooltip text">
|
||||
<CLink> twitter handle </CLink>
|
||||
</CTooltip>
|
||||
freegan cred raw denim single-origin coffee viral.
|
||||
</p>
|
||||
</Example>
|
||||
<p class="css-0">
|
||||
Hover over the buttons below to see the four tooltips directions: top, right, bottom,
|
||||
and left. Directions are mirrored when using CoreUI in RTL.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/tooltip">
|
||||
<CTooltip
|
||||
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
||||
placement="top"
|
||||
>
|
||||
<CButton color="secondary">Tooltip on top</CButton>
|
||||
</CTooltip>
|
||||
<CTooltip
|
||||
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
||||
placement="end"
|
||||
>
|
||||
<CButton color="secondary">Tooltip on right</CButton>
|
||||
</CTooltip>
|
||||
<CTooltip
|
||||
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
||||
placement="bottom"
|
||||
>
|
||||
<CButton color="secondary">Tooltip on bottom</CButton>
|
||||
</CTooltip>
|
||||
<CTooltip
|
||||
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
||||
placement="start"
|
||||
>
|
||||
<CButton color="secondary">Tooltip on left</CButton>
|
||||
</CTooltip>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Tooltips
|
||||
451
src/views/examples/buttons/button-groups/ButtonGroups.js
Normal file
451
src/views/examples/buttons/button-groups/ButtonGroups.js
Normal file
@ -0,0 +1,451 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CDropdown,
|
||||
CDropdownDivider,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CButtonGroup,
|
||||
CButtonToolbar,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CFormCheck,
|
||||
CFormControl,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { Example } from 'src/reusable'
|
||||
|
||||
const ButtonGroups = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button Group</strong> <span>Basic example</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Wrap a series of <code><CButton></code> components in{' '}
|
||||
<code><CButtonGroup></code>.{' '}
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/list-group">
|
||||
<CButtonGroup role="group" aria-label="Basic example">
|
||||
<CButton color="primary">Left</CButton>
|
||||
<CButton color="primary">Middle</CButton>
|
||||
<CButton color="primary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
<p>
|
||||
These classes can also be added to groups of links, as an alternative to the{' '}
|
||||
<code><CNav></code> components.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/list-group">
|
||||
<CButtonGroup>
|
||||
<CButton href="#" color="primary" active>
|
||||
Active link
|
||||
</CButton>
|
||||
<CButton href="#" color="primary">
|
||||
Link
|
||||
</CButton>
|
||||
<CButton href="#" color="primary">
|
||||
Link
|
||||
</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button Group</strong> <span>Mixed styles</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/list-group#mixed-styles">
|
||||
<CButtonGroup role="group" aria-label="Basic mixed styles example">
|
||||
<CButton color="danger">Left</CButton>
|
||||
<CButton color="warning">Middle</CButton>
|
||||
<CButton color="success">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button Group</strong> <span>Outlined styles</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/list-group#outlined-styles">
|
||||
<CButtonGroup role="group" aria-label="Basic outlined example">
|
||||
<CButton color="primary" variant="outline">
|
||||
Left
|
||||
</CButton>
|
||||
<CButton color="primary" variant="outline">
|
||||
Middle
|
||||
</CButton>
|
||||
<CButton color="primary" variant="outline">
|
||||
Right
|
||||
</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button Group</strong> <span>Checkbox and radio button groups</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Combine button-like checkbox and radio toggle buttons into a seamless looking button
|
||||
group.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/list-group#checkbox-and-radio-button-groups">
|
||||
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
|
||||
<CFormCheck
|
||||
button
|
||||
buttonVariant="outline"
|
||||
id="btncheck1"
|
||||
autocomplete="off"
|
||||
label="Checkbox 1"
|
||||
/>
|
||||
<CFormCheck
|
||||
button
|
||||
buttonVariant="outline"
|
||||
id="btncheck2"
|
||||
autocomplete="off"
|
||||
label="Checkbox 2"
|
||||
/>
|
||||
<CFormCheck
|
||||
button
|
||||
buttonVariant="outline"
|
||||
id="btncheck3"
|
||||
autocomplete="off"
|
||||
label="Checkbox 3"
|
||||
/>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/list-group#checkbox-and-radio-button-groups">
|
||||
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
button
|
||||
buttonVariant="outline"
|
||||
name="btnradio"
|
||||
id="btnradio1"
|
||||
autocomplete="off"
|
||||
label="Radio 1"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
button
|
||||
buttonVariant="outline"
|
||||
name="btnradio"
|
||||
id="btnradio2"
|
||||
autocomplete="off"
|
||||
label="Radio 2"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
button
|
||||
buttonVariant="outline"
|
||||
name="btnradio"
|
||||
id="btnradio3"
|
||||
autocomplete="off"
|
||||
label="Radio 3"
|
||||
/>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button Group</strong> <span>Button toolbar</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Join sets of button groups into button toolbars for more complicated components. Use
|
||||
utility classes as needed to space out groups, buttons, and more.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/list-group#button-toolbar">
|
||||
<CButtonToolbar role="group" aria-label="Toolbar with button groups">
|
||||
<CButtonGroup className="me-2" role="group" aria-label="First group">
|
||||
<CButton color="primary">1</CButton>
|
||||
<CButton color="primary">2</CButton>
|
||||
<CButton color="primary">3</CButton>
|
||||
<CButton color="primary">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup className="me-2" role="group" aria-label="Second group">
|
||||
<CButton color="secondary">5</CButton>
|
||||
<CButton color="secondary">6</CButton>
|
||||
<CButton color="secondary">7</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup className="me-2" role="group" aria-label="Third group">
|
||||
<CButton color="info">8</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</Example>
|
||||
<p>
|
||||
Feel free to combine input groups with button groups in your toolbars. Similar to the
|
||||
example above, you’ll likely need some utilities through to space items correctly.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/list-group#button-toolbar">
|
||||
<CButtonToolbar className="mb-3" role="group" aria-label="Toolbar with button groups">
|
||||
<CButtonGroup className="me-2" role="group" aria-label="First group">
|
||||
<CButton color="secondary" variant="outline">
|
||||
1
|
||||
</CButton>
|
||||
<CButton color="secondary" variant="outline">
|
||||
2
|
||||
</CButton>
|
||||
<CButton color="secondary" variant="outline">
|
||||
3
|
||||
</CButton>
|
||||
<CButton color="secondary" variant="outline">
|
||||
4
|
||||
</CButton>
|
||||
</CButtonGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormControl
|
||||
placeholder="Input group example"
|
||||
aria-label="Input group example"
|
||||
aria-describedby="btnGroupAddon"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</CButtonToolbar>
|
||||
<CButtonToolbar
|
||||
className="justify-content-between"
|
||||
role="group"
|
||||
aria-label="Toolbar with button groups"
|
||||
>
|
||||
<CButtonGroup className="me-2" role="group" aria-label="First group">
|
||||
<CButton color="secondary" variant="outline">
|
||||
1
|
||||
</CButton>
|
||||
<CButton color="secondary" variant="outline">
|
||||
2
|
||||
</CButton>
|
||||
<CButton color="secondary" variant="outline">
|
||||
3
|
||||
</CButton>
|
||||
<CButton color="secondary" variant="outline">
|
||||
4
|
||||
</CButton>
|
||||
</CButtonGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormControl
|
||||
placeholder="Input group example"
|
||||
aria-label="Input group example"
|
||||
aria-describedby="btnGroupAddon"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</CButtonToolbar>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button Group</strong> <span>Sizing</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Alternatively, of implementing button sizing classes to each button in a group, set{' '}
|
||||
<code>size</code> property to all <code><CButtonGroup></code>'s, including each
|
||||
one when nesting multiple groups.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/list-group#sizing">
|
||||
<CButtonGroup size="lg" role="group" aria-label="Large button group">
|
||||
<CButton color="dark" variant="outline">
|
||||
Left
|
||||
</CButton>
|
||||
<CButton color="dark" variant="outline">
|
||||
Middle
|
||||
</CButton>
|
||||
<CButton color="dark" variant="outline">
|
||||
Right
|
||||
</CButton>
|
||||
</CButtonGroup>
|
||||
<br />
|
||||
<CButtonGroup role="group" aria-label="Default button group">
|
||||
<CButton color="dark" variant="outline">
|
||||
Left
|
||||
</CButton>
|
||||
<CButton color="dark" variant="outline">
|
||||
Middle
|
||||
</CButton>
|
||||
<CButton color="dark" variant="outline">
|
||||
Right
|
||||
</CButton>
|
||||
</CButtonGroup>
|
||||
<br />
|
||||
<CButtonGroup size="sm" role="group" aria-label="Small button group">
|
||||
<CButton color="dark" variant="outline">
|
||||
Left
|
||||
</CButton>
|
||||
<CButton color="dark" variant="outline">
|
||||
Middle
|
||||
</CButton>
|
||||
<CButton color="dark" variant="outline">
|
||||
Right
|
||||
</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button Group</strong> <span>Nesting</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Put a <code><CButtonGroup></code> inside another{' '}
|
||||
<code><CButtonGroup></code> when you need dropdown menus combined with a series
|
||||
of buttons.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/list-group#nesting">
|
||||
<CButtonGroup role="group" aria-label="Button group with nested dropdown">
|
||||
<CButton color="primary">1</CButton>
|
||||
<CButton color="primary">2</CButton>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button Group</strong> <span>Vertical variation</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Create a set of buttons that appear vertically stacked rather than horizontally.{' '}
|
||||
<strong>Split button dropdowns are not supported here.</strong>
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#vertical-variation">
|
||||
<CButtonGroup vertical role="group" aria-label="Vertical button group">
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#vertical-variation">
|
||||
<CButtonGroup vertical role="group" aria-label="Vertical button group">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#vertical-variation">
|
||||
<CButtonGroup vertical role="group" aria-label="Vertical button group">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
button
|
||||
buttonColor="danger"
|
||||
buttonVariant="outline"
|
||||
name="vbtnradio"
|
||||
id="vbtnradio1"
|
||||
autocomplete="off"
|
||||
label="Radio 1"
|
||||
checked
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
button
|
||||
buttonColor="danger"
|
||||
buttonVariant="outline"
|
||||
name="vbtnradio"
|
||||
id="vbtnradio2"
|
||||
autocomplete="off"
|
||||
label="Radio 2"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
button
|
||||
buttonColor="danger"
|
||||
buttonVariant="outline"
|
||||
name="vbtnradio"
|
||||
id="vbtnradio3"
|
||||
autocomplete="off"
|
||||
label="Radio 3"
|
||||
/>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default ButtonGroups
|
||||
399
src/views/examples/buttons/buttons/Buttons.js
Normal file
399
src/views/examples/buttons/buttons/Buttons.js
Normal file
@ -0,0 +1,399 @@
|
||||
import React from 'react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { Example } from 'src/reusable'
|
||||
|
||||
const Buttons = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
CoreUI includes a bunch of predefined buttons components, each serving its own
|
||||
semantic purpose. Buttons show what action will happen when the user clicks or touches
|
||||
it. CoreUI buttons are used to initialize operations, both in the background or
|
||||
foreground of an experience.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons">
|
||||
{['normal', 'active', 'disabled'].map((state, index) => (
|
||||
<CRow className="align-items-center mb-3" key={index}>
|
||||
<CCol xs={12} xl={2} className="mb-3 mb-xl-0">
|
||||
{state.charAt(0).toUpperCase() + state.slice(1)}
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
{[
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
].map((color, index) => (
|
||||
<CButton
|
||||
color={color}
|
||||
key={index}
|
||||
active={state === 'active'}
|
||||
disabled={state === 'disabled'}
|
||||
>
|
||||
{color.charAt(0).toUpperCase() + color.slice(1)}
|
||||
</CButton>
|
||||
))}
|
||||
<CButton color="link">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
))}
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button</strong> <small>with icons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons">
|
||||
{['normal', 'active', 'disabled'].map((state, index) => (
|
||||
<CRow className="align-items-center mb-3" key={index}>
|
||||
<CCol xs={12} xl={2} className="mb-3 mb-xl-0">
|
||||
{state.charAt(0).toUpperCase() + state.slice(1)}
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
{[
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
].map((color, index) => (
|
||||
<CButton
|
||||
color={color}
|
||||
key={index}
|
||||
active={state === 'active'}
|
||||
disabled={state === 'disabled'}
|
||||
>
|
||||
<CIcon name="cil-bell" className="me-2" />
|
||||
{color.charAt(0).toUpperCase() + color.slice(1)}
|
||||
</CButton>
|
||||
))}
|
||||
<CButton color="link">
|
||||
<CIcon name="cil-bell" className="me-2" />
|
||||
Link
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
))}
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button</strong> <small>Button components</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
The <code><CButton></code> component are designed for{' '}
|
||||
<code><button></code> , <code><a></code> or <code><input></code>{' '}
|
||||
elements (though some browsers may apply a slightly different rendering).
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
If you're using <code><CButton></code> component as <code><a></code>{' '}
|
||||
elements that are used to trigger functionality ex. collapsing content, these links
|
||||
should be given a <code>role="button"</code> to adequately communicate their meaning
|
||||
to assistive technologies such as screen readers.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons#button-components">
|
||||
<CButton component="a" color="primary" href="#" role="button">
|
||||
Link
|
||||
</CButton>
|
||||
<CButton type="submit" color="primary">
|
||||
Button
|
||||
</CButton>
|
||||
<CButton component="input" type="button" color="primary" value="Input" />
|
||||
<CButton component="input" type="submit" color="primary" value="Submit" />
|
||||
<CButton component="input" type="reset" color="primary" value="Reset" />
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button</strong> <small>outline</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
If you need a button, but without the strong background colors. Set{' '}
|
||||
<code>variant="outline"</code> prop to remove all background colors.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons#outline-buttons">
|
||||
{['normal', 'active', 'disabled'].map((state, index) => (
|
||||
<CRow className="align-items-center mb-3" key={index}>
|
||||
<CCol xs={12} xl={2} className="mb-3 mb-xl-0">
|
||||
{state.charAt(0).toUpperCase() + state.slice(1)}
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
{[
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
].map((color, index) => (
|
||||
<CButton
|
||||
color={color}
|
||||
variant="outline"
|
||||
key={index}
|
||||
active={state === 'active'}
|
||||
disabled={state === 'disabled'}
|
||||
>
|
||||
{color.charAt(0).toUpperCase() + color.slice(1)}
|
||||
</CButton>
|
||||
))}
|
||||
</CCol>
|
||||
</CRow>
|
||||
))}
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button</strong> <small>ghost</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
If you need a ghost variant of button, set <code>variant="ghost"</code> prop to remove
|
||||
all background colors.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons#ghost-buttons">
|
||||
{['normal', 'active', 'disabled'].map((state, index) => (
|
||||
<CRow className="align-items-center mb-3" key={index}>
|
||||
<CCol xs={12} xl={2} className="mb-3 mb-xl-0">
|
||||
{state.charAt(0).toUpperCase() + state.slice(1)}
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
{[
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
].map((color, index) => (
|
||||
<CButton
|
||||
color={color}
|
||||
variant="ghost"
|
||||
key={index}
|
||||
active={state === 'active'}
|
||||
disabled={state === 'disabled'}
|
||||
>
|
||||
{color.charAt(0).toUpperCase() + color.slice(1)}
|
||||
</CButton>
|
||||
))}
|
||||
</CCol>
|
||||
</CRow>
|
||||
))}
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button</strong> <small>Sizes</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for
|
||||
additional sizes.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons#sizes">
|
||||
<CButton color="primary" size="lg">
|
||||
Large button
|
||||
</CButton>
|
||||
<CButton color="secondary" size="lg">
|
||||
Large button
|
||||
</CButton>
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons#sizes">
|
||||
<CButton color="primary" size="sm">
|
||||
Small button
|
||||
</CButton>
|
||||
<CButton color="secondary" size="sm">
|
||||
Small button
|
||||
</CButton>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button</strong> <small>Pill</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons#pill-buttons">
|
||||
{[
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
].map((color, index) => (
|
||||
<CButton color={color} shape="rounded-pill" key={index}>
|
||||
{color.charAt(0).toUpperCase() + color.slice(1)}
|
||||
</CButton>
|
||||
))}
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button</strong> <small>Square</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons#square">
|
||||
{[
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
].map((color, index) => (
|
||||
<CButton color={color} shape="rounded-0" key={index}>
|
||||
{color.charAt(0).toUpperCase() + color.slice(1)}
|
||||
</CButton>
|
||||
))}
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button</strong> <small>Disabled state</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add the <code>disabled</code> boolean prop to any <code><CButton></code>{' '}
|
||||
component to make buttons look inactive. Disabled button has{' '}
|
||||
<code>pointer-events: none</code> applied to, disabling hover and active states from
|
||||
triggering.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons#disabled-state">
|
||||
<CButton color="primary" size="lg" disabled>
|
||||
Primary button
|
||||
</CButton>
|
||||
<CButton color="secondary" size="lg" disabled>
|
||||
Button
|
||||
</CButton>
|
||||
</Example>
|
||||
<p className="text-medium-emphasis small">
|
||||
Disabled buttons using the <code><a></code> component act a little different:
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
<code><a></code>s don't support the <code>disabled</code> attribute, so CoreUI
|
||||
has to add <code>.disabled</code> className to make buttons look inactive. CoreUI also
|
||||
has to add to the disabled button component <code>aria-disabled="true"</code>{' '}
|
||||
attribute to show the state of the component to assistive technologies.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons#disabled-state">
|
||||
<CButton component="a" href="#" color="primary" size="lg" disabled>
|
||||
Primary link
|
||||
</CButton>
|
||||
<CButton component="a" href="#" color="secondary" size="lg" disabled>
|
||||
Link
|
||||
</CButton>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button</strong> <small>Block buttons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Create buttons that span the full width of a parent—by using utilities.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
|
||||
<div class="d-grid gap-2">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
</Example>
|
||||
<p className="text-medium-emphasis small">
|
||||
Here we create a responsive variation, starting with vertically stacked buttons until
|
||||
the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the{' '}
|
||||
<code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize
|
||||
your browser to see them change.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
|
||||
<div class="d-grid gap-2 d-md-block">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
</Example>
|
||||
<p className="text-medium-emphasis small">
|
||||
You can adjust the width of your block buttons with grid column width classes. For
|
||||
example, for a half-width "block button", use <code>.col-6</code>. Center it
|
||||
horizontally with <code>.mx-auto</code>, too.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
|
||||
<div class="d-grid gap-2 col-6 mx-auto">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
</Example>
|
||||
<p className="text-medium-emphasis small">
|
||||
Additional utilities can be used to adjust the alignment of buttons when horizontal.
|
||||
Here we've taken our previous responsive example and added some flex utilities and a
|
||||
margin utility on the button to right align the buttons when they're no longer
|
||||
stacked.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
<CButton color="primary" className="me-md-2">
|
||||
Button
|
||||
</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Buttons
|
||||
345
src/views/examples/buttons/dropdowns/Dropdowns.js
Normal file
345
src/views/examples/buttons/dropdowns/Dropdowns.js
Normal file
@ -0,0 +1,345 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CDropdown,
|
||||
CDropdownDivider,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { Example } from 'src/reusable'
|
||||
|
||||
const Dropdowns = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Single button</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
Here's how you can put them to work with either{' '}
|
||||
<code class="css-0"><button></code> elements:
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#single-button">
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
<p class="css-0">The best part is you can do this with any button variant, too:</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#single-button">
|
||||
<>
|
||||
{['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
|
||||
(color, index) => (
|
||||
<CDropdown variant="btn-group" key={index}>
|
||||
<CDropdownToggle color={color}>{color}</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
),
|
||||
)}
|
||||
</>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Split button</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
Similarly, create split button dropdowns with virtually the same markup as single
|
||||
button dropdowns, but with the addition of boolean prop{' '}
|
||||
<code class="css-0">split</code> for proper spacing around the dropdown caret.
|
||||
</p>
|
||||
<p class="css-0">
|
||||
We use this extra class to reduce the horizontal <code class="css-0">padding</code> on
|
||||
either side of the caret by 25% and remove the <code class="css-0">margin-left</code>{' '}
|
||||
that's attached for normal button dropdowns. Those additional changes hold the caret
|
||||
centered in the split button and implement a more properly sized hit area next to the
|
||||
main button.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#split-button">
|
||||
<>
|
||||
{['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
|
||||
(color, index) => (
|
||||
<CDropdown variant="btn-group" key={index}>
|
||||
<CButton color={color}>{color}</CButton>
|
||||
<CDropdownToggle color={color} split />
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
),
|
||||
)}
|
||||
</>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Button dropdowns work with buttons of all sizes, including default and split dropdown
|
||||
buttons.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#sizing">
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="secondary" size="lg">
|
||||
Large button
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CButton color="secondary" size="lg">
|
||||
Large split button
|
||||
</CButton>
|
||||
<CDropdownToggle color="secondary" size="lg" split />
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#sizing">
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="secondary" size="sm">
|
||||
Small button
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CButton color="secondary" size="sm">
|
||||
Small split button
|
||||
</CButton>
|
||||
<CDropdownToggle color="secondary" size="sm" split />
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Single button</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
Opt into darker dropdowns to match a dark navbar or custom style by set{' '}
|
||||
<code class="css-0">dark</code> property. No changes are required to the dropdown
|
||||
items.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dark-dropdowns">
|
||||
<CDropdown dark>
|
||||
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
<p class="css-0">And putting it to use in a navbar:</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dark-dropdowns">
|
||||
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div className="container-fluid">
|
||||
<a className="navbar-brand" href="#">
|
||||
Navbar
|
||||
</a>
|
||||
<button
|
||||
className="navbar-toggler"
|
||||
type="button"
|
||||
data-coreui-toggle="collapse"
|
||||
data-coreui-target="#navbarNavDarkDropdown"
|
||||
aria-controls="navbarNavDarkDropdown"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" id="navbarNavDarkDropdown">
|
||||
<ul className="navbar-nav">
|
||||
<CDropdown dark component="li" variant="nav-item">
|
||||
<CDropdownToggle>Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Dropup</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
Trigger dropdown menus above elements by adding{' '}
|
||||
<code class="css-0">direction="dropup"</code> to the{' '}
|
||||
<code class="css-0"><CDropdown></code> component.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropup">
|
||||
<CDropdown variant="btn-group" direction="dropup">
|
||||
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group" direction="dropup">
|
||||
<CButton color="secondary">Small split button</CButton>
|
||||
<CDropdownToggle color="secondary" split />
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Dropright</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
Trigger dropdown menus at the right of the elements by adding{' '}
|
||||
<code class="css-0">direction="dropend"</code> to the{' '}
|
||||
<code class="css-0"><CDropdown></code> component.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropright">
|
||||
<CDropdown variant="btn-group" direction="dropend">
|
||||
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group" direction="dropend">
|
||||
<CButton color="secondary">Small split button</CButton>
|
||||
<CDropdownToggle color="secondary" split />
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Dropleft</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
Trigger dropdown menus at the left of the elements by adding{' '}
|
||||
<code class="css-0">direction="dropstart"</code> to the{' '}
|
||||
<code class="css-0"><CDropdown></code> component.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropleft">
|
||||
<CDropdown variant="btn-group" direction="dropstart">
|
||||
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group" direction="dropstart">
|
||||
<CDropdownToggle color="secondary" split />
|
||||
<CButton color="secondary">Small split button</CButton>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Dropdowns
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { getColor } from '@coreui/utils'
|
||||
import { CChartBar } from '@coreui/react-chartjs'
|
||||
import { CChart } from '@coreui/react-chartjs'
|
||||
|
||||
const ChartBarSimple = (props) => {
|
||||
const {
|
||||
@ -13,8 +13,8 @@ const ChartBarSimple = (props) => {
|
||||
...attributes
|
||||
} = props
|
||||
|
||||
const defaultDatasets = (() => {
|
||||
return [
|
||||
const defaultDatasets = {
|
||||
datasets: [
|
||||
{
|
||||
data: dataPoints,
|
||||
backgroundColor: getColor(backgroundColor),
|
||||
@ -23,33 +23,48 @@ const ChartBarSimple = (props) => {
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 1,
|
||||
},
|
||||
]
|
||||
})()
|
||||
],
|
||||
}
|
||||
|
||||
const defaultOptions = (() => {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
const defaultOptions = {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
})()
|
||||
y: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
// render
|
||||
return (
|
||||
<CChartBar {...attributes} datasets={defaultDatasets} options={defaultOptions} labels={label} />
|
||||
<CChart
|
||||
type="bar"
|
||||
{...attributes}
|
||||
data={defaultDatasets}
|
||||
options={defaultOptions}
|
||||
labels={label}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { getColor, deepObjectsMerge } from '@coreui/utils'
|
||||
import { CChartLine } from '@coreui/react-chartjs'
|
||||
import { getColor, getStyle, hexToRgba, deepObjectsMerge } from '@coreui/utils'
|
||||
|
||||
import { CChart } from '@coreui/react-chartjs'
|
||||
|
||||
const brandSuccess = getStyle('success') || '#4dbd74'
|
||||
const brandInfo = getStyle('info') || '#20a8d8'
|
||||
const brandDanger = getStyle('danger') || '#f86c6b'
|
||||
|
||||
const ChartLineSimple = (props) => {
|
||||
const {
|
||||
@ -38,34 +43,36 @@ const ChartLineSimple = (props) => {
|
||||
|
||||
const pointedOptions = (() => {
|
||||
return {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
offset: true,
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent',
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent',
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: Math.min.apply(Math, dataPoints) - 5,
|
||||
max: Math.max.apply(Math, dataPoints) + 5,
|
||||
},
|
||||
drawBorder: false,
|
||||
},
|
||||
],
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1,
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
@ -78,21 +85,24 @@ const ChartLineSimple = (props) => {
|
||||
|
||||
const straightOptions = (() => {
|
||||
return {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2,
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
@ -124,7 +134,8 @@ const ChartLineSimple = (props) => {
|
||||
// render
|
||||
|
||||
return (
|
||||
<CChartLine
|
||||
<CChart
|
||||
type="line"
|
||||
{...attributes}
|
||||
datasets={computedDatasets}
|
||||
options={computedOptions}
|
||||
171
src/views/examples/charts/Charts.js
Normal file
171
src/views/examples/charts/Charts.js
Normal file
@ -0,0 +1,171 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'
|
||||
import { CChart } from '@coreui/react-chartjs'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const Charts = () => {
|
||||
const random = () => Math.round(Math.random() * 100)
|
||||
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Bar Chart
|
||||
<DocsLink href="http://www.chartjs.org" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChart
|
||||
type="bar"
|
||||
data={{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
|
||||
},
|
||||
],
|
||||
}}
|
||||
labels="months"
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Doughnut Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChart
|
||||
type="doughnut"
|
||||
data={{
|
||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
|
||||
data: [40, 20, 80, 10],
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Line Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChart
|
||||
type="line"
|
||||
data={{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(220, 220, 220, 0.2)',
|
||||
borderColor: 'rgba(220, 220, 220, 1)',
|
||||
pointBackgroundColor: 'rgba(220, 220, 220, 1)',
|
||||
pointBorderColor: '#fff',
|
||||
data: [random(), random(), random(), random(), random(), random(), random()],
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(151, 187, 205, 0.2)',
|
||||
borderColor: 'rgba(151, 187, 205, 1)',
|
||||
pointBackgroundColor: 'rgba(151, 187, 205, 1)',
|
||||
pointBorderColor: '#fff',
|
||||
data: [random(), random(), random(), random(), random(), random(), random()],
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Pie Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChart
|
||||
type="pie"
|
||||
data={{
|
||||
labels: ['Red', 'Green', 'Yellow'],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
|
||||
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Polar Area Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChart
|
||||
type="polarArea"
|
||||
data={{
|
||||
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
|
||||
datasets: [
|
||||
{
|
||||
data: [11, 16, 7, 3, 14],
|
||||
backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Radar Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChart
|
||||
type="radar"
|
||||
data={{
|
||||
labels: [
|
||||
'Eating',
|
||||
'Drinking',
|
||||
'Sleeping',
|
||||
'Designing',
|
||||
'Coding',
|
||||
'Cycling',
|
||||
'Running',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(220, 220, 220, 0.2)',
|
||||
borderColor: 'rgba(220, 220, 220, 1)',
|
||||
pointBackgroundColor: 'rgba(220, 220, 220, 1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(220, 220, 220, 1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40],
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(151, 187, 205, 0.2)',
|
||||
borderColor: 'rgba(151, 187, 205, 1)',
|
||||
pointBackgroundColor: 'rgba(151, 187, 205, 1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(151, 187, 205, 1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100],
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Charts
|
||||
95
src/views/examples/charts/MainChartExample.js
Normal file
95
src/views/examples/charts/MainChartExample.js
Normal file
@ -0,0 +1,95 @@
|
||||
import React from 'react'
|
||||
import { CChart } from '@coreui/react-chartjs'
|
||||
import { getStyle, hexToRgba } from '@coreui/utils'
|
||||
|
||||
const brandSuccess = getStyle('success') || '#4dbd74'
|
||||
const brandInfo = getStyle('info') || '#20a8d8'
|
||||
const brandDanger = getStyle('danger') || '#f86c6b'
|
||||
|
||||
const MainChartExample = (attributes) => {
|
||||
const random = (min, max) => {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
let elements = 27
|
||||
const data1 = []
|
||||
const data2 = []
|
||||
const data3 = []
|
||||
|
||||
for (let i = 0; i <= elements; i++) {
|
||||
data1.push(random(50, 200))
|
||||
data2.push(random(80, 100))
|
||||
data3.push(65)
|
||||
}
|
||||
|
||||
const data = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: hexToRgba(brandInfo, 10),
|
||||
borderColor: brandInfo,
|
||||
pointHoverBackgroundColor: brandInfo,
|
||||
borderWidth: 2,
|
||||
data: data1,
|
||||
fill: true,
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandSuccess,
|
||||
pointHoverBackgroundColor: brandSuccess,
|
||||
borderWidth: 2,
|
||||
data: data2,
|
||||
},
|
||||
{
|
||||
label: 'My Third dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandDanger,
|
||||
pointHoverBackgroundColor: brandDanger,
|
||||
borderWidth: 1,
|
||||
borderDash: [8, 5],
|
||||
data: data3,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const options = {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
maxTicksLimit: 5,
|
||||
stepSize: Math.ceil(250 / 5),
|
||||
max: 250,
|
||||
},
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
return <CChart type="line" data={data} options={options} {...attributes} />
|
||||
}
|
||||
|
||||
export default MainChartExample
|
||||
@ -9,16 +9,20 @@ import {
|
||||
CWidgetProgressIcon,
|
||||
CWidgetSimple,
|
||||
} from '@coreui/react'
|
||||
import { getStyle } from '@coreui/utils'
|
||||
import { CChart } from '@coreui/react-chartjs'
|
||||
|
||||
import WidgetsBrand from './WidgetsBrand'
|
||||
import WidgetsDropdown from './WidgetsDropdown'
|
||||
|
||||
import ChartLineSimple from '../charts/ChartLineSimple'
|
||||
import ChartBarSimple from '../charts/ChartBarSimple'
|
||||
// import ChartLineSimple from '../charts/ChartLineSimple'
|
||||
// import ChartBarSimple from '../charts/ChartBarSimple'
|
||||
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const Widgets = () => {
|
||||
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
|
||||
|
||||
return (
|
||||
<>
|
||||
<WidgetsDropdown />
|
||||
@ -442,32 +446,332 @@ const Widgets = () => {
|
||||
<CRow>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple title="title" value="1,123">
|
||||
<ChartLineSimple style={{ height: '40px' }} borderColor="danger" />
|
||||
<CChart
|
||||
type="bar"
|
||||
style={{ height: '40px' }}
|
||||
data={{
|
||||
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: getStyle('--cui-danger'),
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple title="title" value="1,123">
|
||||
<ChartLineSimple style={{ height: '40px' }} borderColor="primary" />
|
||||
<CChart
|
||||
type="bar"
|
||||
style={{ height: '40px' }}
|
||||
data={{
|
||||
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: getStyle('--cui-primary'),
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple title="title" value="1,123">
|
||||
<ChartLineSimple style={{ height: '40px' }} borderColor="success" />
|
||||
<CChart
|
||||
type="bar"
|
||||
style={{ height: '40px' }}
|
||||
data={{
|
||||
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: getStyle('--cui-success'),
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple title="title" value="1,123">
|
||||
<ChartBarSimple style={{ height: '40px' }} backgroundColor="danger" />
|
||||
<CChart
|
||||
type="line"
|
||||
style={{ height: '40px' }}
|
||||
data={{
|
||||
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: getStyle('--cui-danger'),
|
||||
borderWidth: 2,
|
||||
data: [
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
maintainAspectRatio: false,
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple title="title" value="1,123">
|
||||
<ChartBarSimple style={{ height: '40px' }} backgroundColor="primary" />
|
||||
<CChart
|
||||
type="line"
|
||||
style={{ height: '40px' }}
|
||||
data={{
|
||||
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: getStyle('--cui-success'),
|
||||
borderWidth: 2,
|
||||
data: [
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
maintainAspectRatio: false,
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple title="title" value="1,123">
|
||||
<ChartBarSimple style={{ height: '40px' }} backgroundColor="success" />
|
||||
<CChart
|
||||
type="line"
|
||||
style={{ height: '40px' }}
|
||||
data={{
|
||||
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: getStyle('--cui-info'),
|
||||
borderWidth: 2,
|
||||
data: [
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
random(40, 100),
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
maintainAspectRatio: false,
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
</CRow>
|
||||
195
src/views/examples/widgets/WidgetsBrand.js
Normal file
195
src/views/examples/widgets/WidgetsBrand.js
Normal file
@ -0,0 +1,195 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { CWidgetBrand, CRow, CCol } from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { CChart } from '@coreui/react-chartjs'
|
||||
|
||||
const WidgetsBrand = ({ withCharts }) => {
|
||||
const chartOptions = {
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetBrand
|
||||
className="mb-4"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon name="cib-facebook" height="52" className="my-4 text-white" />
|
||||
{withCharts && (
|
||||
<CChart
|
||||
className="position-absolute w-100 h-100"
|
||||
type="line"
|
||||
data={{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 2,
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={chartOptions}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
values={[
|
||||
['89k', 'friends'],
|
||||
['459', 'feeds'],
|
||||
]}
|
||||
style={{
|
||||
'--cui-card-cap-bg': '#3b5998',
|
||||
}}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetBrand
|
||||
className="mb-4"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon name="cib-twitter" height="52" className="my-4 text-white" />
|
||||
{withCharts && (
|
||||
<CChart
|
||||
className="position-absolute w-100 h-100"
|
||||
type="line"
|
||||
data={{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 2,
|
||||
data: [1, 13, 9, 17, 34, 41, 38],
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={chartOptions}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
values={[
|
||||
['973k', 'followers'],
|
||||
['1.792', 'tweets'],
|
||||
]}
|
||||
style={{
|
||||
'--cui-card-cap-bg': '#00aced',
|
||||
}}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetBrand
|
||||
className="mb-4"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon name="cib-linkedin" height="52" className="my-4 text-white" />
|
||||
{withCharts && (
|
||||
<CChart
|
||||
className="position-absolute w-100 h-100"
|
||||
type="line"
|
||||
data={{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 2,
|
||||
data: [78, 81, 80, 45, 34, 12, 40],
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={chartOptions}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
values={[
|
||||
['500+', 'contacts'],
|
||||
['292', 'feeds'],
|
||||
]}
|
||||
style={{
|
||||
'--cui-card-cap-bg': '#4875b4',
|
||||
}}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetBrand
|
||||
className="mb-4"
|
||||
color="warning"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon name="cil-calendar" height="52" className="my-4 text-white" />
|
||||
{withCharts && (
|
||||
<CChart
|
||||
className="position-absolute w-100 h-100"
|
||||
type="line"
|
||||
data={{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 2,
|
||||
data: [35, 23, 56, 22, 97, 23, 64],
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={chartOptions}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
values={[
|
||||
['12+', 'events'],
|
||||
['4', 'meetings'],
|
||||
]}
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
WidgetsBrand.propTypes = {
|
||||
withCharts: PropTypes.bool,
|
||||
}
|
||||
|
||||
export default WidgetsBrand
|
||||
341
src/views/examples/widgets/WidgetsDropdown.js
Normal file
341
src/views/examples/widgets/WidgetsDropdown.js
Normal file
@ -0,0 +1,341 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CRow,
|
||||
CCol,
|
||||
CDropdown,
|
||||
CDropdownMenu,
|
||||
CDropdownItem,
|
||||
CDropdownToggle,
|
||||
CWidgetDropdown,
|
||||
} from '@coreui/react'
|
||||
import { getStyle } from '@coreui/utils'
|
||||
import { CChart } from '@coreui/react-chartjs'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const WidgetsDropdown = () => {
|
||||
// render
|
||||
return (
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
action={
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="transparent" caret={false}>
|
||||
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
{/* TODO: placement doesn't work */}
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
}
|
||||
chart={
|
||||
<CChart
|
||||
className="mt-3 mx-3"
|
||||
style={{ height: '70px' }}
|
||||
type="line"
|
||||
data={{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointBackgroundColor: getStyle('--cui-primary'),
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
min: 30,
|
||||
max: 89,
|
||||
display: false,
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1,
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
className="mb-4"
|
||||
color="info"
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
action={
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="transparent" caret={false}>
|
||||
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
}
|
||||
chart={
|
||||
<CChart
|
||||
type="line"
|
||||
className="mt-3 mx-3"
|
||||
style={{ height: '70px' }}
|
||||
data={{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointBackgroundColor: getStyle('--cui-info'),
|
||||
data: [1, 18, 9, 17, 34, 22, 11],
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
min: -9,
|
||||
max: 39,
|
||||
display: false,
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
className="mb-4"
|
||||
color="warning"
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
action={
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="transparent" caret={false}>
|
||||
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
}
|
||||
chart={
|
||||
<CChart
|
||||
type="line"
|
||||
className="mt-3"
|
||||
style={{ height: '70px' }}
|
||||
data={{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(255,255,255,.2)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
data: [78, 81, 80, 45, 34, 12, 40],
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2,
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
className="mb-4"
|
||||
color="danger"
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
action={
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="transparent" caret={false}>
|
||||
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
}
|
||||
chart={
|
||||
<CChart
|
||||
type="bar"
|
||||
className="mt-3 mx-3"
|
||||
style={{ height: '70px' }}
|
||||
data={{
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December',
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(255,255,255,.2)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
|
||||
barPercentage: 0.6,
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default WidgetsDropdown
|
||||
@ -1,173 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { CWidgetBrand, CRow, CCol } from '@coreui/react-ts'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import ChartLineSimple from '../charts/ChartLineSimple'
|
||||
|
||||
const WidgetsBrand = ({ withCharts }) => {
|
||||
// render
|
||||
|
||||
return withCharts ? (
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetBrand
|
||||
className="mb-4"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon name="cib-facebook" height="52" className="my-4 text-white" />
|
||||
<ChartLineSimple
|
||||
className="position-absolute w-100 h-100"
|
||||
backgroundColor="rgba(255,255,255,.1)"
|
||||
dataPoints={[65, 59, 84, 84, 51, 55, 40]}
|
||||
label="Friends"
|
||||
labels="months"
|
||||
/>
|
||||
</>
|
||||
}
|
||||
values={[
|
||||
['89k', 'friends'],
|
||||
['459', 'feeds'],
|
||||
]}
|
||||
style={{
|
||||
'--cui-card-cap-bg': '#3b5998',
|
||||
}}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetBrand
|
||||
className="mb-4"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon name="cib-twitter" height="52" className="my-4 text-white" />
|
||||
<ChartLineSimple
|
||||
className="position-absolute w-100 h-100"
|
||||
backgroundColor="rgba(255,255,255,.1)"
|
||||
dataPoints={[1, 13, 9, 17, 34, 41, 38]}
|
||||
label="Followers"
|
||||
labels="months"
|
||||
/>
|
||||
</>
|
||||
}
|
||||
values={[
|
||||
['973k', 'followers'],
|
||||
['1.792', 'tweets'],
|
||||
]}
|
||||
style={{
|
||||
'--cui-card-cap-bg': '#00aced',
|
||||
}}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetBrand
|
||||
className="mb-4"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon name="cib-linkedin" height="52" className="my-4 text-white" />
|
||||
<ChartLineSimple
|
||||
className="position-absolute w-100 h-100"
|
||||
backgroundColor="rgba(255,255,255,.1)"
|
||||
dataPoints={[78, 81, 80, 45, 34, 12, 40]}
|
||||
label="Contacts"
|
||||
labels="months"
|
||||
/>
|
||||
</>
|
||||
}
|
||||
values={[
|
||||
['500+', 'contacts'],
|
||||
['292', 'feeds'],
|
||||
]}
|
||||
style={{
|
||||
'--cui-card-cap-bg': '#4875b4',
|
||||
}}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetBrand
|
||||
className="mb-4"
|
||||
color="warning"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon name="cil-calendar" height="52" className="my-4 text-white" />
|
||||
<ChartLineSimple
|
||||
className="position-absolute w-100 h-100"
|
||||
backgroundColor="rgba(255,255,255,.1)"
|
||||
dataPoints={[35, 23, 56, 22, 97, 23, 64]}
|
||||
label="Followers"
|
||||
labels="months"
|
||||
/>
|
||||
</>
|
||||
}
|
||||
values={[
|
||||
['12+', 'events'],
|
||||
['4', 'meetings'],
|
||||
]}
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
) : (
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetBrand
|
||||
className="mb-4"
|
||||
headerChildren={<CIcon name="cib-twitter" height="52" className="my-4 text-white" />}
|
||||
values={[
|
||||
['89k', 'friends'],
|
||||
['459', 'feeds'],
|
||||
]}
|
||||
style={{
|
||||
'--cui-card-cap-bg': '#3b5998',
|
||||
}}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetBrand
|
||||
className="mb-4"
|
||||
headerChildren={<CIcon name="cib-twitter" height="52" className="my-4 text-white" />}
|
||||
values={[
|
||||
['973k', 'followers'],
|
||||
['1.792', 'tweets'],
|
||||
]}
|
||||
style={{
|
||||
'--cui-card-cap-bg': '#00aced',
|
||||
}}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetBrand
|
||||
className="mb-4"
|
||||
headerChildren={<CIcon name="cib-linkedin" height="52" className="my-4 text-white" />}
|
||||
values={[
|
||||
['500+', 'contacts'],
|
||||
['292', 'feeds'],
|
||||
]}
|
||||
style={{
|
||||
'--cui-card-cap-bg': '#4875b4',
|
||||
}}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetBrand
|
||||
className="mb-4"
|
||||
color="warning"
|
||||
headerChildren={<CIcon name="cil-calendar" height="52" className="my-4 text-white" />}
|
||||
values={[
|
||||
['12+', 'events'],
|
||||
['4', 'meetings'],
|
||||
]}
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
WidgetsBrand.propTypes = {
|
||||
withCharts: PropTypes.bool,
|
||||
}
|
||||
|
||||
export default WidgetsBrand
|
||||
@ -1,155 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CRow,
|
||||
CCol,
|
||||
CDropdown,
|
||||
CDropdownMenu,
|
||||
CDropdownItem,
|
||||
CDropdownToggle,
|
||||
CWidgetDropdown,
|
||||
} from '@coreui/react-ts'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import ChartLineSimple from '../charts/ChartLineSimple'
|
||||
import ChartBarSimple from '../charts/ChartBarSimple'
|
||||
|
||||
const WidgetsDropdown = () => {
|
||||
// render
|
||||
return (
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
action={
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="transparent" caret={false}>
|
||||
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
{/* TODO: placement doesn't work */}
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
}
|
||||
chart={
|
||||
<ChartLineSimple
|
||||
pointed
|
||||
className="chart-wrapper mt-3 mx-3"
|
||||
style={{ height: '70px' }}
|
||||
dataPoints={[65, 59, 84, 84, 51, 55, 40]}
|
||||
pointHoverBackgroundColor="primary"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
className="mb-4"
|
||||
color="info"
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
action={
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="transparent" caret={false}>
|
||||
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
}
|
||||
chart={
|
||||
<ChartLineSimple
|
||||
pointed
|
||||
className="mt-3 mx-3"
|
||||
style={{ height: '70px' }}
|
||||
dataPoints={[1, 18, 9, 17, 34, 22, 11]}
|
||||
pointHoverBackgroundColor="info"
|
||||
options={{ elements: { line: { tension: 0.00001 } } }}
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
className="mb-4"
|
||||
color="warning"
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
action={
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="transparent" caret={false}>
|
||||
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
}
|
||||
chart={
|
||||
<ChartLineSimple
|
||||
className="mt-3"
|
||||
style={{ height: '70px' }}
|
||||
backgroundColor="rgba(255,255,255,.2)"
|
||||
dataPoints={[78, 81, 80, 45, 34, 12, 40]}
|
||||
options={{ elements: { line: { borderWidth: 2.5 } } }}
|
||||
pointHoverBackgroundColor="warning"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
className="mb-4"
|
||||
color="danger"
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
action={
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="transparent" caret={false}>
|
||||
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
}
|
||||
chart={
|
||||
<ChartBarSimple
|
||||
className="mt-3 mx-3"
|
||||
style={{ height: '70px' }}
|
||||
backgroundColor="rgb(250, 152, 152)"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default WidgetsDropdown
|
||||
Loading…
Reference in New Issue
Block a user