modify
This commit is contained in:
pawan-dot
parent
66b77a69ec
commit
91b4ff5ecb
@ -31,12 +31,13 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@coreui/chartjs": "^3.0.0",
|
||||
|
||||
"@coreui/coreui": "^4.1.0",
|
||||
"@coreui/icons": "^2.1.0",
|
||||
"@coreui/icons-react": "^2.0.0",
|
||||
"@coreui/react": "^4.1.0",
|
||||
"@coreui/react-chartjs": "^2.0.0",
|
||||
"@coreui/utils": "^1.3.1",
|
||||
"@reduxjs/toolkit": "^1.8.2",
|
||||
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
|
||||
"axios": "^0.25.0",
|
||||
"bootstrap": "^5.1.3",
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<meta name="description" content="CoreUI for React - Open Source Bootstrap Admin Template">
|
||||
<meta name="author" content="Łukasz Holeczek">
|
||||
<meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React">
|
||||
<title>Cafe-Appy2Meet</title>
|
||||
<title>CMP-Dashboard</title>
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is added to the
|
||||
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||
|
||||
59
src/Action/categoryAction.js
Normal file
59
src/Action/categoryAction.js
Normal file
@ -0,0 +1,59 @@
|
||||
import axios from "axios";
|
||||
|
||||
|
||||
|
||||
// };
|
||||
export const createCategory = (categoryData) => async (dispatch) => {
|
||||
try {
|
||||
dispatch({
|
||||
type: "NEW_CATEGORY_REQUEST",
|
||||
});
|
||||
|
||||
const { data } = await axios.post(
|
||||
`http://localhost:5000/api/category/create`,
|
||||
categoryData,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
dispatch({
|
||||
type: "NEW_CATEGORY_SUCCESS",
|
||||
payload: data,
|
||||
});
|
||||
} catch (error) {
|
||||
dispatch({
|
||||
type: "NEW_CATEGORY_FAIL",
|
||||
payload: error.response.data.message,
|
||||
});
|
||||
}
|
||||
};
|
||||
export const viewAllCategory = () => async (dispatch) => {
|
||||
try {
|
||||
dispatch({
|
||||
type: "ALL_CATEGORY_REQUEST",
|
||||
});
|
||||
|
||||
const { data } = await axios.post(
|
||||
`http://localhost:5000/api/directory/getAll`,
|
||||
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
dispatch({
|
||||
type: "ALL_CATEGORY_SUCCESS",
|
||||
payload: data.data,
|
||||
});
|
||||
} catch (error) {
|
||||
dispatch({
|
||||
type: "ALL_CATEGORY_FAIL",
|
||||
payload: error.response.data.message,
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component } from 'react'
|
||||
import { HashRouter, Route, Switch } from 'react-router-dom'
|
||||
import { BrowserRouter, Route, Switch } from 'react-router-dom'
|
||||
import './scss/style.scss'
|
||||
import ForgotPassword from './views/pages/register/ForgotPassword'
|
||||
import NewRegister from './views/pages/register/NewRegister'
|
||||
@ -15,14 +15,14 @@ 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 Register = React.lazy(() => import('./views/pages/register/Change_password'))
|
||||
const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
|
||||
const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<HashRouter>
|
||||
<BrowserRouter>
|
||||
<React.Suspense fallback={loading}>
|
||||
<Switch>
|
||||
<Route exact path="/" name="Login Page" render={(props) => <Login {...props} />} />
|
||||
@ -44,7 +44,7 @@ class App extends Component {
|
||||
<Route path="/" name="Home" render={(props) => <DefaultLayout {...props} />} />
|
||||
</Switch>
|
||||
</React.Suspense>
|
||||
</HashRouter>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
325
src/_nav.js
325
src/_nav.js
@ -23,328 +23,29 @@ const _nav = [
|
||||
name: 'Dashboard',
|
||||
to: '/dashboard',
|
||||
icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
|
||||
// badge: {
|
||||
// color: 'info',
|
||||
// text: 'NEW',
|
||||
// },
|
||||
},
|
||||
// {
|
||||
// component: CNavTitle,
|
||||
// name: 'Theme',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Colors',
|
||||
// to: '/theme/colors',
|
||||
// icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Typography',
|
||||
// to: '/theme/typography',
|
||||
// icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
|
||||
// },
|
||||
// {
|
||||
// component: CNavTitle,
|
||||
// name: 'Components',
|
||||
// },
|
||||
// {
|
||||
// component: CNavGroup,
|
||||
// name: 'Base',
|
||||
// to: '/base',
|
||||
// icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
|
||||
// items: [
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Accordion',
|
||||
// to: '/base/accordion',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Breadcrumb',
|
||||
// to: '/base/breadcrumbs',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Cards',
|
||||
// to: '/base/cards',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Carousel',
|
||||
// to: '/base/carousels',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Collapse',
|
||||
// to: '/base/collapses',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'List group',
|
||||
// to: '/base/list-groups',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Navs & Tabs',
|
||||
// to: '/base/navs',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Pagination',
|
||||
// to: '/base/paginations',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Placeholders',
|
||||
// to: '/base/placeholders',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Popovers',
|
||||
// to: '/base/popovers',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Progress',
|
||||
// to: '/base/progress',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Spinners',
|
||||
// to: '/base/spinners',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Tables',
|
||||
// to: '/base/tables',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Tooltips',
|
||||
// to: '/base/tooltips',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// component: CNavGroup,
|
||||
// name: 'Buttons',
|
||||
// to: '/buttons',
|
||||
// icon: <CIcon icon={cilCursor} customClassName="nav-icon" />,
|
||||
// items: [
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Buttons',
|
||||
// to: '/buttons/buttons',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Buttons groups',
|
||||
// to: '/buttons/button-groups',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Dropdowns',
|
||||
// to: '/buttons/dropdowns',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// component: CNavGroup,
|
||||
// name: 'Forms',
|
||||
// icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
// items: [
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Form Control',
|
||||
// to: '/forms/form-control',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Select',
|
||||
// to: '/forms/select',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Checks & Radios',
|
||||
// to: '/forms/checks-radios',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Range',
|
||||
// to: '/forms/range',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Input Group',
|
||||
// to: '/forms/input-group',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Floating Labels',
|
||||
// to: '/forms/floating-labels',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Layout',
|
||||
// to: '/forms/layout',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Validation',
|
||||
// to: '/forms/validation',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Charts',
|
||||
// to: '/charts',
|
||||
// icon: <CIcon icon={cilChartPie} customClassName="nav-icon" />,
|
||||
// },
|
||||
// {
|
||||
// component: CNavGroup,
|
||||
// name: 'Icons',
|
||||
// icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
|
||||
// items: [
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'CoreUI Free',
|
||||
// to: '/icons/coreui-icons',
|
||||
// badge: {
|
||||
// color: 'success',
|
||||
// text: 'NEW',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'CoreUI Flags',
|
||||
// to: '/icons/flags',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'CoreUI Brands',
|
||||
// to: '/icons/brands',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// component: CNavGroup,
|
||||
// name: 'Notifications',
|
||||
// icon: <CIcon icon={cilBell} customClassName="nav-icon" />,
|
||||
// items: [
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Alerts',
|
||||
// to: '/notifications/alerts',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Badges',
|
||||
// to: '/notifications/badges',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Modal',
|
||||
// to: '/notifications/modals',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Toasts',
|
||||
// to: '/notifications/toasts',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Widgets',
|
||||
// to: '/widgets',
|
||||
// icon: <CIcon icon={cilCalculator} customClassName="nav-icon" />,
|
||||
// badge: {
|
||||
// color: 'info',
|
||||
// text: 'NEW',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// component: CNavTitle,
|
||||
// name: 'Extras',
|
||||
// },
|
||||
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Login',
|
||||
// to: '/',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Vendors',
|
||||
// to: '/vendors',
|
||||
// icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Courier',
|
||||
// to: '/courier',
|
||||
// icon: <CIcon icon={cilBell} customClassName="nav-icon" />,
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Airway Bills',
|
||||
// to: '/airwaysbill',
|
||||
// icon: <CIcon icon={cilMoney} customClassName="nav-icon" />,
|
||||
// },
|
||||
},
|
||||
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Profile',
|
||||
name: 'Category',
|
||||
icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
|
||||
to: '/profile',
|
||||
},
|
||||
|
||||
|
||||
|
||||
{
|
||||
component: CNavGroup,
|
||||
name: 'Commerce',
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Products',
|
||||
to: '/comproducts',
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Coupons',
|
||||
to: '/comcoupon',
|
||||
},
|
||||
|
||||
],
|
||||
to: '/category',
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'User Logs',
|
||||
icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
|
||||
to: '/loginUser',
|
||||
name: 'Directory',
|
||||
icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
|
||||
to: '/bisuness',
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'News',
|
||||
icon: <CIcon icon={cilNewspaper} customClassName="nav-icon" />,
|
||||
to: '/news',
|
||||
},
|
||||
|
||||
// {
|
||||
// component: CNavGroup,
|
||||
// name: 'Profile',
|
||||
// icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
|
||||
// items: [
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Display',
|
||||
// to: '/profile',
|
||||
// },
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: 'Edit',
|
||||
// to: '/edit',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
|
||||
]
|
||||
|
||||
export default _nav
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 165 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 167 KiB |
@ -2,16 +2,16 @@ export const isAutheticated = () => {
|
||||
if (typeof window == "undefined") {
|
||||
return true;
|
||||
}
|
||||
if (localStorage.getItem("auth")) {
|
||||
if (localStorage.getItem("authToken")) {
|
||||
|
||||
return JSON.parse(localStorage.getItem("auth"));
|
||||
return (localStorage.getItem("authToken"));
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const signout = () => {
|
||||
localStorage.removeItem("auth");
|
||||
localStorage.removeItem("authToken");
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -5,17 +5,10 @@ const AppFooter = () => {
|
||||
return (
|
||||
<CFooter>
|
||||
<div>
|
||||
{/* <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">
|
||||
CoreUI
|
||||
</a> */}
|
||||
<span className="ms-1">{new Date().getFullYear()} © Appy2Meet.</span>
|
||||
|
||||
<span className="ms-1">{new Date().getFullYear()} © CMP.</span>
|
||||
</div>
|
||||
{/* <div className="ms-auto">
|
||||
<span className="me-1">Powered by</span>
|
||||
<a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">
|
||||
CoreUI for React
|
||||
</a>
|
||||
</div> */}
|
||||
\
|
||||
</CFooter>
|
||||
)
|
||||
}
|
||||
|
||||
@ -29,9 +29,9 @@ const AppSidebar = () => {
|
||||
dispatch({ type: 'set', sidebarShow: visible })
|
||||
}}
|
||||
>
|
||||
<CSidebarBrand className="d-none d-md-flex" to="/">
|
||||
<CSidebarBrand className="d-none bg-info d-md-flex" to="/">
|
||||
{/* <CIcon className="sidebar-brand-full" icon={logoNegative} height={35} /> */}
|
||||
<h1>Appy2Meet</h1>
|
||||
<h1>CMP</h1>
|
||||
{/* <CIcon className="sidebar-brand-narrow" height={35} /> */}
|
||||
<CIcon className="sidebar-brand-narrow" icon={sygnet} height={35} />
|
||||
</CSidebarBrand>
|
||||
|
||||
@ -1,68 +0,0 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
import { Link } from 'react-router-dom';
|
||||
const DailyLoggedUser = (item) => {
|
||||
const [user, setUser] = useState(false);
|
||||
const token = localStorage.getItem("authToken")
|
||||
const id = item.item;
|
||||
// console.log(id)
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
|
||||
// console.log(id);
|
||||
await axios.get(
|
||||
`/api/user/getUser/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
|
||||
},
|
||||
).then(function (response) {
|
||||
console.log(response.data.user)
|
||||
|
||||
setUser(response.data.user)
|
||||
// console.log(user)
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error.response)
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
getData()
|
||||
}, [item])
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
|
||||
<tr>
|
||||
<th scope="row">{user?._id}</th>
|
||||
<td>{user?.name}</td>
|
||||
|
||||
<td>{new Date(`${user?.cafeLoginTime}`).toDateString()}<span> , {`${formatAMPM(user?.cafeLoginTime)}`}</span></td>
|
||||
{/* new Date('2022-05-24T04:33:21.021Z').toUTCString() */}
|
||||
{/* <td>@mdo</td> */}
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default DailyLoggedUser
|
||||
@ -1,94 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
import { Link } from 'react-router-dom'
|
||||
import DailyLoggedUser from './DailyLoggedUserData'
|
||||
const LoginUser = () => {
|
||||
const id = localStorage.getItem('ownerId')
|
||||
const token = localStorage.getItem("authToken")
|
||||
const [users, setUsers] = useState([])
|
||||
const [count, setCount] = useState()
|
||||
|
||||
|
||||
// console.log(id)
|
||||
|
||||
useEffect(async () => {
|
||||
|
||||
await axios.get(
|
||||
`/api/user/DailyLoginUserInCafe/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
|
||||
},
|
||||
).then(function (response) {
|
||||
// console.log(response.data)
|
||||
|
||||
|
||||
setUsers(response.data.Daily)
|
||||
// let countNo = [];
|
||||
// countNo.push(response.data.Daily)
|
||||
|
||||
// const a = (1 + countNo.length)
|
||||
// setCount(a)
|
||||
// let counter = 0;
|
||||
// for (let i = 0; i <= count.length; i++) {
|
||||
// counter++;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error.message)
|
||||
})
|
||||
// console.log(count);
|
||||
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='mb-4'>
|
||||
|
||||
<Link to="/monthlylogin"><button type="button" className="btn btn-warning float-end mb-3 ml-4"> Last Month Visit Users</button></Link>
|
||||
|
||||
<Link to="/specificDateLoginUser"><button type="button" className="btn btn-info float-end mb-3 "> Specific Date Visit</button></Link>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div><span className='mb-3 fs-4 fw-bolder'>Daily Cafe Visit User <button className="btn btn-dark mb-2 mr-3 ">{`Total Users ${users.length}`}</button></span>
|
||||
<div>
|
||||
<table className="table">
|
||||
<thead className="thead-dark ">
|
||||
<tr>
|
||||
<th scope="col"> User ID</th>
|
||||
<th scope="col">User Name</th>
|
||||
<th scope="col">Login Time </th>
|
||||
{/* <th scope="col">Handle</th> */}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{users && users.map((item, index) =>
|
||||
<DailyLoggedUser item={item} key={index} />
|
||||
)}
|
||||
|
||||
</tbody>
|
||||
|
||||
</table >
|
||||
</div >
|
||||
|
||||
</div >
|
||||
<div>
|
||||
</div>
|
||||
</div >
|
||||
</div>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default LoginUser
|
||||
@ -1,68 +0,0 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
|
||||
const MonthUserDara = (item) => {
|
||||
const [loginUser, setLoginUser] = useState(false);
|
||||
const token = localStorage.getItem("authToken")
|
||||
|
||||
const id = item.item;
|
||||
// console.log(id)
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
|
||||
// console.log(id);
|
||||
await axios.get(
|
||||
`/api/user/getUser/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
|
||||
},
|
||||
).then(function (response) {
|
||||
console.log(response.data.user)
|
||||
|
||||
setLoginUser(response.data.user)
|
||||
// console.log(user)
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error.response)
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
getData()
|
||||
}, [item])
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{loginUser &&
|
||||
<tr>
|
||||
|
||||
<th scope="row">{loginUser?._id}</th>
|
||||
<td>{loginUser?.name}</td>
|
||||
{ }
|
||||
<td>{new Date(`${loginUser?.cafeLoginTime}`).toDateString()}<span> , {`${formatAMPM(loginUser?.cafeLoginTime)}`}</span></td>
|
||||
{/* new Date('2022-05-24T04:33:21.021Z').toUTCString() */}
|
||||
{/* <td>@mdo</td> */}
|
||||
</tr>
|
||||
}
|
||||
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MonthUserDara
|
||||
@ -1,74 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
import MonthUserData from './MonthUserData';
|
||||
const MothlyLoginUser = () => {
|
||||
// const [users, setUsers] = useState(false);
|
||||
const id = localStorage.getItem('ownerId')
|
||||
const [monthlyUsers, setMonthlyUsers] = useState(false);
|
||||
const token = localStorage.getItem("authToken")
|
||||
const [mcount, setMcount] = useState()
|
||||
// console.log(id)
|
||||
useEffect(async () => {
|
||||
|
||||
await axios.get(
|
||||
`/api/user/DailyLoginUserInCafe/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
|
||||
},
|
||||
).then(function (response) {
|
||||
// console.log(response.data.MonthlyUser)
|
||||
|
||||
setMonthlyUsers(response.data.MonthlyUser)
|
||||
}).catch((error) => {
|
||||
console.log(error.message)
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
}, [])
|
||||
//change time formate
|
||||
|
||||
// console.log(monthlyUsers.length)
|
||||
// const a = console.log(a)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<span className='mb-3 fs-4 fw-bolder'>Mothaly Cafe Visit User </span>
|
||||
<button className="btn btn-dark mb-2 float-end">{`Total Users ${monthlyUsers.length}`}</button>
|
||||
<div>
|
||||
<table className="table">
|
||||
<thead className="thead-dark ">
|
||||
<tr>
|
||||
<th scope="col"> User ID</th>
|
||||
<th scope="col">User Name</th>
|
||||
<th scope="col">Login Time </th>
|
||||
{/* <th scope="col">Handle</th> */}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{monthlyUsers && monthlyUsers.map((item, index) =>
|
||||
<MonthUserData item={item} key={index} />
|
||||
)}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MothlyLoginUser
|
||||
@ -1,79 +0,0 @@
|
||||
import React, { useState } from 'react'
|
||||
import axios from 'axios'
|
||||
import DatePicker from 'react-date-picker';
|
||||
import SpecificDateData from './SpecificDateData';
|
||||
const SpecificDate = () => {
|
||||
const id = localStorage.getItem('ownerId')
|
||||
const token = localStorage.getItem("authToken")
|
||||
const [specificUsers, setSpecificUsers] = useState([])
|
||||
const [value, setOnChange] = useState(new Date());
|
||||
|
||||
const handleChange = (e) => {
|
||||
|
||||
axios.post(
|
||||
`/api/user/getUsersInCafeSpecificDate/${id}`,
|
||||
{ date: e },
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
|
||||
},
|
||||
).then(function (response) {
|
||||
console.log(response.data)
|
||||
|
||||
setSpecificUsers(response.data.unique)
|
||||
|
||||
// console.log(users)
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error.message)
|
||||
})
|
||||
}
|
||||
console.log(value)
|
||||
console.log(specificUsers.length)
|
||||
return (
|
||||
<> <div className='mb-4'>
|
||||
<span className='fs-6 fw-bolder mb-0'>Specific Date Visit's : <DatePicker onChange={(e) => { setOnChange(e); handleChange(e) }} value={value} /></span>
|
||||
<button className="btn btn-dark float-end mr-4">{`Total Users ${specificUsers.length}`}</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div><span className='mb-3 fs-4 fw-bolder'>Specific Date Visit User In Cafe </span>
|
||||
|
||||
<div>
|
||||
<table className="table">
|
||||
<thead className="thead-dark ">
|
||||
<tr>
|
||||
<th scope="col"> User ID</th>
|
||||
<th scope="col">User Name</th>
|
||||
<th scope="col">Login Time </th>
|
||||
{/* <th scope="col">Handle</th> */}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{specificUsers && specificUsers.map((item, index) =>
|
||||
<SpecificDateData item={item} key={index} />
|
||||
)}
|
||||
|
||||
</tbody>
|
||||
|
||||
</table >
|
||||
</div >
|
||||
|
||||
</div >
|
||||
<div>
|
||||
</div>
|
||||
</div >
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default SpecificDate
|
||||
@ -1,67 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
|
||||
const SpecificDateData = (item) => {
|
||||
const [specificDate, setSpecificDate] = useState(false);
|
||||
const token = localStorage.getItem("authToken")
|
||||
|
||||
const id = item.item;
|
||||
// console.log(id)
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
|
||||
// console.log(id);
|
||||
await axios.get(
|
||||
`/api/user/getUser/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
|
||||
},
|
||||
).then(function (response) {
|
||||
console.log(response.data.user)
|
||||
|
||||
setSpecificDate(response.data.user)
|
||||
// console.log(user)
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error.response)
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
getData()
|
||||
}, [item])
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{specificDate &&
|
||||
<tr>
|
||||
|
||||
<th scope="row">{specificDate?._id}</th>
|
||||
<td>{specificDate?.name}</td>
|
||||
{ }
|
||||
<td>{new Date(`${specificDate?.cafeLoginTime}`).toDateString()}<span> , {`${formatAMPM(specificDate?.cafeLoginTime)}`}</span></td>
|
||||
{/* new Date('2022-05-24T04:33:21.021Z').toUTCString() */}
|
||||
{/* <td>@mdo</td> */}
|
||||
</tr>
|
||||
}
|
||||
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SpecificDateData
|
||||
@ -22,12 +22,24 @@ import {
|
||||
cilPencil,
|
||||
} from '@coreui/icons'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import swal from 'sweetalert';
|
||||
|
||||
import avatar8 from './../../assets/images/avatars/8.jpg'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { signout } from 'src/auth'
|
||||
|
||||
// import { signout } from 'src/auth'
|
||||
import { useHistory } from "react-router-dom";
|
||||
const AppHeaderDropdown = () => {
|
||||
let history = useHistory();
|
||||
const signout = async () => {
|
||||
localStorage.removeItem('authToken')
|
||||
// let res = await axios.get(
|
||||
// `http://localhost:5000/api/user/logOut`
|
||||
// );
|
||||
// if (res.success == true) {
|
||||
swal("success!", "Logged Out", "success");
|
||||
history.push("/");
|
||||
// }
|
||||
}
|
||||
return (
|
||||
<CDropdown variant="nav-item">
|
||||
<CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
|
||||
@ -87,15 +99,15 @@ const AppHeaderDropdown = () => {
|
||||
</CBadge> */}
|
||||
</CDropdownItem>
|
||||
{/* <CDropdownDivider /> */}
|
||||
<Link to='/register'>
|
||||
<Link to='/change_password'>
|
||||
<CDropdownItem>
|
||||
<CIcon icon={cilPencil} className="me-2" />
|
||||
Change Password
|
||||
</CDropdownItem>
|
||||
</Link>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon icon={cilLockLocked} onClick={() => signout()} className="me-2" />
|
||||
Log Out
|
||||
<CIcon icon={cilLockLocked} className="me-2" />
|
||||
<span onClick={signout} >Log Out</span>
|
||||
</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
|
||||
@ -10,8 +10,8 @@ import store from './store'
|
||||
import axios from 'axios'
|
||||
|
||||
const setupAxios = () => {
|
||||
axios.defaults.baseURL = 'https://dating-api-server.herokuapp.com';
|
||||
//axios.defaults.baseURL = 'http://localhost:5000'
|
||||
// axios.defaults.baseURL = 'https://dating-api-server.herokuapp.com';
|
||||
axios.defaults.baseURL = 'http://localhost:5000'
|
||||
axios.defaults.headers = {
|
||||
'Cache-Control': 'no-cache,no-store',
|
||||
'Pragma': 'no-cache',
|
||||
|
||||
46
src/reducers/categoryReducer.js
Normal file
46
src/reducers/categoryReducer.js
Normal file
@ -0,0 +1,46 @@
|
||||
import { createReducer } from "@reduxjs/toolkit";
|
||||
|
||||
const initialState = {
|
||||
loading: true,
|
||||
};
|
||||
|
||||
export const newCategoryReducer = createReducer(
|
||||
{},
|
||||
{
|
||||
NEW_CATEGORY_REQUEST: (state) => {
|
||||
state.loading = true;
|
||||
},
|
||||
NEW_CATEGORY_SUCCESS: (state, action) => {
|
||||
state.loading = false;
|
||||
state.message = action.payload;
|
||||
},
|
||||
NEW_CATEGORY_FAIL: (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = action.payload;
|
||||
},
|
||||
CLEAR_ERRORS: (state) => {
|
||||
state.error = null;
|
||||
},
|
||||
CLEAR_MESSAGE: (state) => {
|
||||
state.message = null;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
///
|
||||
export const AllcategoryReducer = createReducer(initialState, {
|
||||
ALL_CATEGORY_REQUEST: (state) => {
|
||||
state.loading = true;
|
||||
},
|
||||
ALL_CATEGORY_SUCCESS: (state, action) => {
|
||||
state.loading = false;
|
||||
state.category = action.payload;
|
||||
},
|
||||
ALL_CATEGORY_FAIL: (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = action.payload;
|
||||
},
|
||||
CLEAR_ERRORS: (state) => {
|
||||
state.error = null;
|
||||
},
|
||||
});
|
||||
61
src/reducers/directoryReducer.js
Normal file
61
src/reducers/directoryReducer.js
Normal file
@ -0,0 +1,61 @@
|
||||
import { createReducer } from "@reduxjs/toolkit";
|
||||
|
||||
const initialState = {
|
||||
loading: true,
|
||||
};
|
||||
export const loginReducer = createReducer(
|
||||
{},
|
||||
{
|
||||
LOGIN_REQUEST: (state) => {
|
||||
state.loading = true;
|
||||
state.isAuthenticated = false;
|
||||
},
|
||||
LOGIN_SUCCESS: (state, action) => {
|
||||
state.loading = false;
|
||||
state.isAuthenticated = true;
|
||||
state.message = action.payload;
|
||||
},
|
||||
LOGIN_FAILURE: (state, action) => {
|
||||
state.loading = false;
|
||||
state.isAuthenticated = false;
|
||||
state.error = action.payload;
|
||||
},
|
||||
|
||||
LOAD_USER_REQUEST: (state) => {
|
||||
state.loading = true;
|
||||
state.isAuthenticated = false;
|
||||
},
|
||||
LOAD_USER_SUCCESS: (state, action) => {
|
||||
state.loading = false;
|
||||
state.isAuthenticated = true;
|
||||
state.user = action.payload;
|
||||
},
|
||||
LOAD_USER_FAILURE: (state, action) => {
|
||||
state.loading = false;
|
||||
state.isAuthenticated = false;
|
||||
state.error = action.payload;
|
||||
},
|
||||
|
||||
LOGOUT_REQUEST: (state) => {
|
||||
state.loading = true;
|
||||
},
|
||||
LOGOUT_SUCCESS: (state, action) => {
|
||||
state.loading = false;
|
||||
state.isAuthenticated = false;
|
||||
state.user = null;
|
||||
state.message = action.payload;
|
||||
},
|
||||
LOGOUT_FAILURE: (state, action) => {
|
||||
state.loading = false;
|
||||
state.isAuthenticated = true;
|
||||
state.error = action.payload;
|
||||
},
|
||||
|
||||
CLEAR_ERRORS: (state) => {
|
||||
state.error = null;
|
||||
},
|
||||
CLEAR_MESSAGE: (state) => {
|
||||
state.message = null;
|
||||
},
|
||||
}
|
||||
);
|
||||
169
src/routes.js
169
src/routes.js
@ -1,151 +1,50 @@
|
||||
import React from 'react'
|
||||
import Products from './views/Commerce/Products'
|
||||
import EditProducts from './views/Commerce/Editproducts'
|
||||
import LoginUser from './components/User/LoginUser'
|
||||
//Category
|
||||
import Category from './views/Category/Category'
|
||||
import EditCategory from './views/Category/EditCategory'
|
||||
import AddCategeory from './views/Category/AddCategory'
|
||||
//Bisuness
|
||||
import Bisuness from './views/Directory/Bisuness'
|
||||
import EditBisuness from "./views/Directory/EditBisuness"
|
||||
import Add_Business from './views/Directory/Add_Business'
|
||||
import View_Business from './views/Directory/View_Bisuness'
|
||||
//news
|
||||
import AddNews from "./views/News/AddNews"
|
||||
import EditNews from "./views/News/EditNews"
|
||||
import News from "./views/News/News"
|
||||
import ViewNews from "./views/News/ViewNews"
|
||||
|
||||
//user logged property
|
||||
import MothlyLoginUser from './components/User/MothlyLoginUser'
|
||||
import SpecificDate from './components/User/SpecificDate'
|
||||
import AddProduct from './views/Commerce/AddProduct'
|
||||
// import EditProducts from './views/Commerce/Editproducts'
|
||||
|
||||
const AirwaysBill = React.lazy(() => import('./views/AirwaysBill/AirwaysBill'))
|
||||
const EditBill = React.lazy(() => import('./views/AirwaysBill/EditBill'))
|
||||
const AddAirwaysBill = React.lazy(() => import('./views/AirwaysBill/AddAirwaysBill'))
|
||||
const AirwayBillDetail = React.lazy(() => import('./views/AirwaysBill/AirwayBillDetail'))
|
||||
const Courier = React.lazy(() => import('./views/Courier/Courier'))
|
||||
const EditCourier = React.lazy(() => import('./views/Courier/EditCourier'))
|
||||
const AddCourier = React.lazy(() => import('./views/Courier/AddCourier'))
|
||||
const Register = React.lazy(() => import('./views/pages/register/Register'))
|
||||
const Profile = React.lazy(() => import('./views/Profile/Profile'))
|
||||
// DashBoard
|
||||
const Change_Password = React.lazy(() => import('./views/pages/register/Change_password'))
|
||||
const EditProfile = React.lazy(() => import('./views/Profile/EditProfile'))
|
||||
const Vendor = React.lazy(() => import('./views/Vendor/Vendor'))
|
||||
const VendorDetail = React.lazy(() => import('./views/Vendor/VendorDetail'))
|
||||
const EditVendor = React.lazy(() => import('./views/Vendor/EditVendor'))
|
||||
const AddVendor = React.lazy(() => import('./views/Vendor/AddVendor'))
|
||||
|
||||
const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
|
||||
const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
|
||||
const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
|
||||
|
||||
// Base
|
||||
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 ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'))
|
||||
const Navs = React.lazy(() => import('./views/base/navs/Navs'))
|
||||
const Paginations = React.lazy(() => import('./views/base/paginations/Paginations'))
|
||||
const Placeholders = React.lazy(() => import('./views/base/placeholders/Placeholders'))
|
||||
const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'))
|
||||
const Progress = React.lazy(() => import('./views/base/progress/Progress'))
|
||||
const Spinners = React.lazy(() => import('./views/base/spinners/Spinners'))
|
||||
const Tables = React.lazy(() => import('./views/base/tables/Tables'))
|
||||
const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'))
|
||||
|
||||
// Buttons
|
||||
const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons'))
|
||||
const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups'))
|
||||
const Dropdowns = React.lazy(() => import('./views/buttons/dropdowns/Dropdowns'))
|
||||
|
||||
//Forms
|
||||
const ChecksRadios = React.lazy(() => import('./views/forms/checks-radios/ChecksRadios'))
|
||||
const FloatingLabels = React.lazy(() => import('./views/forms/floating-labels/FloatingLabels'))
|
||||
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 Charts = React.lazy(() => import('./views/charts/Charts'))
|
||||
|
||||
// Icons
|
||||
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'))
|
||||
|
||||
// Notifications
|
||||
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 Toasts = React.lazy(() => import('./views/notifications/toasts/Toasts'))
|
||||
|
||||
const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
|
||||
|
||||
const routes = [
|
||||
|
||||
{ path: '/', exact: true, name: 'Home' },
|
||||
{ path: '/register', name: 'Change Password', component: Register },
|
||||
{ path: '/change_password', name: 'Change Password', component: Change_Password },
|
||||
{ path: '/edit', name: 'Change Password', component: EditProfile },
|
||||
{ path: '/profile', name: 'Change Password', component: Profile },
|
||||
// { path: '/profile', name: 'Change Password', component: Profile },
|
||||
|
||||
//product route
|
||||
{ path: '/addproduct', name: 'Product Edit', component: AddProduct },
|
||||
{ path: '/comproducts/edit/:id', name: 'Product Edit', component: EditProducts },
|
||||
{ path: '/comproducts', name: 'Courier Products', component: Products },
|
||||
//Category route
|
||||
{ path: '/addCategory', name: 'AddCategeory', component: AddCategeory },
|
||||
{ path: '/category/edit/:id', name: 'EditCategory', component: EditCategory },
|
||||
{ path: '/category', name: 'Category', component: Category },
|
||||
|
||||
//user
|
||||
{ path: '/specificDateLoginUser', name: ' Monthly Logged in User', component: SpecificDate },
|
||||
{ path: '/monthlylogin', name: ' Monthly Logged in User', component: MothlyLoginUser },
|
||||
{ path: '/loginUser', name: 'Logged in User', component: LoginUser },
|
||||
,
|
||||
////
|
||||
{ path: '/courier', name: 'Courier', component: Courier },
|
||||
{ path: '/editcourier/:id', name: ' Edit Courier', component: EditCourier },
|
||||
{ path: '/addcourier', name: 'Courier / Add Courier', component: AddCourier },
|
||||
{ path: '/airwaysbill', name: 'Airways Bill', component: AirwaysBill },
|
||||
{ path: '/addairwaysbill', name: 'Airways Bill / Add New Entry', component: AddAirwaysBill },
|
||||
{ path: '/viewbill/:id', name: 'View Bill', component: AirwayBillDetail },
|
||||
{ path: '/editbill/:id', name: 'View Bill', component: EditBill },
|
||||
{ path: '/vendors', name: 'Vendors', component: Vendor },
|
||||
{ path: '/editvendor/:id', name: 'Edit Vendor', component: EditVendor },
|
||||
{ path: '/viewvendor/:id', name: 'View Vendor', component: VendorDetail },
|
||||
{ path: '/addvendor', name: 'Vendors / Add New Vendor', component: AddVendor },
|
||||
//Directory-Bisuness route
|
||||
{ path: '/view_bisuness/:id', name: 'view_bisuness_directory', component: View_Business },
|
||||
{ path: '/add_bisuness', name: 'Add_bisuness_directory', component: Add_Business },
|
||||
{ path: '/bisuness/edit/:id', name: 'EditBisuness', component: EditBisuness },
|
||||
{ path: '/bisuness', name: 'bisuness', component: Bisuness },
|
||||
//News route
|
||||
{ path: '/news/view/:id', name: 'ViewNews', component: ViewNews },
|
||||
{ path: '/addNews', name: 'addNews', component: AddNews },
|
||||
{ path: '/news/edit/:id', name: 'EditNews', component: EditNews },
|
||||
{ path: '/news', name: 'news', component: News },
|
||||
|
||||
//dashboard
|
||||
{ path: '/dashboard', name: 'Dashboard', component: Dashboard },
|
||||
{ path: '/theme', name: 'Theme', component: Colors, exact: true },
|
||||
{ path: '/theme/colors', name: 'Colors', component: Colors },
|
||||
{ path: '/theme/typography', name: 'Typography', component: Typography },
|
||||
{ path: '/base', name: 'Base', component: Cards, exact: true },
|
||||
{ path: '/base/accordion', name: 'Accordion', component: Accordion },
|
||||
{ path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },
|
||||
{ path: '/base/cards', name: 'Cards', component: Cards },
|
||||
{ path: '/base/carousels', name: 'Carousel', component: Carousels },
|
||||
{ path: '/base/collapses', name: 'Collapse', component: Collapses },
|
||||
{ path: '/base/list-groups', name: 'List Groups', component: ListGroups },
|
||||
{ path: '/base/navs', name: 'Navs', component: Navs },
|
||||
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
|
||||
{ path: '/base/placeholders', name: 'Placeholders', component: Placeholders },
|
||||
{ path: '/base/popovers', name: 'Popovers', component: Popovers },
|
||||
{ path: '/base/progress', name: 'Progress', component: Progress },
|
||||
{ path: '/base/spinners', name: 'Spinners', component: Spinners },
|
||||
{ path: '/base/tables', name: 'Tables', component: Tables },
|
||||
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
|
||||
{ path: '/buttons', name: 'Buttons', component: Buttons, exact: true },
|
||||
{ path: '/buttons/buttons', name: 'Buttons', component: Buttons },
|
||||
{ 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 },
|
||||
{ path: '/forms/form-control', name: 'Form Control', component: FormControl },
|
||||
{ path: '/forms/select', name: 'Select', component: Select },
|
||||
{ path: '/forms/checks-radios', name: 'Checks & Radios', component: ChecksRadios },
|
||||
{ path: '/forms/range', name: 'Range', component: Range },
|
||||
{ path: '/forms/input-group', name: 'Input Group', component: InputGroup },
|
||||
{ path: '/forms/floating-labels', name: 'Floating Labels', component: FloatingLabels },
|
||||
{ path: '/forms/layout', name: 'Layout', component: Layout },
|
||||
{ path: '/forms/validation', name: 'Validation', component: Validation },
|
||||
{ path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },
|
||||
{ path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },
|
||||
{ path: '/icons/flags', name: 'Flags', component: Flags },
|
||||
{ path: '/icons/brands', name: 'Brands', component: Brands },
|
||||
{ path: '/notifications', name: 'Notifications', component: Alerts, exact: true },
|
||||
{ path: '/notifications/alerts', name: 'Alerts', component: Alerts },
|
||||
{ path: '/notifications/badges', name: 'Badges', component: Badges },
|
||||
{ path: '/notifications/modals', name: 'Modals', component: Modals },
|
||||
{ path: '/notifications/toasts', name: 'Toasts', component: Toasts },
|
||||
{ path: '/widgets', name: 'Widgets', component: Widgets },
|
||||
]
|
||||
|
||||
export default routes
|
||||
|
||||
42
src/store.js
42
src/store.js
@ -1,17 +1,31 @@
|
||||
import { createStore } from 'redux'
|
||||
// import { createStore } from 'redux'
|
||||
|
||||
const initialState = {
|
||||
sidebarShow: true,
|
||||
}
|
||||
// const initialState = {
|
||||
// sidebarShow: true,
|
||||
// }
|
||||
|
||||
const changeState = (state = initialState, { type, ...rest }) => {
|
||||
switch (type) {
|
||||
case 'set':
|
||||
return { ...state, ...rest }
|
||||
default:
|
||||
return state
|
||||
}
|
||||
}
|
||||
// const changeState = (state = initialState, { type, ...rest }) => {
|
||||
// switch (type) {
|
||||
// case 'set':
|
||||
// return { ...state, ...rest }
|
||||
// default:
|
||||
// return state
|
||||
// }
|
||||
// }
|
||||
|
||||
const store = createStore(changeState)
|
||||
export default store
|
||||
// const store = createStore(changeState)
|
||||
// export default store
|
||||
import { configureStore } from "@reduxjs/toolkit";
|
||||
import { newCategoryReducer, AllcategoryReducer } from "./reducers/categoryReducer.js";
|
||||
import { loginReducer } from "./reducers/directoryReducer.js";
|
||||
|
||||
const store = configureStore({
|
||||
reducer: {
|
||||
|
||||
newCategory: newCategoryReducer,
|
||||
AllCategory: AllcategoryReducer,
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
export default store;
|
||||
@ -1,556 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardGroup,
|
||||
CCol,
|
||||
CContainer,
|
||||
|
||||
CForm,
|
||||
CFormInput,
|
||||
CFormSelect,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cil3d, cilAirplaneMode, cilBadge, cilBalanceScale, cilBoatAlt, cilBriefcase, cilBuilding, cilCalendar, cilGlobeAlt, cilListNumbered, cilLocationPin, cilLockLocked, cilMoney, cilNoteAdd, cilNotes, cilPeople, cilPhone, cilShareBoxed, cilUser, cilUserPlus } from '@coreui/icons'
|
||||
import { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import { isAutheticated } from 'src/auth';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import Swal from 'sweetalert2';
|
||||
import { Country } from 'country-state-city';
|
||||
|
||||
|
||||
const AddAirwaysBill = () => {
|
||||
const { token } = isAutheticated()
|
||||
const countries = Country.getAllCountries();
|
||||
const [bill, setBill] = useState({
|
||||
AWB_No: '',
|
||||
Actual_Billing: '',
|
||||
Actual_Margin: 'Andhra Pradesh',
|
||||
country: 'India',
|
||||
Actual_Weight: '',
|
||||
Client_Name: '',
|
||||
Customer_Address: "",
|
||||
Customer_Billing: "",
|
||||
Customer_Name: "",
|
||||
Customer_Phone: "",
|
||||
Date_Of_Dispatch: "",
|
||||
Dimension_Weight: "",
|
||||
Dimensions: "",
|
||||
Invoice_No: "",
|
||||
Item_Name: ""
|
||||
, Logistic_Name: "",
|
||||
Order_No: "",
|
||||
Projected_Margin: "",
|
||||
Recieved_Amount: "",
|
||||
Recieved_Date: "",
|
||||
Shipment_Charges: "",
|
||||
Shipments: "",
|
||||
Shipped_From: "",
|
||||
Sr_No: "",
|
||||
Total_Weight: "",
|
||||
})
|
||||
const [showCouriers, setShowCouriers] = useState([])
|
||||
const [showVendors, setShowVendors] = useState([])
|
||||
const [code, setCode] = useState()
|
||||
const history = useHistory()
|
||||
|
||||
useEffect(() => {
|
||||
const generateCode = () => {
|
||||
setCode(Math.round(Math.random() * 1000000000))
|
||||
}
|
||||
|
||||
|
||||
const getData = async () => {
|
||||
|
||||
const couriers = await axios.get('/api/courier',
|
||||
{
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
const vendors = await axios.get('/api/vendor/view',
|
||||
{
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
|
||||
// console.log(couriers.data.Pincode);
|
||||
// console.log(vendors.data.Stores);
|
||||
setShowVendors(vendors.data.Stores)
|
||||
setShowCouriers(couriers.data.Pincode)
|
||||
}
|
||||
getData();
|
||||
generateCode()
|
||||
}, [])
|
||||
|
||||
|
||||
const formatDate = () => {
|
||||
let today = new Date();
|
||||
let dd = String(today.getDate()).padStart(2, '0');
|
||||
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
|
||||
let yyyy = today.getFullYear();
|
||||
|
||||
today = dd + '/' + mm + '/' + yyyy;
|
||||
return today
|
||||
}
|
||||
|
||||
const handleChange = (e) => (event) => {
|
||||
setBill({ ...bill, [e]: event.target.value });
|
||||
};
|
||||
const handleClick = async () => {
|
||||
let res = await axios.post('/api/airways/add', { ...bill, code }, {
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
if ((res.data.message === "Success")) {
|
||||
console.log(res.data);
|
||||
Swal.fire({
|
||||
title: 'Done',
|
||||
text: 'Bill Added',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'ok',
|
||||
confirmButtonColor: '#303c54',
|
||||
iconColor: '#303c54'
|
||||
}).then(() => {
|
||||
history.push('/airwaysbill')
|
||||
});
|
||||
} else {
|
||||
Swal("Oops!", "Something went wrong!", "error");
|
||||
}
|
||||
}
|
||||
console.log(bill);
|
||||
|
||||
return <div className="bg-light min-vh-100 d-flex flex-row align-items-start">
|
||||
<CContainer>
|
||||
<CRow className="justify-content-start">
|
||||
<CCol md={8}>
|
||||
<CForm>
|
||||
<h1>Add New Bill</h1>
|
||||
<p className="text-medium-emphasis">Fill the fields and submit to add a new bill</p>
|
||||
{/* <CRow className='flex-row align-items-center'> */}
|
||||
{/* <CCol md={2} ><h4>ID:</h4></CCol> */}
|
||||
{/* <CCol><h6>{code}</h6></CCol> */}
|
||||
{/* <p className="text-medium-emphasis">(auto-generated)</p> */}
|
||||
{/* </CRow> */}
|
||||
{/* <CRow className='flex-row align-items-center'> */}
|
||||
{/* <CCol md={2} ><h4>Date:</h4></CCol> */}
|
||||
{/* <CCol><h6>{formatDate()}</h6></CCol> */}
|
||||
{/* <p className="text-medium-emphasis">(auto-generated)</p> */}
|
||||
{/* </CRow> */}
|
||||
{/* <CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange('vendor_name')}
|
||||
>
|
||||
<option value='India'>Select Vendor</option>{
|
||||
showVendors.map((item) =>
|
||||
<option value={item.vendor_name}>{item.vendor_name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 1"
|
||||
// autoComplete="address"
|
||||
onChange={handleChange('from_address_1')}
|
||||
/>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 2(area)"
|
||||
autoComplete="address2"
|
||||
onChange={handleChange('from_address_2')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilPeople} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="To (Name)"
|
||||
autoComplete="toname"
|
||||
onChange={handleChange('to_name')}
|
||||
/>
|
||||
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 1"
|
||||
// autoComplete="address"
|
||||
onChange={handleChange('to_address_1')}
|
||||
/>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 2(area)"
|
||||
autoComplete="address2"
|
||||
onChange={handleChange('to_address_2')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cil3d} />
|
||||
</CInputGroupText>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange('courier')}
|
||||
>
|
||||
<option value='India'>Select Courier</option>{
|
||||
showCouriers.map((item) =>
|
||||
<option value={item._id}>{item.name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
</CInputGroup> */}
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilAirplaneMode} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="AWB"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('AWB_No')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilListNumbered} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Order No
|
||||
"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Order_No')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange('Client_Name')}
|
||||
>
|
||||
<option value='India'>Select Vendor</option>{
|
||||
showVendors.map((item) =>
|
||||
<option value={item.Client_Name}>{item.vendor_name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
{/* <CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Client Name"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange(' Client_Name')}
|
||||
/>
|
||||
</CInputGroup> */}
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilBadge} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Item Name"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Item_Name')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Customer Name"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Customer_Name')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilPhone} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Customer Phone"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange(' Customer_Phone')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Customer Address"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Customer_Address')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilGlobeAlt} />
|
||||
</CInputGroupText>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange("country")}
|
||||
>
|
||||
<option value='India'>Select Country</option>{
|
||||
countries.map((item) =>
|
||||
<option value={item.name}>{item.name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilAirplaneMode} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Shipped From"
|
||||
autoComplete="AWB"
|
||||
value='India'
|
||||
onChange={handleChange('Shipped_From')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange('Logistic_Name')}
|
||||
>
|
||||
<option value='India'>Select Courier</option>{
|
||||
showCouriers.map((item) =>
|
||||
<option value={item.code}>{item.name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
{/* <CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilBuilding} />
|
||||
</CInputGroupText>
|
||||
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Logistic Name
|
||||
"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Logistic_Name')}
|
||||
/>
|
||||
</CInputGroup> */}
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilCalendar} />
|
||||
DOD
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="date"
|
||||
placeholder="Date of Dispatch
|
||||
"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Date_Of_Dispatch')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilBoatAlt} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Shipments
|
||||
"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Shipments')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cil3d} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Dimensions
|
||||
"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Dimensions')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilBalanceScale} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Dimenssion Weight
|
||||
"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Dimension_Weight')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilBalanceScale} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Actual Weight
|
||||
"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Actual_Weight')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilBalanceScale} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Total Weight
|
||||
"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Total_weight')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilMoney} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Shipment Charges
|
||||
"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Shipment_Charges')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilNotes} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Actual Billing
|
||||
"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Actual_Billing')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilNotes} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Customer Billing
|
||||
"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Customer_Billing')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilMoney} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Projceted Margin
|
||||
"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Projected_Margin')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilMoney} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Actual Margin"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Actual_Margin')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilListNumbered} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Invoice No"
|
||||
autoComplete="AWB"
|
||||
// onChange={handleChange('AWB')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilMoney} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Received Amount"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Invoice_No')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilCalendar} />
|
||||
RD
|
||||
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="date"
|
||||
placeholder="Received Date"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Recieved_Date')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
|
||||
<CButton color="dark" className="px-4" onClick={() => handleClick()}>
|
||||
Submit
|
||||
</CButton>
|
||||
|
||||
</CForm>
|
||||
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>;;
|
||||
};
|
||||
|
||||
export default AddAirwaysBill;
|
||||
@ -1,165 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
CTable,
|
||||
CTableBody,
|
||||
CTableDataCell,
|
||||
CTableHead,
|
||||
CTableHeaderCell,
|
||||
CTableRow,
|
||||
} from '@coreui/react'
|
||||
import { useParams } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import { isAutheticated } from '../../auth';
|
||||
|
||||
|
||||
|
||||
const AirwayBillDetail = () => {
|
||||
const [data, setData] = useState({});
|
||||
const { id } = useParams()
|
||||
const { token } = isAutheticated();
|
||||
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
const res = await axios.get(`/api/airways/view/${id}`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
if (res) {
|
||||
setData(res?.data?.Store)
|
||||
}
|
||||
|
||||
}
|
||||
getData();
|
||||
}, []);
|
||||
console.log(data);
|
||||
const formatDate = (date) => {
|
||||
let today = new Date(date);
|
||||
let dd = String(today.getDate()).padStart(2, '0');
|
||||
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
|
||||
let yyyy = today.getFullYear();
|
||||
|
||||
today = dd + '/' + mm + '/' + yyyy;
|
||||
return today
|
||||
}
|
||||
|
||||
|
||||
return <div >
|
||||
<h1>Bill Details</h1>
|
||||
<CTable color="dark" striped>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Unique ID</CTableHeaderCell>
|
||||
<CTableDataCell scope="col">{data._id}</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Actual Billing</CTableHeaderCell>
|
||||
<CTableDataCell scope="col">{data.Actual_Billing}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">AWB</CTableHeaderCell>
|
||||
<CTableDataCell scope="col">{data.AWB_No}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Actual Margin</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Actual_Margin}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Added On</CTableHeaderCell>
|
||||
<CTableDataCell>{formatDate(data.createdAt)}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Actual_Weight</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Actual_Weight}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Client Name</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Client_Name}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Country</CTableHeaderCell>
|
||||
<CTableDataCell scope="col">{data.Country}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Customer Address</CTableHeaderCell>
|
||||
<CTableDataCell scope="col">{data.Customer_Address}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Customer_Billing</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Customer_Billing}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Customer_Name</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Customer_Name}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Customer_Phone</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Customer_Phone}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Date Of Dispatch</CTableHeaderCell>
|
||||
<CTableDataCell>{formatDate(data.Date_Of_Dispatch)}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Dimension_Weight</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Dimension_Weight}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Dimensions</CTableHeaderCell>
|
||||
<CTableDataCell scope="col">{data.Dimensions}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Invoice No</CTableHeaderCell>
|
||||
<CTableDataCell scope="col">{data.Invoice_No}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Item_Name</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Item_Name}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Logistic_Name</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Logistic_Name}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Order_No</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Order_No}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Projected_Margin</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Projected_Margin}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Recieved_Amount</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Recieved_Amount}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Recieved_Date</CTableHeaderCell>
|
||||
<CTableDataCell scope="col">{formatDate(data.Recieved_Date)}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Shipment_Charges</CTableHeaderCell>
|
||||
<CTableDataCell scope="col">{data.Shipment_Charges}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Shipments</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Shipments}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Shipped_From</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Shipped_From}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Total_Weight</CTableHeaderCell>
|
||||
<CTableDataCell>{data.Total_Weight}</CTableDataCell>
|
||||
</CTableRow>
|
||||
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</div>;
|
||||
};
|
||||
|
||||
export default AirwayBillDetail;
|
||||
@ -1,218 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
CAvatar,
|
||||
CBadge,
|
||||
CButton,
|
||||
CButtonGroup,
|
||||
CCol,
|
||||
CFormInput,
|
||||
CFormSelect,
|
||||
CInputGroup,
|
||||
CRow,
|
||||
CTable,
|
||||
CTableHead,
|
||||
CTableHeaderCell,
|
||||
CTableRow,
|
||||
} from '@coreui/react'
|
||||
import { Link } from 'react-router-dom';
|
||||
import { isAutheticated } from 'src/auth';
|
||||
import axios from 'axios';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { ExportToExcel } from './ExportToExcel';
|
||||
|
||||
|
||||
const AirwaysBill = () => {
|
||||
const { token } = isAutheticated();
|
||||
const [data, setData] = useState([])
|
||||
const [showData, setShowData] = useState([])
|
||||
const [showVendors, setShowVendors] = useState([])
|
||||
const [showCouriers, setShowCouriers] = useState([])
|
||||
const [filter, setFilter] = useState({
|
||||
courier: '',
|
||||
vendor: '',
|
||||
state: ''
|
||||
})
|
||||
const [file, setFile] = useState(null)
|
||||
const history = useHistory()
|
||||
const fileName = 'AirwaysBill'
|
||||
let formData = new FormData();
|
||||
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
const res = await axios.get('/api/airways/view', {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
const couriers = await axios.get('/api/courier',
|
||||
{
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
const vendors = await axios.get('/api/vendor/view',
|
||||
{
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
setShowVendors(vendors.data.Stores)
|
||||
setShowCouriers(couriers.data.Pincode)
|
||||
// console.log(res.data.Stores);
|
||||
setData(res.data.Stores)
|
||||
setShowData(res.data.Stores)
|
||||
|
||||
}
|
||||
getData();
|
||||
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
filterData();
|
||||
|
||||
}, [filter.courier, filter.vendor])
|
||||
|
||||
const filterData = () => {
|
||||
|
||||
const newData = data.filter(item => item.Logistic_Name?.toLowerCase() === filter.courier?.toLowerCase() || item.Client_Name?.toLowerCase() === filter.vendor?.toLowerCase())
|
||||
if (filter.courier === '' && filter.vendor === '') {
|
||||
setShowData(data)
|
||||
} else {
|
||||
setShowData(newData)
|
||||
}
|
||||
}
|
||||
const formatDate = (date) => {
|
||||
let today = new Date(date);
|
||||
let dd = String(today.getDate()).padStart(2, '0');
|
||||
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
|
||||
let yyyy = today.getFullYear();
|
||||
|
||||
today = dd + '/' + mm + '/' + yyyy;
|
||||
return today
|
||||
}
|
||||
const handleFile = (e) => {
|
||||
setFile(e.target.files[0])
|
||||
|
||||
}
|
||||
const handleChange = (e) => (event) => {
|
||||
setFilter({ ...filter, [e]: event.target.value });
|
||||
};
|
||||
const handleClick = async () => {
|
||||
|
||||
formData.append('file', file, file.name)
|
||||
|
||||
// console.log(...formData)
|
||||
|
||||
const res = await axios.post('/api/airways/upload', formData, {
|
||||
headers: {
|
||||
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
})
|
||||
console.log(res)
|
||||
|
||||
}
|
||||
|
||||
return <div>
|
||||
<CRow><CCol sm='auto'>
|
||||
<CInputGroup className="mb-3" >
|
||||
<CFormInput type="file" id="inputGroupFile02" onChange={e => handleFile(e)} />
|
||||
<CButton component="label" color='dark' onClick={() => handleClick()}>Upload Spreadsheet</CButton>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
|
||||
<CCol sm='auto'> <Link to='/addairwaysbill'>
|
||||
<CButton className='ms-3' color="dark">+Add New Entry</CButton>
|
||||
</Link></CCol>
|
||||
<CCol sm='auto'>
|
||||
<ExportToExcel apiData={data} fileName={fileName} />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow><CCol sm='auto'>
|
||||
<CInputGroup className="mb-3" >
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange('vendor')}
|
||||
>
|
||||
<option value=''>Select Vendor</option>{
|
||||
showVendors.map((item) =>
|
||||
|
||||
<option value={item.vendor_name}>{item.vendor_name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
|
||||
<CCol sm='auto'>
|
||||
<CInputGroup className="mb-3" >
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange('courier')}
|
||||
>
|
||||
<option value=''>Select Courier</option>{
|
||||
showCouriers.map((item) =>
|
||||
|
||||
<option value={item.name}>{item.name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
|
||||
</CRow>
|
||||
<hr />
|
||||
<CTable striped hover >
|
||||
<CTableHead >
|
||||
<CTableRow>
|
||||
|
||||
<CTableHeaderCell scope="col">Order No</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Vendor</CTableHeaderCell>
|
||||
|
||||
|
||||
{/* <CTableHeaderCell scope="col">Shipped From
|
||||
</CTableHeaderCell> */}
|
||||
|
||||
<CTableHeaderCell scope="col">Courier
|
||||
</CTableHeaderCell>
|
||||
|
||||
<CTableHeaderCell scope="col">AWB No
|
||||
</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Status</CTableHeaderCell>
|
||||
|
||||
<CTableHeaderCell scope="col">Action</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<tbody>
|
||||
{(!showData ? data : showData).map(item =>
|
||||
<tr>
|
||||
<td scope="row">{item.Order_No}</td>
|
||||
<td>{item.Client_Name}</td>
|
||||
{/* <td>{item.Shipped_From}</td> */}
|
||||
<td>{item.Logistic_Name}</td>
|
||||
<td>{item.AWB_No}</td>
|
||||
<td><CBadge color='primary' >Delivered</CBadge></td>
|
||||
<td>
|
||||
<CButtonGroup role="group" aria-label="Basic mixed styles example">
|
||||
<CButton color="success" onClick={() => history.push(`/viewbill/${item._id}`)}>View</CButton>
|
||||
<CButton color="warning" onClick={() => history.push(`/editbill/${item._id}`)}>Edit</CButton>
|
||||
|
||||
</CButtonGroup>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
)}
|
||||
|
||||
</tbody>
|
||||
</CTable></div>;
|
||||
};
|
||||
|
||||
export default AirwaysBill;
|
||||
@ -1,589 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardGroup,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CFormSelect,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cil3d, cilAirplaneMode, cilBadge, cilBalanceScale, cilBoatAlt, cilBriefcase, cilBuilding, cilCalendar, cilGlobeAlt, cilListNumbered, cilLocationPin, cilLockLocked, cilMoney, cilNoteAdd, cilNotes, cilPeople, cilPhone, cilShareBoxed, cilUser, cilUserPlus } from '@coreui/icons'
|
||||
import { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import { isAutheticated } from 'src/auth';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import Swal from 'sweetalert2';
|
||||
import { Country } from 'country-state-city';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
|
||||
const AddAirwaysBill = () => {
|
||||
const { token } = isAutheticated()
|
||||
const countries = Country.getAllCountries();
|
||||
const { id } = useParams()
|
||||
const [bill, setBill] = useState({
|
||||
AWB_No: '',
|
||||
Actual_Billing: '',
|
||||
Actual_Margin: 'Andhra Pradesh',
|
||||
country: 'India',
|
||||
Actual_Weight: '',
|
||||
Client_Name: '',
|
||||
Customer_Address: "",
|
||||
Customer_Billing: "",
|
||||
Customer_Name: "",
|
||||
Customer_Phone: "",
|
||||
Date_Of_Dispatch: "",
|
||||
Dimension_Weight: "",
|
||||
Dimensions: "",
|
||||
Invoice_No: "",
|
||||
Item_Name: ""
|
||||
, Logistic_Name: "",
|
||||
Order_No: "",
|
||||
Projected_Margin: "",
|
||||
Recieved_Amount: "",
|
||||
Recieved_Date: "",
|
||||
Shipment_Charges: "",
|
||||
Shipments: "",
|
||||
Shipped_From: "",
|
||||
Sr_No: "",
|
||||
Total_Weight: "",
|
||||
})
|
||||
const [showCouriers, setShowCouriers] = useState([])
|
||||
const [showVendors, setShowVendors] = useState([])
|
||||
const [code, setCode] = useState()
|
||||
const history = useHistory()
|
||||
|
||||
useEffect(() => {
|
||||
const generateCode = () => {
|
||||
setCode(Math.round(Math.random() * 1000000000))
|
||||
}
|
||||
|
||||
|
||||
const getData = async () => {
|
||||
|
||||
const couriers = await axios.get('/api/courier',
|
||||
{
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
const vendors = await axios.get('/api/vendor/view',
|
||||
{
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
|
||||
console.log(couriers.data.Pincode);
|
||||
console.log(vendors.data.Stores);
|
||||
setShowVendors(vendors.data.Stores)
|
||||
setShowCouriers(couriers.data.Pincode)
|
||||
}
|
||||
getData();
|
||||
generateCode()
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
const res = await axios.get(`/api/airways/view/${id}`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
if (res) {
|
||||
// setBill()
|
||||
setBill(res.data.Store);
|
||||
// setData(res?.data?.Store)
|
||||
// setVendor(res?.data?.Store)
|
||||
}
|
||||
|
||||
|
||||
console.log(res.data);
|
||||
}
|
||||
getData();
|
||||
|
||||
|
||||
}, []);
|
||||
|
||||
|
||||
const formatDate = () => {
|
||||
let today = new Date();
|
||||
let dd = String(today.getDate()).padStart(2, '0');
|
||||
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
|
||||
let yyyy = today.getFullYear();
|
||||
|
||||
today = dd + '/' + mm + '/' + yyyy;
|
||||
return today
|
||||
}
|
||||
|
||||
const handleChange = (e) => (event) => {
|
||||
setBill({ ...bill, [e]: event.target.value });
|
||||
};
|
||||
const handleClick = async () => {
|
||||
let res = await axios.put(`/api/airways/${id}`, { ...bill, code }, {
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
if ((res.data.message === "Success")) {
|
||||
console.log(res.data);
|
||||
Swal.fire({
|
||||
title: 'Done',
|
||||
text: 'Bill Added',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'ok',
|
||||
confirmButtonColor: '#303c54',
|
||||
iconColor: '#303c54'
|
||||
}).then(() => {
|
||||
history.push('/airwaysbill')
|
||||
});
|
||||
} else {
|
||||
Swal("Oops!", "Something went wrong!", "error");
|
||||
}
|
||||
}
|
||||
console.log(bill);
|
||||
|
||||
return <div className="bg-light min-vh-100 d-flex flex-row align-items-start">
|
||||
<CContainer>
|
||||
<CRow className="justify-content-start">
|
||||
<CCol md={8}>
|
||||
<CForm>
|
||||
<h1>Edit Bill</h1>
|
||||
<p className="text-medium-emphasis">Fill the fields and submit to add a new bill</p>
|
||||
{/* <CRow className='flex-row align-items-center'> */}
|
||||
{/* <CCol md={2} ><h4>ID:</h4></CCol> */}
|
||||
{/* <CCol><h6>{code}</h6></CCol> */}
|
||||
{/* <p className="text-medium-emphasis">(auto-generated)</p> */}
|
||||
{/* </CRow> */}
|
||||
{/* <CRow className='flex-row align-items-center'> */}
|
||||
{/* <CCol md={2} ><h4>Date:</h4></CCol> */}
|
||||
{/* <CCol><h6>{formatDate()}</h6></CCol> */}
|
||||
{/* <p className="text-medium-emphasis">(auto-generated)</p> */}
|
||||
{/* </CRow> */}
|
||||
{/* <CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText className="edit_text">
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange('vendor_name')}
|
||||
>
|
||||
<option value='India'>Select Vendor</option>{
|
||||
showVendors.map((item) =>
|
||||
<option value={item.vendor_name}>{item.vendor_name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText className="edit_text">
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 1"
|
||||
// autoComplete="address"
|
||||
onChange={handleChange('from_address_1')}
|
||||
/>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 2(area)"
|
||||
autoComplete="address2"
|
||||
onChange={handleChange('from_address_2')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilPeople} />
|
||||
</CInputGroupText className="edit_text">
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="To (Name)"
|
||||
autoComplete="toname"
|
||||
onChange={handleChange('to_name')}
|
||||
/>
|
||||
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText className="edit_text">
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 1"
|
||||
// autoComplete="address"
|
||||
onChange={handleChange('to_address_1')}
|
||||
/>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 2(area)"
|
||||
autoComplete="address2"
|
||||
onChange={handleChange('to_address_2')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cil3d} />
|
||||
</CInputGroupText className="edit_text">
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange('courier')}
|
||||
>
|
||||
<option value='India'>Select Courier</option>{
|
||||
showCouriers.map((item) =>
|
||||
<option value={item._id}>{item.name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
</CInputGroup> */}
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilAirplaneMode} />AWB
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="AWB"
|
||||
autoComplete="AWB"
|
||||
value={bill.AWB_No}
|
||||
onChange={handleChange('AWB_No')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilListNumbered} />Order_No
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Order No
|
||||
" value={bill.Order_No}
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Order_No')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilUser} />Vendor
|
||||
</CInputGroupText>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange('Client_Name')}
|
||||
>
|
||||
<option value={bill.Client_Name}>{bill.Client_Name}</option>{
|
||||
showVendors.map((item) =>
|
||||
<option value={item.code}>{item.vendor_name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
{/* <CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText className="edit_text">
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Client Name"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange(' Client_Name')}
|
||||
/>
|
||||
</CInputGroup> */}
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilBadge} />Item_Name
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Item Name"
|
||||
autoComplete="AWB"
|
||||
value={bill.Item_Name}
|
||||
onChange={handleChange('Item_Name')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilUser} />Customer_Name
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Customer Name"
|
||||
autoComplete="AWB"
|
||||
value={bill.Customer_Name}
|
||||
onChange={handleChange('Customer_Name')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilPhone} />Customer_Phone
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Customer Phone"
|
||||
autoComplete="AWB"
|
||||
value={bill.Customer_Phone}
|
||||
onChange={handleChange(' Customer_Phone')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilLocationPin} />Customer_Address
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Customer Address"
|
||||
autoComplete="AWB"
|
||||
value={bill.Customer_Address}
|
||||
onChange={handleChange('Customer_Address')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilGlobeAlt} />country
|
||||
</CInputGroupText>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange("country")}
|
||||
>
|
||||
<option value={bill.country}>{bill.country}</option>{
|
||||
countries.map((item) =>
|
||||
<option value={item.name}>{item.name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilAirplaneMode} />Shipped_From
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Shipped From"
|
||||
autoComplete="AWB"
|
||||
value='India'
|
||||
onChange={handleChange('Shipped_From')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilUser} />Courier
|
||||
</CInputGroupText>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange('Logistic_Name')}
|
||||
>
|
||||
<option value='India'>Select Courier</option>{
|
||||
showCouriers.map((item) =>
|
||||
<option value={item.code}>{item.name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
{/* <CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilBuilding} />
|
||||
</CInputGroupText className="edit_text">
|
||||
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Logistic Name
|
||||
"
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Logistic_Name')}
|
||||
/>
|
||||
</CInputGroup> */}
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilCalendar} />
|
||||
Date_Of_Dispatch
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Date of Dispatch
|
||||
" value={formatDate(bill.Date_Of_Dispatch)}
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Date_Of_Dispatch')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilBoatAlt} />Shipments
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Shipments
|
||||
" value={bill.Shipments}
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Shipments')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cil3d} />Dimensions
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Dimensions
|
||||
" value={bill.Dimensions}
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Dimensions')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilBalanceScale} />Dimension_Weight
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Dimenssion Weight
|
||||
" value={bill.Dimension_Weight}
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Dimension_Weight')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilBalanceScale} />Actual_Weight
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Actual Weight
|
||||
" value={bill.Actual_Weight}
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Actual_Weight')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilBalanceScale} />Total_weight
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Total Weight
|
||||
" value={bill.Total_Weight}
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Total_weight')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilMoney} />Shipment_Charges
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Shipment Charges
|
||||
" value={bill.Shipment_Charges}
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Shipment_Charges')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilNotes} />Actual_Billing
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Actual Billing
|
||||
" value={bill.Actual_Billing}
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Actual_Billing')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilNotes} />Customer_Billing
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Customer Billing
|
||||
" value={bill.Customer_Billing}
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Customer_Billing')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilMoney} />Projected_Margin
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Projceted Margin
|
||||
" value={bill.Projected_Margin}
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Projected_Margin')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilMoney} />Actual_Margin
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Actual Margin"
|
||||
value={bill.Actual_Margin}
|
||||
autoComplete="AWB"
|
||||
onChange={handleChange('Actual_Margin')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilListNumbered} />Invoice_No
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Invoice No"
|
||||
autoComplete="AWB"
|
||||
value={bill.Invoice_No}
|
||||
onChange={handleChange('Invoice_No')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilMoney} />Recieved_Amount
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Received Amount"
|
||||
autoComplete="AWB"
|
||||
value={bill.Recieved_Amount}
|
||||
onChange={handleChange('Invoice_No')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText className="edit_text">
|
||||
<CIcon icon={cilCalendar} />Recieved_Date
|
||||
RD
|
||||
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Received Date"
|
||||
autoComplete="AWB"
|
||||
value={formatDate(bill.Recieved_Date)}
|
||||
onChange={handleChange('Recieved_Date')}
|
||||
/>
|
||||
</CInputGroup>
|
||||
|
||||
<CButton color="dark" className="px-4" onClick={() => handleClick()}>
|
||||
Submit
|
||||
</CButton>
|
||||
|
||||
</CForm>
|
||||
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>;;
|
||||
};
|
||||
|
||||
export default AddAirwaysBill;
|
||||
@ -1,22 +0,0 @@
|
||||
import React from 'react'
|
||||
import * as FileSaver from "file-saver";
|
||||
import * as XLSX from "xlsx";
|
||||
import { CButton } from '@coreui/react';
|
||||
|
||||
export const ExportToExcel = ({ apiData, fileName }) => {
|
||||
const fileType =
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
|
||||
const fileExtension = ".xlsx";
|
||||
|
||||
const exportToCSV = (apiData, fileName) => {
|
||||
const ws = XLSX.utils.json_to_sheet(apiData);
|
||||
const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
|
||||
const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
|
||||
const data = new Blob([excelBuffer], { type: fileType });
|
||||
FileSaver.saveAs(data, fileName + fileExtension);
|
||||
};
|
||||
|
||||
return (
|
||||
<CButton onClick={(e) => exportToCSV(apiData, fileName)} color='dark'>Export as ExcelSheet</CButton>
|
||||
);
|
||||
};
|
||||
141
src/views/Category/AddCategory.js
Normal file
141
src/views/Category/AddCategory.js
Normal file
@ -0,0 +1,141 @@
|
||||
import axios from "axios";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
//import Footer from "../../Footer";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilLockLocked, cilUser } from '@coreui/icons'
|
||||
const AddProduct = () => {
|
||||
// const { token } = isAutheticated();
|
||||
let history = useHistory();
|
||||
const [image, setImage] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const myForm = new FormData();
|
||||
|
||||
myForm.set("name", name);
|
||||
|
||||
|
||||
myForm.set("image", image);
|
||||
setLoading({ loading: true });
|
||||
// console.log(image)
|
||||
let res = await axios.post(
|
||||
`/api/category/create`, myForm,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": 'multipart/form-data',
|
||||
// Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
//console.log(res.data.data.name)
|
||||
if (res.data) {
|
||||
swal("success!", "Category Added Successfully!", "success");
|
||||
history.goBack();
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
const handleImage = (e) => {
|
||||
const files = e.target.files[0];
|
||||
// console.log(files)
|
||||
setImage(files);
|
||||
|
||||
};
|
||||
//
|
||||
const onCancel = () => {
|
||||
// window.location = "/comproducts";
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-light min-vh-70 d-flex flex-row ">
|
||||
<CContainer>
|
||||
<CRow className="align-left w-140">
|
||||
<CCol md={19} lg={27} xl={16}>
|
||||
<CCard className="mx-4">
|
||||
<CCardBody className="p-4">
|
||||
<CForm>
|
||||
<h3 className="mb-4 justify-content-center">Add Category</h3>
|
||||
<div>
|
||||
<div>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
value={name}
|
||||
placeholder="Name" />
|
||||
</CInputGroup>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
|
||||
{/* <CIcon icon={cilLockLocked} /> */}
|
||||
|
||||
<CFormInput
|
||||
type="file"
|
||||
placeholder="image"
|
||||
accept="image/*"
|
||||
required
|
||||
onChange={handleImage}
|
||||
|
||||
|
||||
/>
|
||||
</CInputGroup>
|
||||
</div>
|
||||
|
||||
<div className=" d-flex">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success btn-login waves-effect waves-light"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className=" ml-2 btn btn-warning btn-cancel waves-effect waves-light"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddProduct
|
||||
178
src/views/Category/Category.js
Normal file
178
src/views/Category/Category.js
Normal file
@ -0,0 +1,178 @@
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function Products() {
|
||||
const [category, setCategory] = useState([])
|
||||
const [state, setState] = useState({
|
||||
products: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
totalProducts: 0,
|
||||
pages: 1,
|
||||
});
|
||||
|
||||
window.scrollTo({ behavior: "smooth", top: "0px" });
|
||||
|
||||
const { products, page, limit, totalProducts, pages } = state;
|
||||
|
||||
const changeState = (newState) =>
|
||||
setState((prevState) => ({ ...prevState, ...newState }));
|
||||
|
||||
const { token } = isAutheticated();
|
||||
|
||||
const getProducts = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/category/getAll`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data.category[0].image.url)
|
||||
setCategory(res.data.category)
|
||||
// console.log(category[0].addedOn)
|
||||
changeState({
|
||||
...res.data,
|
||||
pages: Math.ceil(res.data.totalProducts / limit),
|
||||
});
|
||||
}, [limit, page, token]);
|
||||
|
||||
useEffect(() => {
|
||||
getProducts();
|
||||
}, [getProducts]);
|
||||
|
||||
// const getTotalPages = useMemo(() => {
|
||||
// const length = pages > 1 ? pages : totalProducts ? 1 : 0;
|
||||
// return Array.from({ length }, (_, i) => i + 1);
|
||||
// }, [pages, totalProducts]);
|
||||
|
||||
// console.log(getTotalPages);
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) return;
|
||||
|
||||
let res = await axios.delete(`/api/category/delete/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
console.log(res)
|
||||
if (res.data.success == true) {
|
||||
swal("success!", "Category Deleted Successfully!", "success");
|
||||
window.location.reload();
|
||||
// if (res.status === 200) window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP-Category</h4>
|
||||
<Link to="/addCategory"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Category</button></Link>
|
||||
{/* <div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">CMD-App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">CMD-Category</li>
|
||||
</ol>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Image</th>
|
||||
<th>Added On</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{category && category.map((item, index) =>
|
||||
<tr>
|
||||
<td>{item?.name}</td>
|
||||
<td>
|
||||
<img src={`${item?.image.url}`} width="50" alt="" /></td>
|
||||
<td>
|
||||
{/* {item?.addedOn} */}
|
||||
{new Date(`${item?.addedOn}`).toDateString()}<span> , {`${formatAMPM(item?.addedOn)}`}</span>
|
||||
|
||||
</td>
|
||||
|
||||
|
||||
<td>
|
||||
<Link to={`/category/edit/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(`${item._id}`)}
|
||||
className=" btn btn-danger btn-sm waves-effect waves-light btn-table ml-2"
|
||||
id="sa-params"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Products;
|
||||
152
src/views/Category/EditCategory.js
Normal file
152
src/views/Category/EditCategory.js
Normal file
@ -0,0 +1,152 @@
|
||||
import axios from "axios";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
//import Footer from "../../Footer";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilLockLocked, cilUser } from '@coreui/icons'
|
||||
const AddProduct = () => {
|
||||
// const { token } = isAutheticated();
|
||||
let history = useHistory();
|
||||
const { id } = useParams();
|
||||
// console.log(id)
|
||||
const [image, setImage] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
useEffect(async () => {
|
||||
const res = await axios.get(`/api/category/getOne/${id}`, {
|
||||
// headers: {
|
||||
// Authorization: `Bearer ${token}`,
|
||||
// },
|
||||
});
|
||||
|
||||
|
||||
setName(res.data.category.name)
|
||||
}, [id]);
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const myForm = new FormData();
|
||||
|
||||
myForm.set("name", name);
|
||||
|
||||
|
||||
myForm.set("image", image);
|
||||
setLoading({ loading: true });
|
||||
// console.log(image)
|
||||
let res = await axios.put(
|
||||
`/api/category/update/${id}`, myForm,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": 'multipart/form-data',
|
||||
// Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
//console.log(res.data.data.name)
|
||||
if (res.data) {
|
||||
swal("success!", "Category Edited Successfully!", "success");
|
||||
history.goBack();
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
const handleImage = (e) => {
|
||||
const files = e.target.files[0];
|
||||
// console.log(files)
|
||||
setImage(files);
|
||||
|
||||
};
|
||||
//
|
||||
const onCancel = () => {
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-light w-100 min-vh-70 d-flex flex-row ">
|
||||
<CContainer className="w-100 ">
|
||||
<CRow className="align-left w-140">
|
||||
<CCol md={19} lg={27} xl={16}>
|
||||
<CCard className="mr-4 mx-4">
|
||||
<CCardBody className="p-4">
|
||||
<CForm>
|
||||
<h3 className="mb-4 justify-content-center">Edit {name} Category</h3>
|
||||
<div>
|
||||
<div>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
value={name}
|
||||
placeholder="Name" />
|
||||
</CInputGroup>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
|
||||
{/* <CIcon icon={cilLockLocked} /> */}
|
||||
|
||||
<CFormInput
|
||||
type="file"
|
||||
placeholder="image"
|
||||
accept="image/*"
|
||||
required
|
||||
onChange={handleImage}
|
||||
|
||||
|
||||
/>
|
||||
</CInputGroup>
|
||||
</div>
|
||||
|
||||
<div className=" d-flex">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success btn-login waves-effect waves-light"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className=" ml-2 btn btn-warning btn-cancel waves-effect waves-light"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddProduct
|
||||
@ -1,300 +0,0 @@
|
||||
import axios from "axios";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
//import Footer from "../../Footer";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
|
||||
const AddProduct = () => {
|
||||
const { token } = isAutheticated();
|
||||
let history = useHistory();
|
||||
const [state, setstate] = useState({
|
||||
title: "",
|
||||
description: "",
|
||||
status: "",
|
||||
tax: "",
|
||||
price: "",
|
||||
taxes: [],
|
||||
loading: false,
|
||||
});
|
||||
|
||||
const { title, description, status, tax, price, taxes, loading } = state;
|
||||
|
||||
const changeState = (newState) =>
|
||||
setstate((prevState) => ({ ...prevState, ...newState }));
|
||||
|
||||
const fetchTax = useCallback(async () => {
|
||||
let res = await axios.get(`${API}/api/tax/view_tax`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (res.status === 200) changeState({ taxes: res.data });
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTax();
|
||||
}, [fetchTax]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!(title || description || tax || price)) {
|
||||
alert("Please fill required field ");
|
||||
return;
|
||||
}
|
||||
changeState({ loading: true });
|
||||
|
||||
let res = await axios.post(
|
||||
`${API}/api/product`,
|
||||
{
|
||||
title,
|
||||
description,
|
||||
status,
|
||||
tax: taxes.find((taxObj) => taxObj.name === tax)?._id,
|
||||
price,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (res.status === 200) {
|
||||
swal("success!", "Product Added Successfully!", "success");
|
||||
history.goBack();
|
||||
}
|
||||
|
||||
changeState({ loading: false });
|
||||
};
|
||||
|
||||
//
|
||||
const onCancel = () => {
|
||||
// window.location = "/comproducts";
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
|
||||
changeState({ [name]: value });
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-0">Add New Product</h4>
|
||||
<div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">Dating App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item active">Commerce</li>
|
||||
<li className="breadcrumb-item active">Add New Product</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
{/* <!-- Save options Begins--> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="form-group text-right">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success btn-login waves-effect waves-light mr-3"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className="btn btn-warning btn-cancel waves-effect waves-light mr-3"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Save options Ends--> */}
|
||||
|
||||
{/* <!-- Row 1 Begins --> */}
|
||||
<div className="row">
|
||||
{/* <!--Left Column Begins--> */}
|
||||
<div className="col-lg-8">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
for="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Title*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
value={title}
|
||||
className="form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group mb-30 width-100 row">
|
||||
<label className="col-md-4 control-label">
|
||||
Description
|
||||
</label>
|
||||
<div className="col-md-13">
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={handleChange}
|
||||
name="description"
|
||||
className="form-control input-field"
|
||||
rows="5"
|
||||
placeholder="Add description"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Left Column Ends --> */}
|
||||
|
||||
{/* <!--Right Column Begins --> */}
|
||||
<div className="col-lg-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
for="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Select Tax*
|
||||
</label>
|
||||
<select
|
||||
name="tax"
|
||||
value={tax}
|
||||
onChange={({ target: { value } }) =>
|
||||
changeState({ tax: value })
|
||||
}
|
||||
className="form-control input-field"
|
||||
>
|
||||
<option value="">--select--</option>
|
||||
{taxes?.map(({ name, tax }) => (
|
||||
<option value={name}>
|
||||
{name} {tax}%
|
||||
bvb
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
for="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Status*
|
||||
</label>
|
||||
<select
|
||||
name="status"
|
||||
value={status}
|
||||
onChange={handleChange}
|
||||
className="form-control input-field"
|
||||
>
|
||||
<option value="">--select--</option>
|
||||
<option value={true}>Active</option>
|
||||
<option value={false}>Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!--Right Column Ends --> */}
|
||||
</div>
|
||||
<div className="row">
|
||||
{/* <!--Left Column Begins--> */}
|
||||
<div className="col-lg-8">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-lg-4">
|
||||
<div className="form-group">
|
||||
<label
|
||||
for="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Price*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="price"
|
||||
onChange={handleChange}
|
||||
className="form-control input-field"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Left Column Ends --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
{/* <!-- End Page-content --> */}
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddProduct
|
||||
@ -1,326 +0,0 @@
|
||||
import axios from "axios";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
// import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import swal from 'sweetalert';
|
||||
|
||||
// import "bootstrap";
|
||||
// import "bootstrap/dist/css/bootstrap.css";
|
||||
// import "bootstrap/dist/js/bootstrap.js";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { useHistory } from "react-router-dom";
|
||||
|
||||
function EditProducts() {
|
||||
const { token } = isAutheticated();
|
||||
|
||||
let history = useHistory();
|
||||
|
||||
|
||||
const [state, setstate] = useState({
|
||||
title: "",
|
||||
description: "",
|
||||
status: "",
|
||||
tax: "",
|
||||
price: "",
|
||||
taxes: [],
|
||||
loading: false,
|
||||
});
|
||||
|
||||
const { id } = useParams();
|
||||
// console.log(id)
|
||||
|
||||
const { title, description, status, tax, price, taxes, loading } = state;
|
||||
|
||||
const changeState = (newState) =>
|
||||
setstate((prevState) => ({ ...prevState, ...newState }));
|
||||
|
||||
const fetchTax = useCallback(async () => {
|
||||
let res = await axios.get(`/api/tax/view_tax`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (res.status === 200) changeState({ taxes: res.data });
|
||||
}, [token]);
|
||||
|
||||
const fetchProduct = useCallback(async () => {
|
||||
const res = await axios.get(`/api/product/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
console.log(res.data);
|
||||
|
||||
if (res.status === 200) changeState({ ...res.data });
|
||||
}, [id, token]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTax();
|
||||
fetchProduct();
|
||||
}, [fetchTax, fetchProduct]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!(typeof tax === "object")) return;
|
||||
changeState({ tax: tax.name });
|
||||
}, [tax]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!(title || description || tax || price)) {
|
||||
alert("Please fill required field ");
|
||||
return;
|
||||
}
|
||||
changeState({ loading: true });
|
||||
|
||||
let res = await axios.put(
|
||||
`/api/product/${id}`,
|
||||
{
|
||||
title,
|
||||
description,
|
||||
status,
|
||||
tax: taxes.find((taxObj) => taxObj.name === tax)?._id,
|
||||
price,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (res.status === 200) window.location.reload();
|
||||
|
||||
changeState({ loading: false });
|
||||
swal("Edit successfully!");
|
||||
history.goBack()
|
||||
};
|
||||
const onCancel = () => {
|
||||
// window.location = "/comproducts";
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
|
||||
changeState({ [name]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className=" font-weight-bold mb-0">Edit {title} Product</h4>
|
||||
<div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">Dating App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item active">Commerce</li>
|
||||
<li className="breadcrumb-item active">
|
||||
Edit Product
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
{/* <!-- Save options Begins--> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="form-group text-right">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success mt-3 mb-0 my-1 btn btn-success btn-login waves-effect waves-light mr-1"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className=" mt-3 ml-2 btn btn-warning btn-cancel waves-effect waves-light mr-3"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Save options Ends--> */}
|
||||
|
||||
{/* <!-- Row 1 Begins --> */}
|
||||
<div className="row">
|
||||
{/* <!--Left Column Begins--> */}
|
||||
<div className="col-lg-8">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
for=" basicpill-phoneno-input"
|
||||
className=" label-100"
|
||||
>
|
||||
Title*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
value={title}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group mb-30 width-100 row">
|
||||
<label className="my-3 col-md-4 control-label">
|
||||
Description
|
||||
</label>
|
||||
<div className="mt-0 col-md-13">
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={handleChange}
|
||||
name="description"
|
||||
className="form-control input-field"
|
||||
rows="5"
|
||||
placeholder="Add description"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Left Column Ends --> */}
|
||||
|
||||
{/* <!--Right Column Begins --> */}
|
||||
<div className=" col-lg-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form>
|
||||
{/* <div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
for="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Select Tax*
|
||||
</label>
|
||||
<select
|
||||
name="tax"
|
||||
value={tax}
|
||||
onChange={({ target: { value } }) =>
|
||||
changeState({ tax: value })
|
||||
}
|
||||
className="form-control input-field"
|
||||
>
|
||||
<option value="">--select--</option>
|
||||
{taxes.map(({ name, tax }) => (
|
||||
<option value={name}>
|
||||
{name} {tax}%
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
for="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Status*
|
||||
</label>
|
||||
<select
|
||||
name="status"
|
||||
value={status}
|
||||
onChange={handleChange}
|
||||
className="form-control input-field"
|
||||
>
|
||||
<option value="">--select--</option>
|
||||
<option value={true}>Active</option>
|
||||
<option value={false}>Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!--Right Column Ends --> */}
|
||||
</div>
|
||||
<div className=" mt-4 row">
|
||||
{/* <!--Left Column Begins--> */}
|
||||
<div className="col-lg-8">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form className="">
|
||||
<div className="row">
|
||||
<div className="col-lg-4">
|
||||
<div className=" form-group">
|
||||
<label
|
||||
for=" basicpill-phoneno-input"
|
||||
className=" label-100"
|
||||
>
|
||||
Price*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="price"
|
||||
value={price}
|
||||
onChange={handleChange}
|
||||
className="form-control input-field"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Left Column Ends --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
{/* <!-- End Page-content --> */}
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditProducts;
|
||||
@ -1,291 +0,0 @@
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
// import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function Products() {
|
||||
const [state, setState] = useState({
|
||||
products: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
totalProducts: 0,
|
||||
pages: 1,
|
||||
});
|
||||
|
||||
window.scrollTo({ behavior: "smooth", top: "0px" });
|
||||
|
||||
const { products, page, limit, totalProducts, pages } = state;
|
||||
|
||||
const changeState = (newState) =>
|
||||
setState((prevState) => ({ ...prevState, ...newState }));
|
||||
|
||||
const { token } = isAutheticated();
|
||||
|
||||
const getProducts = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/product?page=${page}&limit=${limit}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res)
|
||||
|
||||
changeState({
|
||||
...res.data,
|
||||
pages: Math.ceil(res.data.totalProducts / limit),
|
||||
});
|
||||
}, [limit, page, token]);
|
||||
|
||||
useEffect(() => {
|
||||
getProducts();
|
||||
}, [getProducts]);
|
||||
|
||||
const getTotalPages = useMemo(() => {
|
||||
const length = pages > 1 ? pages : totalProducts ? 1 : 0;
|
||||
return Array.from({ length }, (_, i) => i + 1);
|
||||
}, [pages, totalProducts]);
|
||||
|
||||
// console.log(getTotalPages);
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) return;
|
||||
|
||||
let res = await axios.delete(`/api/product/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (res.status === 200) window.location.reload();
|
||||
};
|
||||
|
||||
const toggleStatus = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) {
|
||||
return;
|
||||
}
|
||||
let res = await axios.get(`/api/product/setStatus/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
if (res.status === 200) window.location.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">Commerce - Products</h4>
|
||||
<Link to="/addproduct"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Product</button></Link>
|
||||
<div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">Dating App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">Commerce - Products</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
{/* <div className="col-sm-12 col-md-6">
|
||||
<div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Show{" "}
|
||||
<select
|
||||
onChange={(e) =>
|
||||
changeState({ limit: e.target.value, page: 1 })
|
||||
}
|
||||
className="select-w custom-select custom-select-sm form-control form-control-sm"
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>{" "}
|
||||
entries
|
||||
</label>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* <div className="col-sm-12 col-md-6">
|
||||
<div className="dropdown d-block">
|
||||
<a href="/comproducts/add">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary add-btn waves-effect waves-light float-right"
|
||||
>
|
||||
<i className="fa fa-plus" aria-hidden="true"></i>{" "}
|
||||
Add New Product
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Price</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{products.map(
|
||||
({ title, _id, price, status }) =>
|
||||
title && (
|
||||
<tr key={_id}>
|
||||
<td>{title}</td>
|
||||
<td>{price}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`badge rounded-pill bg-${status ? "success" : "danger"
|
||||
} font-size-10`}
|
||||
>
|
||||
{status ? "Live" : "Suspended"}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-${status ? "danger" : "success"
|
||||
} btn-sm waves-effect waves-light btn-table ml-2`}
|
||||
onClick={() => toggleStatus(_id)}
|
||||
>
|
||||
{status ? "Suspend" : "Activate"}
|
||||
</button>
|
||||
|
||||
<Link to={`/comproducts/edit/${_id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(_id)}
|
||||
className=" btn btn-danger btn-sm waves-effect waves-light btn-table ml-2"
|
||||
id="sa-params"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* <div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-6 mb-20">
|
||||
<div
|
||||
className="dataTables_info"
|
||||
id="datatable_info"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing{" "}
|
||||
{!totalProducts
|
||||
? totalProducts
|
||||
: page * limit - (limit - 1)}{" "}
|
||||
to{" "}
|
||||
{totalProducts > limit
|
||||
? limit * page > totalProducts
|
||||
? totalProducts
|
||||
: limit * page
|
||||
: totalProducts}{" "}
|
||||
of {totalProducts} entries
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-12 col-md-6">
|
||||
<div className="dataTables_paginate paging_simple_numbers float-right">
|
||||
<ul className="pagination">
|
||||
<li
|
||||
className={`paginate_button page-item previous ${page < 2 ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
aria-controls="datatable"
|
||||
data-dt-idx="0"
|
||||
tabIndex={page - 1}
|
||||
onClick={() => changeState({ page: page - 1 })}
|
||||
className="page-link"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
</li>
|
||||
|
||||
{getTotalPages.map((pageNo) => {
|
||||
return (
|
||||
<li
|
||||
className={`paginate_button page-item ${pageNo === page ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
key={`page_no_${pageNo}`}
|
||||
value={pageNo}
|
||||
id={pageNo}
|
||||
aria-controls="datatable"
|
||||
data-dt-idx="1"
|
||||
tabIndex="0"
|
||||
className="page-link "
|
||||
onClick={() => changeState({ page: pageNo })}
|
||||
>
|
||||
{pageNo}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
||||
<li
|
||||
className={`paginate_button page-item next ${page === getTotalPages.length ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={() => changeState({ page: page + 1 })}
|
||||
tabIndex={page + 1}
|
||||
className="page-link"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Products;
|
||||
@ -1,115 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardGroup,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import Swal from 'sweetalert2';
|
||||
import { cil3d } from '@coreui/icons'
|
||||
import { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import { isAutheticated } from 'src/auth';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
const AddCourier = () => {
|
||||
const [id, setId] = useState(0);
|
||||
const [date, setDate] = useState('')
|
||||
const [courier, setCourier] = useState('')
|
||||
const { token } = isAutheticated();
|
||||
const history = useHistory()
|
||||
useEffect(() => {
|
||||
const getDate = () => {
|
||||
let today = new Date();
|
||||
let dd = String(today.getDate()).padStart(2, '0');
|
||||
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
|
||||
let yyyy = today.getFullYear();
|
||||
|
||||
today = dd + '/' + mm + '/' + yyyy;
|
||||
return today
|
||||
}
|
||||
|
||||
|
||||
const generateCode = () => {
|
||||
setId(Math.round(Math.random() * 1000000000))
|
||||
}
|
||||
generateCode()
|
||||
setDate(getDate())
|
||||
}, [])
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setCourier(value)
|
||||
}
|
||||
const handleClick = async () => {
|
||||
let res = await axios.post('/api/courier/add', { name: courier, addedOn: date, UID: id }, {
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
if ((res.data.message === "Success")) {
|
||||
Swal.fire({
|
||||
title: 'Done',
|
||||
text: 'Courier Added',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'Cool',
|
||||
confirmButtonColor: '#303c54',
|
||||
iconColor: '#303c54'
|
||||
}).then(() => {
|
||||
history.push('/courier');
|
||||
});
|
||||
} else {
|
||||
Swal("Oops!", "Something went wrong!", "error");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return <div className="bg-light min-vh-100 d-flex flex-row align-items-start">
|
||||
<CContainer>
|
||||
<CRow className="justify-content-start">
|
||||
<CCol md={8}>
|
||||
<CForm>
|
||||
<h1>Add New Courier</h1>
|
||||
<p className="text-medium-emphasis">Fill the fields and submit to add a new vendor</p>
|
||||
<CRow className=' flex-row align-items-center'>
|
||||
<CCol md={2} ><h5>Unique ID:</h5></CCol>
|
||||
<CCol><h6>{id}</h6></CCol>
|
||||
{/* <p className="text-medium-emphasis">(auto-generated)</p> */}
|
||||
</CRow>
|
||||
<CRow className=' flex-row align-items-center'>
|
||||
<CCol md={2} ><h5>Added On:</h5></CCol>
|
||||
<CCol><h6>{date}</h6></CCol>
|
||||
{/* <p className="text-medium-emphasis">(auto-generated)</p> */}
|
||||
</CRow>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cil3d} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Courier Name"
|
||||
name="courier"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CButton color="dark" className="px-4" onClick={handleClick}>
|
||||
Submit
|
||||
</CButton>
|
||||
|
||||
</CForm>
|
||||
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>;
|
||||
};
|
||||
|
||||
export default AddCourier;
|
||||
@ -1,111 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
CAvatar,
|
||||
CButton,
|
||||
CButtonGroup,
|
||||
CTable,
|
||||
CTableBody,
|
||||
CTableDataCell,
|
||||
CTableHead,
|
||||
CTableHeaderCell,
|
||||
CTableRow,
|
||||
} from '@coreui/react'
|
||||
import { Link } from 'react-router-dom';
|
||||
import { isAutheticated } from 'src/auth';
|
||||
import axios from 'axios';
|
||||
import Swal from 'sweetalert2';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
|
||||
const Courier = () => {
|
||||
const { token } = isAutheticated();
|
||||
const [data, setData] = useState([])
|
||||
const [reload, setReload] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
const res = await axios.get('/api/courier', {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
console.log(res.data);
|
||||
setData(res.data.Pincode)
|
||||
console.log(data);
|
||||
}
|
||||
getData();
|
||||
|
||||
}, [reload]);
|
||||
const handleDelete = async (id) => {
|
||||
const res = await axios.delete(`/api/courier/${id}`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
if ((res.data.message === "Success")) {
|
||||
Swal.fire({
|
||||
title: 'Updated',
|
||||
text: 'Courier Deleted',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'Cool',
|
||||
confirmButtonColor: '#303c54',
|
||||
iconColor: '#303c54'
|
||||
}).then(() => {
|
||||
// history.push('/courier');
|
||||
// location.reload();
|
||||
setReload(!reload)
|
||||
});
|
||||
} else {
|
||||
Swal("Oops!", "Something went wrong!", "error");
|
||||
}
|
||||
|
||||
}
|
||||
const formatDate = (date) => {
|
||||
let today = new Date(date);
|
||||
let dd = String(today.getDate()).padStart(2, '0');
|
||||
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
|
||||
let yyyy = today.getFullYear();
|
||||
|
||||
today = dd + '/' + mm + '/' + yyyy;
|
||||
return today
|
||||
}
|
||||
return <div>
|
||||
<Link to='/addcourier'>
|
||||
<CButton color="dark">+Add New</CButton>
|
||||
</Link>
|
||||
<hr />
|
||||
<CTable striped hover>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Courier Name</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Unique ID</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Added On</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Actions</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<tbody>
|
||||
{data.map(item =>
|
||||
<tr>
|
||||
<td scope="row">{item.name}</td>
|
||||
<td>{item._id}</td>
|
||||
{/* <td>{item.code}</td> */}
|
||||
<td>{formatDate(item.createdAt)}</td>
|
||||
<td>
|
||||
<CButtonGroup role="group" aria-label="Basic mixed styles example">
|
||||
<Link to={`/editcourier/${item._id}`}> <CButton color="warning">Edit</CButton></Link>
|
||||
<CButton color="danger" onClick={() => handleDelete(item._id)}>Delete</CButton>
|
||||
</CButtonGroup>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
</tbody>
|
||||
</CTable>
|
||||
</div>;
|
||||
};
|
||||
|
||||
export default Courier;
|
||||
@ -1,146 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardGroup,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cil3d } from '@coreui/icons'
|
||||
import { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import { isAutheticated } from 'src/auth';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import Swal from 'sweetalert2';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
const EditCourier = () => {
|
||||
// const [id, setId] = useState(0);
|
||||
const [date, setDate] = useState('')
|
||||
const [courier, setCourier] = useState()
|
||||
const { token } = isAutheticated();
|
||||
const { id } = useParams();
|
||||
const [data, setData] = useState([])
|
||||
const history = useHistory();
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
const res = await axios.get(`/api/courier/${id}`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
console.log(res.data);
|
||||
setData(res.data?.Pincode[0])
|
||||
setCourier(res.data?.Pincode[0].name)
|
||||
console.log(data);
|
||||
}
|
||||
getData();
|
||||
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const getDate = () => {
|
||||
let today = new Date();
|
||||
let dd = String(today.getDate()).padStart(2, '0');
|
||||
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
|
||||
let yyyy = today.getFullYear();
|
||||
|
||||
today = dd + '/' + mm + '/' + yyyy;
|
||||
return today
|
||||
}
|
||||
|
||||
|
||||
const generateCode = () => {
|
||||
// setId(Math.round(Math.random() * 1000000000))
|
||||
}
|
||||
generateCode()
|
||||
setDate(getDate())
|
||||
}, [])
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setCourier(value)
|
||||
}
|
||||
const handleClick = async () => {
|
||||
let res = await axios.put(`/api/courier/${id}`, { name: courier }, {
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
if ((res.data.message === "Success")) {
|
||||
Swal.fire({
|
||||
title: 'Updated',
|
||||
text: 'Courier Updated',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'Cool',
|
||||
confirmButtonColor: '#303c54',
|
||||
iconColor: '#303c54'
|
||||
}).then(() => {
|
||||
history.push('/courier');
|
||||
});
|
||||
} else {
|
||||
Swal("Oops!", "Something went wrong!", "error");
|
||||
}
|
||||
}
|
||||
const formatDate = (date) => {
|
||||
let today = new Date(date);
|
||||
let dd = String(today.getDate()).padStart(2, '0');
|
||||
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
|
||||
let yyyy = today.getFullYear();
|
||||
|
||||
today = dd + '/' + mm + '/' + yyyy;
|
||||
return today
|
||||
}
|
||||
|
||||
|
||||
return <div className="bg-light min-vh-100 d-flex flex-row align-items-start">
|
||||
<CContainer>
|
||||
<CRow className="justify-content-start">
|
||||
<CCol md={8}>
|
||||
<CForm>
|
||||
<h1>Edit Courier</h1>
|
||||
<p className="text-medium-emphasis">Fill the fields and submit to add a new vendor</p>
|
||||
<CRow className=' flex-row align-items-center'>
|
||||
<CCol md={2} ><h5>Unique ID:</h5></CCol>
|
||||
<CCol><h6>{id}</h6></CCol>
|
||||
{/* <p className="text-medium-emphasis">(auto-generated)</p> */}
|
||||
</CRow>
|
||||
<CRow className=' flex-row align-items-center'>
|
||||
<CCol md={2} ><h5>Added On:</h5></CCol>
|
||||
<CCol><h6>{formatDate(data.createdAt)}</h6></CCol>
|
||||
{/* <p className="text-medium-emphasis">(auto-generated)</p> */}
|
||||
</CRow>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cil3d} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Courier Name"
|
||||
name="courier"
|
||||
value={courier}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CButton color="dark" className="px-4" onClick={handleClick}>
|
||||
Submit
|
||||
</CButton>
|
||||
|
||||
</CForm>
|
||||
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>;
|
||||
};
|
||||
|
||||
export default EditCourier;
|
||||
464
src/views/Directory/Add_Business.js
Normal file
464
src/views/Directory/Add_Business.js
Normal file
@ -0,0 +1,464 @@
|
||||
import axios from "axios";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
// import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import { Country, State, City } from "country-state-city";
|
||||
import swal from 'sweetalert';
|
||||
|
||||
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { useHistory } from "react-router-dom";
|
||||
|
||||
const Add_Business = () => {
|
||||
const [categoryName, setCategoryName] = useState([]);
|
||||
|
||||
const { token } = isAutheticated();
|
||||
|
||||
let history = useHistory();
|
||||
const [state, setState] = useState({
|
||||
name: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
Bname: "",
|
||||
Sname: "",
|
||||
country: "",
|
||||
city: "",
|
||||
loading: false,
|
||||
description: "",
|
||||
category: "",
|
||||
status: "",
|
||||
Glocation: "",
|
||||
LinkedinUrl: "",
|
||||
FacebookUrl: "",
|
||||
InstagramUrl: ""
|
||||
});
|
||||
|
||||
|
||||
const { description, loading } = state;
|
||||
const changeState = (newState) =>
|
||||
setState((prevState) => ({ ...prevState, ...newState }));
|
||||
|
||||
|
||||
const handleChange = (e) => {
|
||||
changeState({ ...state, [e.target.name]: e.target.value })
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
const fetchCategory = useCallback(async () => {
|
||||
const res = await axios.get(`/api/category/getAll`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
console.log(res.data.category);
|
||||
setCategoryName(res.data.category)
|
||||
if (res.status === 200) changeState({ ...res.data });
|
||||
}, [token]);
|
||||
|
||||
useEffect(async () => {
|
||||
|
||||
|
||||
|
||||
|
||||
fetchCategory();
|
||||
|
||||
}, [fetchCategory]);
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!(name || description || phone || email || Bname || Sname || city)) {
|
||||
alert("Please fill required field ");
|
||||
return;
|
||||
}
|
||||
changeState({ loading: true });
|
||||
|
||||
let res = await axios.post(
|
||||
`/api/directory/create/`,
|
||||
{
|
||||
...state,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
//if (res.status === 200) window.location.reload();
|
||||
console.log(res.status == 201)
|
||||
if (res.status == 201) {
|
||||
changeState({ loading: false });
|
||||
swal("Add Business successfully!");
|
||||
history.goBack()
|
||||
}
|
||||
};
|
||||
const onCancel = () => {
|
||||
// window.location = "/comproducts";
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// console.log(state)
|
||||
return (
|
||||
<>
|
||||
<div className=" main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="form-group text-right">
|
||||
<span className=" fs-2 text-xl-start font-weight-bold float-start">Add Bisuness</span>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success mt-1 mb-0 my-1 btn btn-success btn-login waves-effect waves-light mr-1"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className=" mt-1 ml-2 btn btn-warning btn-cancel waves-effect waves-light mr-3"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Save options Ends--> */}
|
||||
|
||||
{/* <!-- Row 1 Begins --> */}
|
||||
<div className="row">
|
||||
{/* <!--Left Column Begins--> */}
|
||||
<div className="col-lg-8">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor=" basicpill-phoneno-input"
|
||||
className=" label-100"
|
||||
>
|
||||
Name*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={state.name}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor=" basicpill-phoneno-input"
|
||||
className=" label-100"
|
||||
>
|
||||
phone*
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="phone"
|
||||
value={state.phone}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Phone"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor=" basicpill-phoneno-input"
|
||||
className=" label-100"
|
||||
>
|
||||
Email*
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={state.email}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor=" basicpill-phoneno-input"
|
||||
className=" label-100"
|
||||
>
|
||||
Address*
|
||||
</label>
|
||||
<div className=" d-flex">
|
||||
<div><input
|
||||
type="text"
|
||||
name="Bname"
|
||||
value={state.Bname}
|
||||
className="mt-0 my-3 w-100 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Building Name*"
|
||||
/></div>
|
||||
<div> <input
|
||||
type="text"
|
||||
name="Sname"
|
||||
value={state.Sname}
|
||||
className="mt-0 ml-4 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Street Name*"
|
||||
/></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<select
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
required
|
||||
name="country"
|
||||
value={state.country}
|
||||
// onChange={(e) => setCountry(e.target.value)}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">Country*</option>
|
||||
{Country &&
|
||||
Country.getAllCountries().map((item) => (
|
||||
<option key={item.isoCode} value={item.isoCode}>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
|
||||
|
||||
</select>
|
||||
<select
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
requiredname='city'
|
||||
name="city"
|
||||
value={state.city}
|
||||
// onChange={(e) => setCity(e.target.value)}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">City*</option>
|
||||
{City &&
|
||||
|
||||
City.getCitiesOfCountry(state.country).map((item) => (
|
||||
<option key={item.isoCode} value={item.isoCode}>
|
||||
{item.name}
|
||||
{/* {console.log(item)} */}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group mb-30 width-100 row">
|
||||
<label className="my-3 col-md-4 control-label">
|
||||
Description
|
||||
</label>
|
||||
<div className="mt-0 col-md-10">
|
||||
<textarea
|
||||
value={state.description}
|
||||
onChange={handleChange}
|
||||
name="description"
|
||||
className="form-control input-field"
|
||||
rows="5"
|
||||
placeholder="Add description"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Left Column Ends --> */}
|
||||
|
||||
{/* <!--Right Column Begins --> */}
|
||||
<div className=" col-lg-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Category*
|
||||
</label>
|
||||
|
||||
<select
|
||||
name="category"
|
||||
value={state.category}
|
||||
onChange={handleChange}
|
||||
className="form-control input-field"
|
||||
>
|
||||
<option value="">--select--</option>
|
||||
{categoryName && categoryName.map(item =>
|
||||
<option>{item?.name}</option>
|
||||
|
||||
)}
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Status*
|
||||
</label>
|
||||
<select
|
||||
name="status"
|
||||
value={state.status}
|
||||
onChange={handleChange}
|
||||
className="form-control input-field"
|
||||
>
|
||||
<option value="">--select--</option>
|
||||
<option value={true}>Active</option>
|
||||
<option value={false}>Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Google Location
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="Glocation"
|
||||
value={state.Glocation}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Google Location(Optional)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Linkedin URL
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="LinkedinUrl"
|
||||
value={state.LinkedinUrl}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Linkedin URL (Optional)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Facebook URL
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="FacebookUrl"
|
||||
value={state.FacebookUrl}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Facebook URL (Optional)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Instagram URL
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="InstagramUrl"
|
||||
value={state.InstagramUrl}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Instagram URL (Optional)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!--Right Column Ends --> */}
|
||||
</div>
|
||||
<div className=" mt-4 row">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
{/* <!-- End Page-content --> */}
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Add_Business
|
||||
292
src/views/Directory/Bisuness.js
Normal file
292
src/views/Directory/Bisuness.js
Normal file
@ -0,0 +1,292 @@
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
// import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
const Bisuness = () => {
|
||||
const [bisuness, setBisuness] = useState([])
|
||||
|
||||
|
||||
|
||||
const { token } = isAutheticated();
|
||||
|
||||
const getProducts = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/directory/getAll`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data.directory)
|
||||
setBisuness(res.data.directory)
|
||||
// changeState({
|
||||
// ...res.data,
|
||||
// pages: Math.ceil(res.data.totalProducts / limit),
|
||||
// });
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getProducts();
|
||||
}, [getProducts]);
|
||||
|
||||
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) return;
|
||||
|
||||
let res = await axios.delete(`/api/directory/delete/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
// console.log(res)
|
||||
|
||||
if (res.data.success == true) {
|
||||
swal("success!", "Directory Deleted Successfully!", "success");
|
||||
window.location.reload();
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const toggleStatus = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) {
|
||||
return;
|
||||
}
|
||||
let res = await axios.get(`/api/product/setStatus/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
if (res.status === 200) window.location.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">Bisuness-Directory</h4>
|
||||
<Link to="/add_bisuness"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Bisuness</button></Link>
|
||||
{/* <div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">Dating App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">Commerce - Products</li>
|
||||
</ol>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
{/* <div className="col-sm-12 col-md-6">
|
||||
<div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Show{" "}
|
||||
<select
|
||||
onChange={(e) =>
|
||||
changeState({ limit: e.target.value, page: 1 })
|
||||
}
|
||||
className="select-w custom-select custom-select-sm form-control form-control-sm"
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>{" "}
|
||||
entries
|
||||
</label>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* <div className="col-sm-12 col-md-6">
|
||||
<div className="dropdown d-block">
|
||||
<a href="/comproducts/add">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary add-btn waves-effect waves-light float-right"
|
||||
>
|
||||
<i className="fa fa-plus" aria-hidden="true"></i>{" "}
|
||||
Add New Product
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Category</th>
|
||||
<th>City</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{bisuness.map((item) =>
|
||||
|
||||
<tr>
|
||||
<td>{item?.name} </td>
|
||||
<td>{item?.category}</td>
|
||||
<td>{item?.city}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`badge rounded-pill bg-${status ? "success" : "danger"
|
||||
} font-size-10`}
|
||||
>
|
||||
{status ? "Live" : "Suspended"}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-${status ? "danger" : "success"
|
||||
} btn-sm waves-effect waves-light btn-table ml-1`}
|
||||
onClick={() => toggleStatus('_id')}
|
||||
>
|
||||
{status ? "Suspend" : "Activate"}
|
||||
</button>
|
||||
<Link to={`/view_bisuness/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 btn btn-info btn-sm waves-effect waves-light btn-table ml-1"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<Link to={`/bisuness/edit/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 btn btn-primary btn-sm waves-effect waves-light btn-table ml-1"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(item._id)}
|
||||
className=" btn btn-danger btn-sm waves-effect waves-light btn-table ml-1"
|
||||
id="sa-params"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* <div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-6 mb-20">
|
||||
<div
|
||||
className="dataTables_info"
|
||||
id="datatable_info"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing{" "}
|
||||
{!totalProducts
|
||||
? totalProducts
|
||||
: page * limit - (limit - 1)}{" "}
|
||||
to{" "}
|
||||
{totalProducts > limit
|
||||
? limit * page > totalProducts
|
||||
? totalProducts
|
||||
: limit * page
|
||||
: totalProducts}{" "}
|
||||
of {totalProducts} entries
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-12 col-md-6">
|
||||
<div className="dataTables_paginate paging_simple_numbers float-right">
|
||||
<ul className="pagination">
|
||||
<li
|
||||
className={`paginate_button page-item previous ${page < 2 ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
aria-controls="datatable"
|
||||
data-dt-idx="0"
|
||||
tabIndex={page - 1}
|
||||
onClick={() => changeState({ page: page - 1 })}
|
||||
className="page-link"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
</li>
|
||||
|
||||
{getTotalPages.map((pageNo) => {
|
||||
return (
|
||||
<li
|
||||
className={`paginate_button page-item ${pageNo === page ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
key={`page_no_${pageNo}`}
|
||||
value={pageNo}
|
||||
id={pageNo}
|
||||
aria-controls="datatable"
|
||||
data-dt-idx="1"
|
||||
tabIndex="0"
|
||||
className="page-link "
|
||||
onClick={() => changeState({ page: pageNo })}
|
||||
>
|
||||
{pageNo}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
||||
<li
|
||||
className={`paginate_button page-item next ${page === getTotalPages.length ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={() => changeState({ page: page + 1 })}
|
||||
tabIndex={page + 1}
|
||||
className="page-link"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Bisuness
|
||||
515
src/views/Directory/EditBisuness.js
Normal file
515
src/views/Directory/EditBisuness.js
Normal file
@ -0,0 +1,515 @@
|
||||
import axios from "axios";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
// import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import { Country, State, City } from "country-state-city";
|
||||
import swal from 'sweetalert';
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { useHistory } from "react-router-dom";
|
||||
|
||||
const EditBisuness = () => {
|
||||
const [categoryName, setCategoryName] = useState([]);
|
||||
const { token } = isAutheticated();
|
||||
|
||||
let history = useHistory();
|
||||
const [state, setState] = useState({
|
||||
name: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
Building_Name: "",
|
||||
Street_Name: "",
|
||||
country: "",
|
||||
city: "",
|
||||
loading: false,
|
||||
description: "",
|
||||
category: "",
|
||||
status: "",
|
||||
Glocation: "",
|
||||
LinkedinUrl: "",
|
||||
FacebookUrl: "",
|
||||
InstagramUrl: ""
|
||||
});
|
||||
|
||||
const { id } = useParams();
|
||||
// console.log(id)
|
||||
|
||||
const { description, loading } = state;
|
||||
|
||||
|
||||
const changeState = (newState) =>
|
||||
setState((prevState) => ({ ...prevState, ...newState }));
|
||||
|
||||
|
||||
|
||||
const handleChange = (e) => {
|
||||
changeState({ ...state, [e.target.name]: e.target.value })
|
||||
|
||||
};
|
||||
|
||||
|
||||
//category
|
||||
const fetchCategory = useCallback(async () => {
|
||||
const res = await axios.get(`/api/category/getAll`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
// console.log(res.data.category);
|
||||
setCategoryName(res.data.category)
|
||||
if (res.status === 200) changeState({ ...res.data });
|
||||
}, [token]);
|
||||
|
||||
useEffect(async () => {
|
||||
|
||||
fetchCategory();
|
||||
|
||||
}, [fetchCategory]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const fetchDirectory = useCallback(async () => {
|
||||
const res = await axios.get(`/api/directory/getOne/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
setState(res.data.directory)
|
||||
changeState({ loading: false });
|
||||
if (res.status === 200) changeState({ ...res.data });
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchDirectory();
|
||||
}, [fetchDirectory]);
|
||||
|
||||
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!(name || description || phone || email || Bname || Sname || city)) {
|
||||
alert("Please fill required field ");
|
||||
return;
|
||||
}
|
||||
changeState({ loading: true });
|
||||
|
||||
let res = await axios.put(
|
||||
`/api/directory/update/${id}`,
|
||||
{
|
||||
state,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (res.status == 200) {
|
||||
changeState({ loading: false });
|
||||
swal("Edit Business successfully!");
|
||||
history.goBack()
|
||||
}
|
||||
};
|
||||
const onCancel = () => {
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// console.log(state)
|
||||
return (
|
||||
<>
|
||||
<div className=" main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="form-group text-right">
|
||||
<span className=" fs-2 text-xl-start font-weight-bold float-start">Edit Bisuness</span>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success mt-1 mb-0 my-1 btn btn-success btn-login waves-effect waves-light mr-1"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className=" mt-1 ml-2 btn btn-warning btn-cancel waves-effect waves-light mr-3"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Save options Ends--> */}
|
||||
|
||||
{/* <!-- Row 1 Begins --> */}
|
||||
<div className="row">
|
||||
{/* <!--Left Column Begins--> */}
|
||||
<div className="col-lg-8">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor=" basicpill-phoneno-input"
|
||||
className=" label-100"
|
||||
>
|
||||
Name*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={state.name}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor=" basicpill-phoneno-input"
|
||||
className=" label-100"
|
||||
>
|
||||
phone*
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="phone"
|
||||
value={state.phone}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Phone"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor=" basicpill-phoneno-input"
|
||||
className=" label-100"
|
||||
>
|
||||
Email*
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={state.email}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor=" basicpill-phoneno-input"
|
||||
className=" label-100"
|
||||
>
|
||||
Address*
|
||||
</label>
|
||||
<div className=" d-flex">
|
||||
<div><input
|
||||
type="text"
|
||||
name="Building_Name"
|
||||
value={state.Building_Name}
|
||||
className="mt-0 my-3 w-100 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Building Name*"
|
||||
/></div>
|
||||
<div> <input
|
||||
type="text"
|
||||
name="Street_Name"
|
||||
value={state.Street_Name}
|
||||
className="mt-0 ml-4 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Street Name*"
|
||||
/></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<select
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
required
|
||||
name="country"
|
||||
value={state.country}
|
||||
// onChange={(e) => setCountry(e.target.value)}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">Country*</option>
|
||||
{Country &&
|
||||
Country.getAllCountries().map((item) => (
|
||||
<option key={item.isoCode} value={item.isoCode}>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
|
||||
|
||||
</select>
|
||||
<select
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
requiredname='city'
|
||||
name="city"
|
||||
value={state.city}
|
||||
// onChange={(e) => setCity(e.target.value)}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">City*</option>
|
||||
{City &&
|
||||
|
||||
City.getCitiesOfCountry(state.country).map((item) => (
|
||||
<option key={item.isoCode} value={item.isoCode}>
|
||||
{item.name}
|
||||
{/* {console.log(item)} */}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group mb-30 width-100 row">
|
||||
<label className="my-3 col-md-4 control-label">
|
||||
Description
|
||||
</label>
|
||||
<div className="mt-0 col-md-10">
|
||||
<textarea
|
||||
value={state.description}
|
||||
onChange={handleChange}
|
||||
name="description"
|
||||
className="form-control input-field"
|
||||
rows="5"
|
||||
placeholder="Add description"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Left Column Ends --> */}
|
||||
|
||||
{/* <!--Right Column Begins --> */}
|
||||
<div className=" col-lg-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Category*
|
||||
</label>
|
||||
<select
|
||||
name="category"
|
||||
value={state.category}
|
||||
onChange={handleChange}
|
||||
className="form-control input-field"
|
||||
>
|
||||
<option value="">--select--</option>
|
||||
{categoryName && categoryName.map(item =>
|
||||
<option>{item?.name}</option>
|
||||
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Status*
|
||||
</label>
|
||||
<select
|
||||
name="status"
|
||||
value={state.status}
|
||||
onChange={handleChange}
|
||||
className="form-control input-field"
|
||||
>
|
||||
<option value="">--select--</option>
|
||||
<option value={true}>Active</option>
|
||||
<option value={false}>Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Google Location
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="Glocation"
|
||||
value={state.Glocation}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Google Location(Optional)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Linkedin URL
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="LinkedinUrl"
|
||||
value={state.LinkedinUrl}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Linkedin URL (Optional)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Facebook URL
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="FacebookUrl"
|
||||
value={state.FacebookUrl}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Facebook URL (Optional)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Instagram URL
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="InstagramUrl"
|
||||
value={state.InstagramUrl}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Instagram URL (Optional)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!--Right Column Ends --> */}
|
||||
</div>
|
||||
<div className=" mt-4 row">
|
||||
{/* <!--Left Column Begins--> */}
|
||||
{/* <div className="col-lg-8">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form className="">
|
||||
<div className="row">
|
||||
<div className="col-lg-4">
|
||||
<div className=" form-group">
|
||||
<label
|
||||
htmlFor=" basicpill-phoneno-input"
|
||||
className=" label-100"
|
||||
>
|
||||
Price*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="price"
|
||||
value={price}
|
||||
onChange={handleChange}
|
||||
className="form-control input-field"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* <!-- Left Column Ends --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
{/* <!-- End Page-content --> */}
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditBisuness
|
||||
134
src/views/Directory/View_Bisuness.js
Normal file
134
src/views/Directory/View_Bisuness.js
Normal file
@ -0,0 +1,134 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
// import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import { useParams } from "react-router-dom";
|
||||
const View_Bisuness = () => {
|
||||
const { id } = useParams();
|
||||
// console.log(id)
|
||||
const [bisuness, setBisuness] = useState([])
|
||||
|
||||
|
||||
// const { products, page, limit, totalProducts, pages } = state;
|
||||
|
||||
|
||||
const { token } = isAutheticated();
|
||||
|
||||
const view_business = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/directory/getOne/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log(res.data.directory.name)
|
||||
setBisuness(res.data.directory)
|
||||
// changeState({
|
||||
// ...res.data,
|
||||
// pages: Math.ceil(res.data.totalProducts / limit),
|
||||
// });
|
||||
// limit, page,
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
view_business();
|
||||
}, [view_business]);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">View Bisuness</h4>
|
||||
{/* <Link to="/add_bisuness"><button type="button" className="btn btn-info float-end mb-3 ml-4"> View Bisuness</button></Link> */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Category</th>
|
||||
<th>email</th>
|
||||
<th>phone</th>
|
||||
<th>Building_Name</th>
|
||||
<th>Street_Name</th>
|
||||
<th>city</th>
|
||||
<th>description</th>
|
||||
<th>Status</th>
|
||||
<th>Google Location</th>
|
||||
<th>LinkedinUrl</th>
|
||||
<th>FacebookUrl</th>
|
||||
<th>intagramUrl</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>{bisuness?.name} </td>
|
||||
<td>{bisuness?.category}</td>
|
||||
<td>{bisuness?.email}</td>
|
||||
<td>{bisuness?.phone}</td>
|
||||
<td>{bisuness?.Building_Name}</td>
|
||||
<td>{bisuness?.Street_Name}</td>
|
||||
<td>{bisuness?.city}</td>
|
||||
<td>{bisuness?.description}</td>
|
||||
|
||||
<td>
|
||||
<span
|
||||
className={`badge rounded-pill bg-${bisuness?.status ? "success" : "danger"
|
||||
} font-size-10`}
|
||||
>
|
||||
{bisuness?.status ? "Live" : "Suspended"}
|
||||
</span>
|
||||
</td>
|
||||
<td>{bisuness?.Glocation}</td>
|
||||
<td>{bisuness?.LinkedinUrl}</td>
|
||||
<td>{bisuness?.FacebookUrl}</td>
|
||||
<td>{bisuness?.InstagramUrl}</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default View_Bisuness
|
||||
149
src/views/News/AddNews.js
Normal file
149
src/views/News/AddNews.js
Normal file
@ -0,0 +1,149 @@
|
||||
import axios from "axios";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilPencil, cilSettings, cilLockLocked, cilUser } from '@coreui/icons'
|
||||
const AddNews = () => {
|
||||
const { token } = isAutheticated();
|
||||
let history = useHistory();
|
||||
const [image, setImage] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const myForm = new FormData();
|
||||
|
||||
myForm.set("title", title);
|
||||
myForm.set("description", description);
|
||||
myForm.set("image", image);
|
||||
setLoading({ loading: true });
|
||||
// console.log(image)
|
||||
let res = await axios.post(
|
||||
`/api/news/create`, myForm,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": 'multipart/form-data',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log(res.data)
|
||||
if (res.data) {
|
||||
swal("success!", "News Added Successfully!", "success");
|
||||
history.goBack();
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
const handleImage = (e) => {
|
||||
const files = e.target.files[0];
|
||||
// console.log(files)
|
||||
setImage(files);
|
||||
|
||||
};
|
||||
//
|
||||
const onCancel = () => {
|
||||
// window.location = "/comproducts";
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-light min-vh-70 d-flex flex-row ">
|
||||
<CContainer>
|
||||
<CRow className="align-left w-140">
|
||||
<CCol md={19} lg={27} xl={16}>
|
||||
<CCard className="mx-4">
|
||||
<CCardBody className="p-4">
|
||||
<CForm>
|
||||
<h3 className="mb-4 justify-content-center">Add News</h3>
|
||||
<div>
|
||||
<div>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilPencil} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
value={title}
|
||||
placeholder="Title" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilSettings} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
value={description}
|
||||
placeholder="Description" />
|
||||
</CInputGroup>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
|
||||
{/* <CIcon icon={cilLockLocked} /> */}
|
||||
|
||||
<CFormInput
|
||||
type="file"
|
||||
placeholder="image"
|
||||
accept="image/*"
|
||||
required
|
||||
onChange={handleImage}
|
||||
|
||||
|
||||
/>
|
||||
</CInputGroup>
|
||||
</div>
|
||||
|
||||
<div className=" d-flex">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success btn-login waves-effect waves-light"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className=" ml-2 btn btn-warning btn-cancel waves-effect waves-light"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddNews
|
||||
165
src/views/News/EditNews.js
Normal file
165
src/views/News/EditNews.js
Normal file
@ -0,0 +1,165 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilPencil, cilSettings, cilLockLocked, cilUser } from '@coreui/icons'
|
||||
const EditNews = () => {
|
||||
const { id } = useParams();
|
||||
// console.log(id)
|
||||
const { token } = isAutheticated();
|
||||
let history = useHistory();
|
||||
const [image, setImage] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
//fetch one image
|
||||
useEffect(async () => {
|
||||
const res = await axios.get(`/api/news/getOne/${id}`, {
|
||||
// headers: {
|
||||
// Authorization: `Bearer ${token}`,
|
||||
// },
|
||||
});
|
||||
// console.log(res.data.news.title)
|
||||
setTitle(res.data.news.title)
|
||||
setDescription(res.data.news.description)
|
||||
|
||||
}, [id]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const myForm = new FormData();
|
||||
|
||||
myForm.set("title", title);
|
||||
myForm.set("description", description);
|
||||
myForm.set("image", image);
|
||||
setLoading({ loading: true });
|
||||
// console.log(image)
|
||||
let res = await axios.put(
|
||||
`/api/news/update/${id}`, myForm,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": 'multipart/form-data',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data)
|
||||
if (res.data) {
|
||||
swal("success!", "News Edit Successfully!", "success");
|
||||
history.goBack();
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
const handleImage = (e) => {
|
||||
const files = e.target.files[0];
|
||||
// console.log(files)
|
||||
setImage(files);
|
||||
|
||||
};
|
||||
//
|
||||
const onCancel = () => {
|
||||
// window.location = "/comproducts";
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-light min-vh-70 d-flex flex-row ">
|
||||
<CContainer>
|
||||
<CRow className="align-left w-140">
|
||||
<CCol md={19} lg={27} xl={16}>
|
||||
<CCard className="mx-4">
|
||||
<CCardBody className="p-4">
|
||||
<CForm>
|
||||
<h3 className="mb-4 justify-content-center">Edit News</h3>
|
||||
<div>
|
||||
<div>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilPencil} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
value={title}
|
||||
placeholder="Title" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilSettings} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
value={description}
|
||||
placeholder="Description" />
|
||||
</CInputGroup>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
|
||||
{/* <CIcon icon={cilLockLocked} /> */}
|
||||
|
||||
<CFormInput
|
||||
type="file"
|
||||
placeholder="image"
|
||||
accept="image/*"
|
||||
required
|
||||
onChange={handleImage}
|
||||
|
||||
|
||||
/>
|
||||
</CInputGroup>
|
||||
</div>
|
||||
|
||||
<div className=" d-flex">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success btn-login waves-effect waves-light"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className=" ml-2 btn btn-warning btn-cancel waves-effect waves-light"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditNews
|
||||
164
src/views/News/News.js
Normal file
164
src/views/News/News.js
Normal file
@ -0,0 +1,164 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function News() {
|
||||
const [news, setNews] = useState([])
|
||||
|
||||
const { token } = isAutheticated();
|
||||
|
||||
const getNews = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/news/getAll`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
setNews(res.data.news)
|
||||
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getNews();
|
||||
}, [getNews]);
|
||||
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) return;
|
||||
|
||||
let res = await axios.delete(`/api/news/delete/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
console.log(res)
|
||||
if (res.data.success == true) {
|
||||
swal("success!", "News Deleted Successfully!", "success");
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP-News</h4>
|
||||
<Link to="/addNews"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add News</button></Link>
|
||||
{/* <div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">CMD-App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">CMD-Category</li>
|
||||
</ol>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Image</th>
|
||||
<th>Added On</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{news && news.map((item, index) =>
|
||||
<tr>
|
||||
<td>{item?.title}</td>
|
||||
<td>
|
||||
<img src={`${item?.image.url}`} width="50" alt="" /></td>
|
||||
<td>
|
||||
{/* {item?.addedOn} */}
|
||||
{new Date(`${item?.addedOn}`).toDateString()}<span> , {`${formatAMPM(item?.addedOn)}`}</span>
|
||||
|
||||
</td>
|
||||
|
||||
|
||||
<td>
|
||||
<Link to={`/news/view/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
<Link to={`/news/edit/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(`${item._id}`)}
|
||||
className=" btn btn-danger btn-sm waves-effect waves-light btn-table ml-2"
|
||||
id="sa-params"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default News;
|
||||
131
src/views/News/ViewNews.js
Normal file
131
src/views/News/ViewNews.js
Normal file
@ -0,0 +1,131 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function ViewNews() {
|
||||
const [news, setNews] = useState([])
|
||||
const { id } = useParams();
|
||||
console.log(id)
|
||||
const { token } = isAutheticated();
|
||||
|
||||
const getNews = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/news/getOne/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log(res.data.news)
|
||||
setNews(res.data.news)
|
||||
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getNews();
|
||||
}, [getNews]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP-News</h4>
|
||||
<Link to="/addNews"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add News</button></Link>
|
||||
{/* <div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">CMD-App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">CMD-Category</li>
|
||||
</ol>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Title</th>
|
||||
|
||||
<th>Image</th>
|
||||
<th>Description</th>
|
||||
<th>Added On</th>
|
||||
<th>Updated At</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{news &&
|
||||
<tr>
|
||||
<td>{news?._id}</td>
|
||||
<td>{news?.title}</td>
|
||||
<td>
|
||||
<img src={`${news.image?.url}`} width="50" alt="" />
|
||||
</td>
|
||||
|
||||
<td>{news?.description}</td>
|
||||
<td>
|
||||
{new Date(`${news?.addedOn}`).toDateString()}<span> , {`${formatAMPM(news?.addedOn)}`}</span>
|
||||
</td>
|
||||
<td>
|
||||
{new Date(`${news?.updatedAt}`).toDateString()}<span> , {`${formatAMPM(news?.updatedAt)}`}</span>
|
||||
</td>
|
||||
|
||||
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ViewNews;
|
||||
174
src/views/Vendor/AddVendor.js
vendored
174
src/views/Vendor/AddVendor.js
vendored
@ -1,174 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardGroup,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CFormSelect,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import Swal from 'sweetalert2';
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { Country, State, City } from 'country-state-city';
|
||||
import { cilGlobeAlt, cilLocationPin, cilLockLocked, cilUser } from '@coreui/icons'
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useState } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import { getAllStates, getStatesOfCountry, getCitiesOfCountry } from 'country-state-city/dist/lib/state';
|
||||
import { isAutheticated } from 'src/auth';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
|
||||
const AddVendor = () => {
|
||||
const [vendor, setVendor] = useState({
|
||||
vendor_name: '',
|
||||
city: '',
|
||||
state: 'Andhra Pradesh',
|
||||
country: 'India',
|
||||
address_1: '',
|
||||
address_2: '',
|
||||
|
||||
})
|
||||
const history = useHistory()
|
||||
const { token } = isAutheticated();
|
||||
const [states, setStates] = useState([]);
|
||||
const [cities, setCities] = useState([]);
|
||||
const [code, setCode] = useState(0);
|
||||
const [countryCode, setCountryCode] = useState('IN')
|
||||
const [stateCode, setStateCode] = useState('AP')
|
||||
const countries = Country.getAllCountries();
|
||||
const allStates = State.getAllStates();
|
||||
// const Code = Math.round(Math.random() * 1000000000);
|
||||
const handleChange = (e) => (event) => {
|
||||
setVendor({ ...vendor, [e]: event.target.value });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const generateCode = () => {
|
||||
setCode(Math.round(Math.random() * 1000000000))
|
||||
}
|
||||
generateCode()
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
const ccode = countries.find(item => item.name === vendor.country)
|
||||
const scode = allStates.find(item => item.name === vendor.state)
|
||||
console.log(ccode.isoCode + ":" + scode.isoCode);
|
||||
console.log(vendor.country, vendor.state);
|
||||
setCountryCode(ccode?.isoCode)
|
||||
setStateCode(scode.isoCode)
|
||||
setStates(prev => State.getStatesOfCountry(countryCode))
|
||||
setCities(prev => City.getCitiesOfState(countryCode, stateCode))
|
||||
}, [vendor.country, vendor.state, countryCode, stateCode]);
|
||||
|
||||
const handleClick = async () => {
|
||||
let res = await axios.post('/api/vendor/add', { ...vendor, code }, {
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
if ((res.data.message === "Success")) {
|
||||
Swal.fire({
|
||||
title: 'Done',
|
||||
text: 'Vendor Added',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'ok',
|
||||
confirmButtonColor: '#303c54',
|
||||
iconColor: '#303c54'
|
||||
}).then(() => {
|
||||
history.push('/vendors');
|
||||
});
|
||||
} else {
|
||||
Swal("Oops!", "Something went wrong!", "error");
|
||||
}
|
||||
}
|
||||
|
||||
return <div className="bg-light min-vh-100 d-flex flex-row align-items-start">
|
||||
<CContainer>
|
||||
<CRow className="justify-content-start">
|
||||
<CCol md={8}>
|
||||
<CForm>
|
||||
<h1>Add New Vendor</h1>
|
||||
<p className="text-medium-emphasis">Fill the fields and submit to add a new vendor</p>
|
||||
<CRow className=' flex-row align-items-center'>
|
||||
<CCol md={2} ><h4>Code:</h4></CCol>
|
||||
<CCol><h6>{code}</h6></CCol>
|
||||
{/* <p className="text-medium-emphasis">(auto-generated)</p> */}
|
||||
</CRow>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormInput placeholder="Vendor Name" autoComplete="vendorname" onChange={handleChange("vendor_name")} />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 1"
|
||||
onChange={handleChange("address_1")}
|
||||
/>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 2(area)"
|
||||
autoComplete="address2"
|
||||
onChange={handleChange("address_2")}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilGlobeAlt} />
|
||||
</CInputGroupText>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange("country")}
|
||||
>
|
||||
<option value='India'>Select Country</option>{
|
||||
countries.map((item) =>
|
||||
<option value={item.name}>{item.name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange("state")}
|
||||
>
|
||||
<option value='Chandigarh'>Select State</option>{
|
||||
states.map((item) =>
|
||||
<option value={item.name}>{item.name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange("city")}
|
||||
placeholder='Select City'
|
||||
>
|
||||
<option value='Mumbai'>Select City</option>{
|
||||
cities.map((item) =>
|
||||
<option value={item.name}>{item.name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
<CButton color="dark" className="px-4" onClick={handleClick}>
|
||||
Submit
|
||||
</CButton>
|
||||
|
||||
</CForm>
|
||||
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>;
|
||||
};
|
||||
|
||||
export default AddVendor;
|
||||
192
src/views/Vendor/EditVendor.js
vendored
192
src/views/Vendor/EditVendor.js
vendored
@ -1,192 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardGroup,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CFormSelect,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { Country, State, City } from 'country-state-city';
|
||||
import { cilGlobeAlt, cilLocationPin, cilLockLocked, cilUser } from '@coreui/icons'
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useState } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import { getAllStates, getStatesOfCountry, getCitiesOfCountry } from 'country-state-city/dist/lib/state';
|
||||
import { isAutheticated } from 'src/auth';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import Swal from 'sweetalert2';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
|
||||
const AddVendor = () => {
|
||||
const [vendor, setVendor] = useState({
|
||||
vendor_name: '',
|
||||
city: '',
|
||||
state: 'Andhra Pradesh',
|
||||
country: 'India',
|
||||
address_1: '',
|
||||
address_2: '',
|
||||
})
|
||||
const history = useHistory()
|
||||
const { id } = useParams();
|
||||
const { token } = isAutheticated();
|
||||
const [states, setStates] = useState([]);
|
||||
const [cities, setCities] = useState([]);
|
||||
const [countryCode, setCountryCode] = useState('IN')
|
||||
const [stateCode, setStateCode] = useState('AP')
|
||||
const countries = Country.getAllCountries();
|
||||
const allStates = State.getAllStates();
|
||||
const [data, setData] = useState([]);
|
||||
// const Code = Math.round(Math.random() * 1000000000);
|
||||
const handleChange = (e) => (event) => {
|
||||
setVendor({ ...vendor, [e]: event.target.value });
|
||||
};
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
const res = await axios.get(`api/vendor/view/${id}`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
if (res) {
|
||||
setData(res?.data?.Store)
|
||||
setVendor(res?.data?.Store)
|
||||
}
|
||||
|
||||
|
||||
console.log(res.data);
|
||||
}
|
||||
getData();
|
||||
|
||||
|
||||
}, []);
|
||||
// console.log(vendor);
|
||||
useEffect(() => {
|
||||
const ccode = countries.find(item => item.name === vendor.country)
|
||||
const scode = allStates.find(item => item.name === vendor.state)
|
||||
console.log(ccode.isoCode + ":" + scode.isoCode);
|
||||
console.log(vendor.country, vendor.state);
|
||||
setCountryCode(ccode.isoCode)
|
||||
setStateCode(scode.isoCode)
|
||||
setStates(prev => State.getStatesOfCountry(countryCode))
|
||||
setCities(prev => City.getCitiesOfState(countryCode, stateCode))
|
||||
}, [vendor.country, vendor.state, countryCode, stateCode]);
|
||||
console.log(data);
|
||||
const handleClick = async () => {
|
||||
let res = await axios.put(`/api/vendor/${id}`, vendor, {
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
if ((res.data.message === "Success")) {
|
||||
Swal.fire({
|
||||
title: 'Done',
|
||||
text: 'vendor Updated',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'Cool',
|
||||
confirmButtonColor: '#303c54',
|
||||
iconColor: '#303c54'
|
||||
}).then(() => {
|
||||
history.push('/vendors');
|
||||
});
|
||||
} else {
|
||||
Swal("Oops!", "Something went wrong!", "error");
|
||||
}
|
||||
}
|
||||
|
||||
return <div className="bg-light min-vh-100 d-flex flex-row align-items-start">
|
||||
<CContainer>
|
||||
<CRow className="justify-content-start">
|
||||
<CCol md={8}>
|
||||
<CForm>
|
||||
<h1>Edit Vendor</h1>
|
||||
{/* <p className="text-medium-emphasis">Fill the fields and submit to add a new vendor</p> */}
|
||||
<CRow className=' flex-row align-items-center'>
|
||||
<CCol md={2} ><h4>Code:</h4></CCol>
|
||||
<CCol><h6>{data?.code}</h6></CCol>
|
||||
{/* <p className="text-medium-emphasis">(auto-generated)</p> */}
|
||||
</CRow>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormInput placeholder="Vendor Name" autoComplete="vendorname" value={vendor.vendor_name} onChange={handleChange("vendor_name")} />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 1"
|
||||
value={vendor.address_1}
|
||||
onChange={handleChange("address_1")}
|
||||
/>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 2(area)"
|
||||
autoComplete="address2"
|
||||
value={vendor.address_2}
|
||||
onChange={handleChange("address_2")}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilGlobeAlt} />
|
||||
</CInputGroupText>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange("country")}
|
||||
>
|
||||
<option value='India'>{data.country}</option>{
|
||||
countries.map((item) =>
|
||||
<option value={item.name}>{item.name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange("state")}
|
||||
>
|
||||
<option value='Chandigarh'>{data.state}</option>{
|
||||
states.map((item) =>
|
||||
<option value={item.name}>{item.name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
onChange={handleChange("city")}
|
||||
placeholder='Select City'
|
||||
>
|
||||
<option value='Mumbai'>{data.city}</option>{
|
||||
cities.map((item) =>
|
||||
<option value={item.name}>{item.name}</option>
|
||||
)
|
||||
}
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
<CButton color="dark" className="px-4" onClick={handleClick}>
|
||||
Submit
|
||||
</CButton>
|
||||
|
||||
</CForm>
|
||||
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>;
|
||||
};
|
||||
|
||||
export default AddVendor;
|
||||
103
src/views/Vendor/Vendor.js
vendored
103
src/views/Vendor/Vendor.js
vendored
@ -1,103 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import {
|
||||
CAvatar,
|
||||
CButton,
|
||||
CButtonGroup,
|
||||
CTable,
|
||||
CTableBody,
|
||||
CTableDataCell,
|
||||
CTableHead,
|
||||
CTableHeaderCell,
|
||||
CTableRow,
|
||||
} from '@coreui/react'
|
||||
import { Link } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import { isAutheticated } from '../../auth';
|
||||
import { useState } from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import Swal from 'sweetalert2';
|
||||
|
||||
const Vendor = () => {
|
||||
const { token } = isAutheticated();
|
||||
const history = useHistory();
|
||||
const [data, setData] = useState([]);
|
||||
const [reload, setReload] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
const res = await axios.get('/api/vendor/view', {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
if (res) {
|
||||
setData(res?.data?.Stores)
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
getData();
|
||||
|
||||
|
||||
}, [reload]);
|
||||
console.log(data);
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
const res = await axios.delete(`/api/vendor/${id}`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
if ((res.data.message === 'Deleted Successfully')) {
|
||||
Swal.fire({
|
||||
title: 'Done',
|
||||
text: 'Vendor Deleted',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'Cool',
|
||||
confirmButtonColor: '#303c54',
|
||||
iconColor: '#303c54'
|
||||
}).then(() => {
|
||||
// history.('/vendors');
|
||||
setReload(!reload)
|
||||
// location.reload();
|
||||
});
|
||||
} else {
|
||||
Swal("Oops!", "Something went wrong!", "error");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return <div>
|
||||
<Link to='/addvendor'>
|
||||
<CButton color="dark">+Add New Vendor</CButton>
|
||||
</Link>
|
||||
<hr />
|
||||
<CTable striped hover>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Vendor Name</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Code</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Area</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Actions</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<tbody>{data.map(item => <tr><td>{item.vendor_name}</td>
|
||||
<td>{item.code}</td>
|
||||
<td>{item.city}</td>
|
||||
<td><CButtonGroup role="group" aria-label="Basic mixed styles example">
|
||||
<CButton color="warning" onClick={() => history.push(`/editvendor/${item._id}`)}>Edit</CButton>
|
||||
<CButton color="success" onClick={() => history.push(`/viewvendor/${item._id}`)}>View</CButton>
|
||||
<CButton color="danger" onClick={() => handleDelete(item._id)}>Delete</CButton>
|
||||
</CButtonGroup></td>
|
||||
</tr>)}
|
||||
</tbody>
|
||||
</CTable>
|
||||
</div>;
|
||||
};
|
||||
|
||||
export default Vendor;
|
||||
80
src/views/Vendor/VendorDetail.js
vendored
80
src/views/Vendor/VendorDetail.js
vendored
@ -1,80 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
CTable,
|
||||
CTableBody,
|
||||
CTableDataCell,
|
||||
CTableHead,
|
||||
CTableHeaderCell,
|
||||
CTableRow,
|
||||
} from '@coreui/react'
|
||||
import { useParams } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import { isAutheticated } from '../../auth';
|
||||
|
||||
|
||||
|
||||
const VendorDetail = () => {
|
||||
const [data, setData] = useState({});
|
||||
const { id } = useParams()
|
||||
const { token } = isAutheticated();
|
||||
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
const res = await axios.get(`/api/vendor/view/${id}`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Content-type": "Application/json",
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
if (res) {
|
||||
setData(res?.data?.Store)
|
||||
}
|
||||
|
||||
}
|
||||
getData();
|
||||
}, []);
|
||||
console.log(data);
|
||||
const formatDate = (date) => {
|
||||
let today = new Date(date);
|
||||
let dd = String(today.getDate()).padStart(2, '0');
|
||||
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
|
||||
let yyyy = today.getFullYear();
|
||||
|
||||
today = dd + '/' + mm + '/' + yyyy;
|
||||
return today
|
||||
}
|
||||
|
||||
|
||||
return <div >
|
||||
<h1>Vendor Details</h1>
|
||||
<CTable color="dark" striped>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Unique ID</CTableHeaderCell>
|
||||
<CTableDataCell scope="col">{data._id}</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Code</CTableHeaderCell>
|
||||
<CTableDataCell scope="col">{data.code}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Vendor Name</CTableHeaderCell>
|
||||
<CTableDataCell>{data.vendor_name}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Added On</CTableHeaderCell>
|
||||
<CTableDataCell>{formatDate(data.createdAt)}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Address</CTableHeaderCell>
|
||||
<CTableDataCell>{data.address_1},{data.address_2},{data.city},{data.state},{data.country}</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</div>;
|
||||
};
|
||||
|
||||
export default VendorDetail;
|
||||
@ -1,180 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CRow,
|
||||
CAccordion,
|
||||
CAccordionBody,
|
||||
CAccordionHeader,
|
||||
CAccordionItem,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Accordion = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Accordion" href="components/accordion" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Accordion</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Click the accordions below to expand/collapse the accordion content.
|
||||
</p>
|
||||
<DocsExample href="components/accordion">
|
||||
<CAccordion activeItemKey={2}>
|
||||
<CAccordionItem itemKey={1}>
|
||||
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the first item's accordion body.</strong> It is hidden by
|
||||
default, until the collapse plugin adds the appropriate classes that we use to
|
||||
style each element. These classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any of this with custom
|
||||
CSS or overriding our default variables. It's also worth noting that just
|
||||
about any HTML can go within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem itemKey={2}>
|
||||
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by
|
||||
default, until the collapse plugin adds the appropriate classes that we use to
|
||||
style each element. These classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any of this with custom
|
||||
CSS or overriding our default variables. It's also worth noting that just
|
||||
about any HTML can go within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem itemKey={3}>
|
||||
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by
|
||||
default, until the collapse plugin adds the appropriate classes that we use to
|
||||
style each element. These classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any of this with custom
|
||||
CSS or overriding our default variables. It's also worth noting that just
|
||||
about any HTML can go within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
</CAccordion>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Accordion</strong> <small>Flush</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code>flush</code> to remove the default <code>background-color</code>, some
|
||||
borders, and some rounded corners to render accordions edge-to-edge with their parent
|
||||
container.
|
||||
</p>
|
||||
<DocsExample href="components/accordion#flush">
|
||||
<CAccordion flush>
|
||||
<CAccordionItem itemKey={1}>
|
||||
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the first item's accordion body.</strong> It is hidden by
|
||||
default, until the collapse plugin adds the appropriate classes that we use to
|
||||
style each element. These classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any of this with custom
|
||||
CSS or overriding our default variables. It's also worth noting that just
|
||||
about any HTML can go within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem itemKey={2}>
|
||||
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by
|
||||
default, until the collapse plugin adds the appropriate classes that we use to
|
||||
style each element. These classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any of this with custom
|
||||
CSS or overriding our default variables. It's also worth noting that just
|
||||
about any HTML can go within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem itemKey={3}>
|
||||
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by
|
||||
default, until the collapse plugin adds the appropriate classes that we use to
|
||||
style each element. These classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any of this with custom
|
||||
CSS or overriding our default variables. It's also worth noting that just
|
||||
about any HTML can go within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
</CAccordion>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Accordion</strong> <small>Always open</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code>alwaysOpen</code> property to make accordion items stay open when another
|
||||
item is opened.
|
||||
</p>
|
||||
<DocsExample href="components/accordion#flush">
|
||||
<CAccordion alwaysOpen>
|
||||
<CAccordionItem itemKey={1}>
|
||||
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the first item's accordion body.</strong> It is hidden by
|
||||
default, until the collapse plugin adds the appropriate classes that we use to
|
||||
style each element. These classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any of this with custom
|
||||
CSS or overriding our default variables. It's also worth noting that just
|
||||
about any HTML can go within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem itemKey={2}>
|
||||
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by
|
||||
default, until the collapse plugin adds the appropriate classes that we use to
|
||||
style each element. These classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any of this with custom
|
||||
CSS or overriding our default variables. It's also worth noting that just
|
||||
about any HTML can go within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem itemKey={3}>
|
||||
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
|
||||
<CAccordionBody>
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by
|
||||
default, until the collapse plugin adds the appropriate classes that we use to
|
||||
style each element. These classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any of this with custom
|
||||
CSS or overriding our default variables. It's also worth noting that just
|
||||
about any HTML can go within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionItem>
|
||||
</CAccordion>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Accordion
|
||||
@ -1,77 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CBreadcrumb,
|
||||
CBreadcrumbItem,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CRow,
|
||||
CLink,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Breadcrumbs = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Breadcrumb" href="components/breadcrumb" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Breadcrumb</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
The breadcrumb navigation provides links back to each previous page the user navigated
|
||||
through and shows the current location in a website or an application. You don’t have
|
||||
to add separators, because they automatically added in CSS through{' '}
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">
|
||||
{' '}
|
||||
<code>::before</code>
|
||||
</a>{' '}
|
||||
and{' '}
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content">
|
||||
{' '}
|
||||
<code>content</code>
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<DocsExample href="components/breadcrumb">
|
||||
<CBreadcrumb>
|
||||
<CBreadcrumbItem>
|
||||
<CLink href="#">Home</CLink>
|
||||
</CBreadcrumbItem>
|
||||
<CBreadcrumbItem active>Library</CBreadcrumbItem>
|
||||
</CBreadcrumb>
|
||||
<CBreadcrumb>
|
||||
<CBreadcrumbItem>
|
||||
<CLink href="#">Home</CLink>
|
||||
</CBreadcrumbItem>
|
||||
<CBreadcrumbItem>
|
||||
<CLink href="#">Library</CLink>
|
||||
</CBreadcrumbItem>
|
||||
<CBreadcrumbItem active>Data</CBreadcrumbItem>
|
||||
</CBreadcrumb>
|
||||
<CBreadcrumb>
|
||||
<CBreadcrumbItem>
|
||||
<CLink href="#">Home</CLink>
|
||||
</CBreadcrumbItem>
|
||||
<CBreadcrumbItem>
|
||||
<CLink href="#">Library</CLink>
|
||||
</CBreadcrumbItem>
|
||||
<CBreadcrumbItem>
|
||||
<CLink href="#">Data</CLink>
|
||||
</CBreadcrumbItem>
|
||||
<CBreadcrumbItem active>Bootstrap</CBreadcrumbItem>
|
||||
</CBreadcrumb>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Breadcrumbs
|
||||
@ -1,909 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardFooter,
|
||||
CCardGroup,
|
||||
CCardHeader,
|
||||
CCardImage,
|
||||
CCardLink,
|
||||
CCardSubtitle,
|
||||
CCardText,
|
||||
CCardTitle,
|
||||
CListGroup,
|
||||
CListGroupItem,
|
||||
CNav,
|
||||
CNavItem,
|
||||
CNavLink,
|
||||
CCol,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
import ReactImg from 'src/assets/images/react.jpg'
|
||||
|
||||
const Cards = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Card" href="components/card" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Card</strong> <small>Example</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Cards are built with as little markup and styles as possible but still manage to
|
||||
deliver a bunch of control and customization. Built with flexbox, they offer easy
|
||||
alignment and mix well with other CoreUI components. Cards have no top, left, and
|
||||
right margins by default, so use{' '}
|
||||
<a href="https://coreui.io/docs/utilities/spacing">spacing utilities</a> as needed.
|
||||
They have no fixed width to start, so they'll fill the full width of its parent.
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
Below is an example of a basic card with mixed content and a fixed width. Cards have
|
||||
no fixed width to start, so they'll naturally fill the full width of its parent
|
||||
element.
|
||||
</p>
|
||||
<DocsExample href="components/card">
|
||||
<CCard style={{ width: '18rem' }}>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
Some quick example text to build on the card title and make up the bulk of the
|
||||
card's content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Card</strong> <small>Body</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
The main block of a card is the <code><CCardBody></code>. Use it whenever you
|
||||
need a padded section within a card.
|
||||
</p>
|
||||
<DocsExample href="components/card/#body">
|
||||
<CCard>
|
||||
<CCardBody>This is some text within a card body.</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Card</strong> <small>Titles, text, and links</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Card titles are managed by <code><CCardTitle></code> component. Identically,
|
||||
links are attached and collected next to each other by <code><CCardLink></code>{' '}
|
||||
component.
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
Subtitles are managed by <code><CCardSubtitle></code> component. If the{' '}
|
||||
<code><CCardTitle></code> also, the <code><CCardSubtitle></code> items are
|
||||
stored in a <code><CCardBody></code> item, the card title, and subtitle are
|
||||
arranged rightly.
|
||||
</p>
|
||||
<DocsExample href="components/card/#titles-text-and-links">
|
||||
<CCard style={{ width: '18rem' }}>
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardSubtitle className="mb-2 text-medium-emphasis">Card subtitle</CCardSubtitle>
|
||||
<CCardText>
|
||||
Some quick example text to build on the card title and make up the bulk of the
|
||||
card's content.
|
||||
</CCardText>
|
||||
<CCardLink href="#">Card link</CCardLink>
|
||||
<CCardLink href="#">Another link</CCardLink>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Card</strong> <small>Images</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
<code>.card-img-top</code> places a picture to the top of the card. With{' '}
|
||||
<code>.card-text</code>, text can be added to the card. Text within{' '}
|
||||
<code>.card-text</code> can additionally be styled with the regular HTML tags.
|
||||
</p>
|
||||
<DocsExample href="components/card/#images">
|
||||
<CCard style={{ width: '18rem' }}>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardText>
|
||||
Some quick example text to build on the card title and make up the bulk of the
|
||||
card's content.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Card</strong> <small>List groups</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Create lists of content in a card with a flush list group.
|
||||
</p>
|
||||
<DocsExample href="components/card/#list-groups">
|
||||
<CRow>
|
||||
<CCol lg={4}>
|
||||
<CCard>
|
||||
<CListGroup flush>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol lg={4}>
|
||||
<CCard>
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CListGroup flush>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol lg={4}>
|
||||
<CCard>
|
||||
<CListGroup flush>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardFooter>Footer</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Card</strong> <small>Kitchen sink</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Combine and match many content types to build the card you need, or throw everything
|
||||
in there. Shown below are image styles, blocks, text styles, and a list group—all
|
||||
wrapped in a fixed-width card.
|
||||
</p>
|
||||
<DocsExample href="components/card/#kitchen-sink">
|
||||
<CCard style={{ width: '18rem' }}>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
Some quick example text to build on the card title and make up the bulk of the
|
||||
card's content.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CListGroup flush>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardBody>
|
||||
<CCardLink href="#">Card link</CCardLink>
|
||||
<CCardLink href="#">Another link</CCardLink>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Card</strong> <small>Header and footer</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add an optional header and/or footer within a card.
|
||||
</p>
|
||||
<DocsExample href="components/card/#header-and-footer">
|
||||
<CCard>
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>Special title treatment</CCardTitle>
|
||||
<CCardText>
|
||||
With supporting text below as a natural lead-in to additional content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
Card headers can be styled by adding ex. <code>component="h5"</code>.
|
||||
</p>
|
||||
<DocsExample href="components/card/#header-and-footer">
|
||||
<CCard>
|
||||
<CCardHeader component="h5">Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>Special title treatment</CCardTitle>
|
||||
<CCardText>
|
||||
With supporting text below as a natural lead-in to additional content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/card/#header-and-footer">
|
||||
<CCard>
|
||||
<CCardHeader>Quote</CCardHeader>
|
||||
<CCardBody>
|
||||
<blockquote className="blockquote mb-0">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
|
||||
a ante.
|
||||
</p>
|
||||
<footer className="blockquote-footer">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/card/#header-and-footer">
|
||||
<CCard className="text-center">
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>Special title treatment</CCardTitle>
|
||||
<CCardText>
|
||||
With supporting text below as a natural lead-in to additional content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
<CCardFooter className="text-medium-emphasis">2 days ago</CCardFooter>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Card</strong> <small>Body</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Cards assume no specific <code>width</code> to start, so they'll be 100% wide
|
||||
unless otherwise stated. You can adjust this as required with custom CSS, grid
|
||||
classes, grid Sass mixins, or services.
|
||||
</p>
|
||||
<h3>Using grid markup</h3>
|
||||
<p className="text-medium-emphasis small">
|
||||
Using the grid, wrap cards in columns and rows as needed.
|
||||
</p>
|
||||
<DocsExample href="components/card/#sizing">
|
||||
<CRow>
|
||||
<CCol sm={6}>
|
||||
<CCard>
|
||||
<CCardBody>
|
||||
<CCardTitle>Special title treatment</CCardTitle>
|
||||
<CCardText>
|
||||
With supporting text below as a natural lead-in to additional content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm={6}>
|
||||
<CCard>
|
||||
<CCardBody>
|
||||
<CCardTitle>Special title treatment</CCardTitle>
|
||||
<CCardText>
|
||||
With supporting text below as a natural lead-in to additional content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
<h3>Using utilities</h3>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use some of{' '}
|
||||
<a href="https://coreui.io/docs/utilities/sizing/">available sizing utilities</a> to
|
||||
rapidly set a card's width.
|
||||
</p>
|
||||
<DocsExample href="components/card/#sizing">
|
||||
<CCard className="w-75">
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
With supporting text below as a natural lead-in to additional content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="w-50">
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
With supporting text below as a natural lead-in to additional content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
<strong>Using custom CSS</strong>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use custom CSS in your stylesheets or as inline styles to set a width.
|
||||
</p>
|
||||
<DocsExample href="components/card/#sizing">
|
||||
<CCard style={{ width: '18rem' }}>
|
||||
<CCardBody>
|
||||
<CCardTitle>Special title treatment</CCardTitle>
|
||||
<CCardText>
|
||||
With supporting text below as a natural lead-in to additional content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Card</strong> <small>Text alignment</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
You can instantly change the text arrangement of any card—in its whole or specific
|
||||
parts—with{' '}
|
||||
<a href="https://coreui.io/docs/utilities/text/#text-alignment">text align classes</a>
|
||||
.
|
||||
</p>
|
||||
<DocsExample href="components/card/#text-alignment">
|
||||
<CCard style={{ width: '18rem' }}>
|
||||
<CCardBody>
|
||||
<CCardTitle>Special title treatment</CCardTitle>
|
||||
<CCardText>
|
||||
With supporting text below as a natural lead-in to additional content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="text-center" style={{ width: '18rem' }}>
|
||||
<CCardBody>
|
||||
<CCardTitle>Special title treatment</CCardTitle>
|
||||
<CCardText>
|
||||
With supporting text below as a natural lead-in to additional content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="text-end" style={{ width: '18rem' }}>
|
||||
<CCardBody>
|
||||
<CCardTitle>Special title treatment</CCardTitle>
|
||||
<CCardText>
|
||||
With supporting text below as a natural lead-in to additional content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Card</strong> <small>Navigation</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add some navigation to a <code><CCardHeader></code> with our{' '}
|
||||
<code><CNav></code> component.
|
||||
</p>
|
||||
<DocsExample href="components/card/##navigation">
|
||||
<CCard className="text-center">
|
||||
<CCardHeader>
|
||||
<CNav variant="tabs" className="card-header-tabs">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>Special title treatment</CCardTitle>
|
||||
<CCardText>
|
||||
With supporting text below as a natural lead-in to additional content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/card/##navigation">
|
||||
<CCard className="text-center">
|
||||
<CCardHeader>
|
||||
<CNav variant="pills" className="card-header-pills">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>Special title treatment</CCardTitle>
|
||||
<CCardText>
|
||||
With supporting text below as a natural lead-in to additional content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Card</strong> <small>Image caps</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Similar to headers and footers, cards can include top and bottom "image
|
||||
caps"—images at the top or bottom of a card.
|
||||
</p>
|
||||
<DocsExample href="components/card/#image-caps">
|
||||
<CRow>
|
||||
<CCol lg={6}>
|
||||
<CCard className="mb-3">
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This content is a little bit longer.
|
||||
</CCardText>
|
||||
<CCardText>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol lg={6}>
|
||||
<CCard className="mb-3">
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This content is a little bit longer.
|
||||
</CCardText>
|
||||
<CCardText>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CCardImage orientation="bottom" src={ReactImg} />
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Card</strong> <small>Card styles</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Cards include various options for customizing their backgrounds, borders, and color.
|
||||
</p>
|
||||
<h3>Background and color</h3>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use <code>color</code> property to change the appearance of a card.
|
||||
</p>
|
||||
<DocsExample href="components/card/#background-and-color">
|
||||
<CRow>
|
||||
{[
|
||||
{ color: 'primary', textColor: 'white' },
|
||||
{ color: 'secondary', textColor: 'white' },
|
||||
{ color: 'success', textColor: 'white' },
|
||||
{ color: 'danger', textColor: 'white' },
|
||||
{ color: 'warning' },
|
||||
{ color: 'info', textColor: 'white' },
|
||||
{ color: 'light' },
|
||||
{ color: 'dark', textColor: 'white' },
|
||||
].map((item, index) => (
|
||||
<CCol lg={4} key={index}>
|
||||
<CCard color={item.color} textColor={item.textColor} className="mb-3">
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>{item.color} card title</CCardTitle>
|
||||
<CCardText>
|
||||
Some quick example text to build on the card title and make up the bulk of
|
||||
the card's content.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
))}
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
<h3>Border</h3>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
|
||||
just the <code>border-color</code> of a card. Note that you can set{' '}
|
||||
<code>textColor</code> property on the <code><CCard></code> or a subset of the
|
||||
card's contents as shown below.
|
||||
</p>
|
||||
<DocsExample href="components/card/#border">
|
||||
<CRow>
|
||||
{[
|
||||
{ color: 'primary', textColor: 'primary' },
|
||||
{ color: 'secondary', textColor: 'secondary' },
|
||||
{ color: 'success', textColor: 'success' },
|
||||
{ color: 'danger', textColor: 'danger' },
|
||||
{ color: 'warning', textColor: 'warning' },
|
||||
{ color: 'info', textColor: 'info' },
|
||||
{ color: 'light' },
|
||||
{ color: 'dark' },
|
||||
].map((item, index) => (
|
||||
<CCol lg={4} key={index}>
|
||||
<CCard textColor={item.textColor} className={`mb-3 border-${item.color}`}>
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>{item.color} card title</CCardTitle>
|
||||
<CCardText>
|
||||
Some quick example text to build on the card title and make up the bulk of
|
||||
the card's content.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
))}
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
<h3>Top border</h3>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
|
||||
just the <code>border-color</code> of a card. Note that you can set{' '}
|
||||
<code>textColor</code> property on the <code><CCard></code> or a subset of the
|
||||
card's contents as shown below.
|
||||
</p>
|
||||
<DocsExample href="components/card/#top-border">
|
||||
<CRow>
|
||||
{[
|
||||
{ color: 'primary', textColor: 'primary' },
|
||||
{ color: 'secondary', textColor: 'secondary' },
|
||||
{ color: 'success', textColor: 'success' },
|
||||
{ color: 'danger', textColor: 'danger' },
|
||||
{ color: 'warning', textColor: 'warning' },
|
||||
{ color: 'info', textColor: 'info' },
|
||||
{ color: 'light' },
|
||||
{ color: 'dark' },
|
||||
].map((item, index) => (
|
||||
<CCol lg={4} key={index}>
|
||||
<CCard
|
||||
textColor={item.textColor}
|
||||
className={`mb-3 border-top-${item.color} border-top-3`}
|
||||
>
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>{item.color} card title</CCardTitle>
|
||||
<CCardText>
|
||||
Some quick example text to build on the card title and make up the bulk of
|
||||
the card's content.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
))}
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Card</strong> <small>Card groups</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use card groups to render cards as a single, attached element with equal width and
|
||||
height columns. Card groups start off stacked and use <code>display: flex;</code> to
|
||||
become attached with uniform dimensions starting at the <code>sm</code> breakpoint.
|
||||
</p>
|
||||
<DocsExample href="components/card/#card-groups">
|
||||
<CCardGroup>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This content is a little bit longer.
|
||||
</CCardText>
|
||||
<CCardText>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This card has supporting text below as a natural lead-in to additional
|
||||
content.
|
||||
</CCardText>
|
||||
<CCardText>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This card has even longer content than the first to show
|
||||
that equal height action.
|
||||
</CCardText>
|
||||
<CCardText>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
When using card groups with footers, their content will automatically line up.
|
||||
</p>
|
||||
<DocsExample href="components/card/#card-groups">
|
||||
<CCardGroup>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This content is a little bit longer.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This card has supporting text below as a natural lead-in to additional
|
||||
content.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This card has even longer content than the first to show
|
||||
that equal height action.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Card</strong> <small>Grid cards</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use the <code>CRow</code> component and set{' '}
|
||||
<code>{xs|sm|md|lg|xl|xxl}={{ cols: * }}</code> property
|
||||
to control how many grid columns (wrapped around your cards) you show per row. For
|
||||
example, here's <code>xs={{cols: 1}}</code> laying out the
|
||||
cards on one column, and <code>md={{cols: 1}}</code> splitting
|
||||
four cards to equal width across multiple rows, from the medium breakpoint up.
|
||||
</p>
|
||||
<DocsExample href="components/card/#grid-cards">
|
||||
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This content is a little bit longer.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This content is a little bit longer.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This content is a little bit longer.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This content is a little bit longer.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
Change it to <code>md={{ cols: 3}}</code> and you'll see the
|
||||
fourth card wrap.
|
||||
</p>
|
||||
<DocsExample href="components/card/#grid-cards">
|
||||
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This content is a little bit longer.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This content is a little bit longer.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This content is a little bit longer.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content. This content is a little bit longer.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Cards
|
||||
@ -1,215 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCarousel,
|
||||
CCarouselCaption,
|
||||
CCarouselItem,
|
||||
CCol,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
import AngularImg from 'src/assets/images/angular.jpg'
|
||||
import ReactImg from 'src/assets/images/react.jpg'
|
||||
import VueImg from 'src/assets/images/vue.jpg'
|
||||
|
||||
const slidesLight = [
|
||||
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23BBB%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23EEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23E5E5E5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||
]
|
||||
|
||||
const Carousels = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Carousel" href="components/carousel" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Carousel</strong> <small>Slide only</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">Here’s a carousel with slides</p>
|
||||
<DocsExample href="components/carousel">
|
||||
<CCarousel>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={ReactImg} alt="slide 1" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={AngularImg} alt="slide 2" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={VueImg} alt="slide 3" />
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Carousel</strong> <small>With controls</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Adding in the previous and next controls by <code>controls</code> property.
|
||||
</p>
|
||||
<DocsExample href="components/carousel/#with-controls">
|
||||
<CCarousel controls>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={ReactImg} alt="slide 1" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={AngularImg} alt="slide 2" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={VueImg} alt="slide 3" />
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Carousel</strong> <small>With indicators</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
You can attach the indicators to the carousel, lengthwise the controls, too.
|
||||
</p>
|
||||
<DocsExample href="components/carousel/#with-indicators">
|
||||
<CCarousel controls indicators>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={ReactImg} alt="slide 1" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={AngularImg} alt="slide 2" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={VueImg} alt="slide 3" />
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Carousel</strong> <small>With captions</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
You can add captions to slides with the <code><CCarouselCaption></code> element
|
||||
within any <code><CCarouselItem></code>. They can be immediately hidden on
|
||||
smaller viewports, as shown below, with optional{' '}
|
||||
<a href="https://coreui.io/4.0/utilities/display">display utilities</a>. We hide them
|
||||
with <code>.d-none</code> and draw them back on medium-sized devices with{' '}
|
||||
<code>.d-md-block</code>.
|
||||
</p>
|
||||
<DocsExample href="components/carousel/#with-captions">
|
||||
<CCarousel controls indicators>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={ReactImg} alt="slide 1" />
|
||||
<CCarouselCaption className="d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={AngularImg} alt="slide 2" />
|
||||
<CCarouselCaption className="d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={VueImg} alt="slide 3" />
|
||||
<CCarouselCaption className="d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Carousel</strong> <small>Crossfade</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code>transition="crossfade"</code> to your carousel to animate slides
|
||||
with a fade transition instead of a slide.
|
||||
</p>
|
||||
<DocsExample href="components/carousel/#crossfade">
|
||||
<CCarousel controls transition="crossfade">
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={ReactImg} alt="slide 1" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={AngularImg} alt="slide 2" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={VueImg} alt="slide 3" />
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Carousel</strong> <small>Dark variant</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code>dark</code> property to the <code>CCarousel</code> for darker controls,
|
||||
indicators, and captions. Controls have been inverted from their default white fill
|
||||
with the <code>filter</code> CSS property. Captions and controls have additional Sass
|
||||
variables that customize the <code>color</code> and <code>background-color</code>.
|
||||
</p>
|
||||
<DocsExample href="components/carousel/#dark-variant">
|
||||
<CCarousel controls indicators dark>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slidesLight[0]} alt="slide 1" />
|
||||
<CCarouselCaption className="d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slidesLight[1]} alt="slide 2" />
|
||||
<CCarouselCaption className="d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slidesLight[2]} alt="slide 3" />
|
||||
<CCarouselCaption className="d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Carousels
|
||||
@ -1,129 +0,0 @@
|
||||
import React, { useState } from 'react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CCol, CCollapse, CRow } from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Collapses = () => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
const [visibleHorizontal, setVisibleHorizontal] = useState(false)
|
||||
const [visibleA, setVisibleA] = useState(false)
|
||||
const [visibleB, setVisibleB] = useState(false)
|
||||
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Collapse" href="components/collapse" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Collapse</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">You can use a link or a button component.</p>
|
||||
<DocsExample href="components/collapse">
|
||||
<CButton
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
setVisible(!visible)
|
||||
}}
|
||||
>
|
||||
Link
|
||||
</CButton>
|
||||
<CButton onClick={() => setVisible(!visible)}>Button</CButton>
|
||||
<CCollapse visible={visible}>
|
||||
<CCard className="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
||||
anderson cred nesciunt sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Collapse</strong> <small> Horizontal</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">You can use a link or a button component.</p>
|
||||
<DocsExample href="components/collapse#horizontal">
|
||||
<CButton
|
||||
className="mb-3"
|
||||
onClick={() => setVisibleHorizontal(!visibleHorizontal)}
|
||||
aria-expanded={visibleHorizontal}
|
||||
aria-controls="collapseWidthExample"
|
||||
>
|
||||
Button
|
||||
</CButton>
|
||||
<div style={{ minHeight: '120px' }}>
|
||||
<CCollapse id="collapseWidthExample" horizontal visible={visibleHorizontal}>
|
||||
<CCard style={{ width: '300px' }}>
|
||||
<CCardBody>
|
||||
This is some placeholder content for a horizontal collapse. It's hidden by
|
||||
default and shown when triggered.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</div>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Collapse</strong> <small> multi target</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
A <code><CButton></code> can show and hide multiple elements.
|
||||
</p>
|
||||
<DocsExample href="components/collapse#multiple-targets">
|
||||
<CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
|
||||
<CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
|
||||
<CButton
|
||||
onClick={() => {
|
||||
setVisibleA(!visibleA)
|
||||
setVisibleB(!visibleB)
|
||||
}}
|
||||
>
|
||||
Toggle both elements
|
||||
</CButton>
|
||||
<CRow>
|
||||
<CCol xs={6}>
|
||||
<CCollapse visible={visibleA}>
|
||||
<CCard className="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
||||
anderson cred nesciunt sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCollapse visible={visibleB}>
|
||||
<CCard className="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
||||
anderson cred nesciunt sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Collapses
|
||||
@ -1,31 +0,0 @@
|
||||
import Breadcrumbs from './Breadcrumbs'
|
||||
import Cards from './Cards'
|
||||
import Carousels from './Carousels'
|
||||
import Collapses from './Collapses'
|
||||
import Dropdowns from './Dropdowns'
|
||||
import Jumbotrons from './Jumbotrons'
|
||||
import ListGroups from './ListGroups'
|
||||
import Navbars from './Navbars'
|
||||
import Navs from './Navs'
|
||||
import Paginations from './Paginations'
|
||||
import Popovers from './Popovers'
|
||||
import ProgressBar from './ProgressBar'
|
||||
import Tabs from './Tabs'
|
||||
import Tooltips from './Tooltips'
|
||||
|
||||
export {
|
||||
Breadcrumbs,
|
||||
Cards,
|
||||
Carousels,
|
||||
Collapses,
|
||||
Dropdowns,
|
||||
Jumbotrons,
|
||||
ListGroups,
|
||||
Navbars,
|
||||
Navs,
|
||||
Popovers,
|
||||
ProgressBar,
|
||||
Tabs,
|
||||
Tooltips,
|
||||
Paginations,
|
||||
}
|
||||
@ -1,56 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CCol, CContainer, CRow } from '@coreui/react'
|
||||
import { DocsLink } from 'src/components'
|
||||
|
||||
const Jumbotrons = () => {
|
||||
return (
|
||||
<>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Jumbotron
|
||||
<DocsLink name="CJumbotron" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CContainer className="py-5" fluid>
|
||||
<h1 className="display-5 fw-bold">Custom jumbotron</h1>
|
||||
<p className="col-md-8 fs-4">
|
||||
Using a series of utilities, you can create this jumbotron, just like the one in
|
||||
previous versions of Bootstrap. Check out the examples below for how you can remix and
|
||||
restyle it to your liking.
|
||||
</p>
|
||||
<CButton size="lg">Example button</CButton>
|
||||
</CContainer>
|
||||
<CRow className="align-items-md-stretch">
|
||||
<CCol md={6}>
|
||||
<div className="h-100 p-5 text-white bg-dark rounded-3">
|
||||
<h2>Change the background</h2>
|
||||
<p>
|
||||
Swap the background-color utility and add a `.text-*` color utility to mix up the
|
||||
jumbotron look. Then, mix and match with additional component themes and more.
|
||||
</p>
|
||||
<CButton color="light" variant="outline">
|
||||
DocsExample button
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol md={6}>
|
||||
<div className="h-100 p-5 bg-light border rounded-3">
|
||||
<h2>Add borders</h2>
|
||||
<p>
|
||||
Or, keep it light and add a border for some added definition to the boundaries of
|
||||
your content. Be sure to look under the hood at the source HTML here as we've
|
||||
adjusted the alignment and sizing of both column's content for equal-height.
|
||||
</p>
|
||||
<CButton color="secondary" variant="outline">
|
||||
DocsExample button
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Jumbotrons
|
||||
@ -1,349 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CBadge,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CFormCheck,
|
||||
CListGroup,
|
||||
CListGroupItem,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const ListGroups = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="List Group" href="components/list-group" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React List Group</strong> <small>Basic example</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
The default list group is an unordered list with items and the proper CSS classes.
|
||||
Build upon it with the options that follow, or with your CSS as required.
|
||||
</p>
|
||||
<DocsExample href="components/list-group">
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React List Group</strong> <small>Active items</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code>active</code> boolean property to a <code><CListGroupItem></code> to
|
||||
show the current active selection.
|
||||
</p>
|
||||
<DocsExample href="components/list-group/#active-items">
|
||||
<CListGroup>
|
||||
<CListGroupItem active>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React List Group</strong> <small>Disabled items</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code>disabled</code> boolean property to a <code><CListGroupItem></code> to
|
||||
make it appear disabled.
|
||||
</p>
|
||||
<DocsExample href="components/list-group/#disabled-items">
|
||||
<CListGroup>
|
||||
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React List Group</strong> <small>Links and buttons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use <code><a></code>s or <code><button></code>s to create{' '}
|
||||
<em>actionable</em> list group items with hover, disabled, and active states by adding{' '}
|
||||
<code>component="a|button"</code>. We separate these pseudo-classes to ensure
|
||||
list groups made of non-interactive elements (like <code><li></code>s or{' '}
|
||||
<code><div></code>
|
||||
s) don'tprovide a click or tap affordance.
|
||||
</p>
|
||||
<DocsExample href="components/list-group/#links-and-buttons">
|
||||
<CListGroup>
|
||||
<CListGroupItem component="a" href="#" active>
|
||||
Cras justo odio
|
||||
</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">
|
||||
Dapibus ac facilisis in
|
||||
</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">
|
||||
Morbi leo risus
|
||||
</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">
|
||||
Porta ac consectetur ac
|
||||
</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#" disabled>
|
||||
Vestibulum at eros
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React List Group</strong> <small>Flush</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code>flush</code> boolean property to remove some borders and rounded corners to
|
||||
render list group items edge-to-edge in a parent container (e.g., cards).
|
||||
</p>
|
||||
<DocsExample href="components/list-group/#flush">
|
||||
<CListGroup flush>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React List Group</strong> <small>Horizontal</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code>layout="horizontal"</code> to change the layout of list group items
|
||||
from vertical to horizontal across all breakpoints. Alternatively, choose a responsive
|
||||
variant <code>.layout="horizontal-{sm | md | lg | xl | xxl}"</code>{' '}
|
||||
to make a list group horizontal starting at that breakpoint's{' '}
|
||||
<code>min-width</code>. Currently{' '}
|
||||
<strong>horizontal list groups cannot be combined with flush list groups.</strong>
|
||||
</p>
|
||||
<DocsExample href="components/list-group/#flush">
|
||||
{['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => (
|
||||
<CListGroup className="mb-2" layout={`horizontal${breakpoint}`} key={index}>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
</CListGroup>
|
||||
))}
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React List Group</strong> <small>Contextual classes</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use contextual classes to style list items with a stateful background and color.
|
||||
</p>
|
||||
<DocsExample href="components/list-group/#contextual-classes">
|
||||
<CListGroup>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
{[
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
].map((color, index) => (
|
||||
<CListGroupItem color={color} key={index}>
|
||||
A simple {color} list group item
|
||||
</CListGroupItem>
|
||||
))}
|
||||
</CListGroup>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
Contextual classes also work with <code><a></code>s or{' '}
|
||||
<code><button></code>s. Note the addition of the hover styles here not present
|
||||
in the previous example. Also supported is the <code>active</code> state; apply it to
|
||||
indicate an active selection on a contextual list group item.
|
||||
</p>
|
||||
<DocsExample href="components/list-group/#contextual-classes">
|
||||
<CListGroup>
|
||||
<CListGroupItem component="a" href="#">
|
||||
Dapibus ac facilisis in
|
||||
</CListGroupItem>
|
||||
{[
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
].map((color, index) => (
|
||||
<CListGroupItem component="a" href="#" color={color} key={index}>
|
||||
A simple {color} list group item
|
||||
</CListGroupItem>
|
||||
))}
|
||||
</CListGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React List Group</strong> <small>With badges</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add badges to any list group item to show unread counts, activity, and more.
|
||||
</p>
|
||||
<DocsExample href="components/list-group/#with-badges">
|
||||
<CListGroup>
|
||||
<CListGroupItem className="d-flex justify-content-between align-items-center">
|
||||
Cras justo odio
|
||||
<CBadge color="primary" shape="rounded-pill">
|
||||
14
|
||||
</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem className="d-flex justify-content-between align-items-center">
|
||||
Dapibus ac facilisis in
|
||||
<CBadge color="primary" shape="rounded-pill">
|
||||
2
|
||||
</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem className="d-flex justify-content-between align-items-center">
|
||||
Morbi leo risus
|
||||
<CBadge color="primary" shape="rounded-pill">
|
||||
1
|
||||
</CBadge>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React List Group</strong> <small>Custom content</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add nearly any HTML within, even for linked list groups like the one below, with the
|
||||
help of <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
|
||||
</p>
|
||||
<DocsExample href="components/list-group/#custom-content">
|
||||
<CListGroup>
|
||||
<CListGroupItem component="a" href="#" active>
|
||||
<div className="d-flex w-100 justify-content-between">
|
||||
<h5 className="mb-1">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p className="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
|
||||
varius blandit.
|
||||
</p>
|
||||
<small>Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">
|
||||
<div className="d-flex w-100 justify-content-between">
|
||||
<h5 className="mb-1">List group item heading</h5>
|
||||
<small className="text-medium-emphasis">3 days ago</small>
|
||||
</div>
|
||||
<p className="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
|
||||
varius blandit.
|
||||
</p>
|
||||
<small className="text-medium-emphasis">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">
|
||||
<div className="d-flex w-100 justify-content-between">
|
||||
<h5 className="mb-1">List group item heading</h5>
|
||||
<small className="text-medium-emphasis">3 days ago</small>
|
||||
</div>
|
||||
<p className="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
|
||||
varius blandit.
|
||||
</p>
|
||||
<small className="text-medium-emphasis">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React List Group</strong> <small>Checkboxes and radios</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Place CoreUI's checkboxes and radios within list group items and customize as
|
||||
needed.
|
||||
</p>
|
||||
<DocsExample href="components/list-group/#checkboxes-and-radios">
|
||||
<CListGroup>
|
||||
<CListGroupItem>
|
||||
<CFormCheck label="Cras justo odio" />
|
||||
</CListGroupItem>
|
||||
<CListGroupItem>
|
||||
<CFormCheck label="Dapibus ac facilisis in" defaultChecked />
|
||||
</CListGroupItem>
|
||||
<CListGroupItem>
|
||||
<CFormCheck label="Morbi leo risus" defaultChecked />
|
||||
</CListGroupItem>
|
||||
<CListGroupItem>
|
||||
<CFormCheck label="orta ac consectetur ac" />
|
||||
</CListGroupItem>
|
||||
<CListGroupItem>
|
||||
<CFormCheck label="Vestibulum at eros" />
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default ListGroups
|
||||
@ -1,174 +0,0 @@
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCollapse,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CImage,
|
||||
CNavbar,
|
||||
CNavbarNav,
|
||||
CNavbarBrand,
|
||||
CNavbarText,
|
||||
CNavbarToggler,
|
||||
CNavLink,
|
||||
CDropdown,
|
||||
CButton,
|
||||
} from '@coreui/react'
|
||||
import { DocsLink } from 'src/components'
|
||||
|
||||
const CNavbars = () => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
const [isOpenDropdown, setIsOpenDropdown] = useState(false)
|
||||
const [navbarText, setNavbarText] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
CNavbar
|
||||
<DocsLink name="CNavbar" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar expandable="sm" color="info">
|
||||
<CNavbarToggler onClick={() => setVisible(!visible)} />
|
||||
<CNavbarBrand>NavbarBrand</CNavbarBrand>
|
||||
<CCollapse show={visible} navbar>
|
||||
<CNavbarNav>
|
||||
<CNavLink>Home</CNavLink>
|
||||
<CNavLink>Link</CNavLink>
|
||||
</CNavbarNav>
|
||||
<CNavbarNav className="ms-auto">
|
||||
<CForm className="d-flex">
|
||||
<CFormInput className="me-sm-2" placeholder="Search" size="sm" />
|
||||
<CButton color="light" className="my-2 my-sm-0" type="submit">
|
||||
Search
|
||||
</CButton>
|
||||
</CForm>
|
||||
<CDropdown inNav>
|
||||
<CDropdownToggle color="primary">Lang</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown inNav>
|
||||
<CDropdownToggle color="primary">User</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>Account</CDropdownItem>
|
||||
<CDropdownItem>Settings</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>CNavbar brand</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar color="faded" light>
|
||||
<CNavbarBrand>
|
||||
<CImage
|
||||
src="https://placekitten.com/g/30/30"
|
||||
className="d-inline-block align-top"
|
||||
alt="CoreuiVue"
|
||||
/>
|
||||
CoreUI React
|
||||
</CNavbarBrand>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>CNavbar text</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar toggleable="sm" light color="light">
|
||||
<CNavbarToggler
|
||||
inNavbar
|
||||
onClick={() => {
|
||||
setNavbarText(!navbarText)
|
||||
}}
|
||||
/>
|
||||
<CNavbarBrand>NavbarBrand</CNavbarBrand>
|
||||
<CCollapse show={navbarText}>
|
||||
<CNavbarNav>
|
||||
<CNavbarText>Navbar text</CNavbarText>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>CNavbar dropdown</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar expandable="false" color="primary">
|
||||
<CNavbarToggler
|
||||
inNavbar
|
||||
onClick={() => {
|
||||
setIsOpenDropdown(!isOpenDropdown)
|
||||
}}
|
||||
/>
|
||||
<CCollapse show={isOpenDropdown} navbar>
|
||||
<CNavbarNav>
|
||||
<CNavLink>Home</CNavLink>
|
||||
<CNavLink>Link</CNavLink>
|
||||
<CDropdown inNav>
|
||||
<CDropdownToggle color="primary">Lang</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown inNav>
|
||||
<CDropdownToggle color="primary">User</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>Account</CDropdownItem>
|
||||
<CDropdownItem>Settings</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>CNavbar form</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar light color="light">
|
||||
<CForm className="d-flex">
|
||||
<CFormInput className="me-sm-2" placeholder="Search" size="sm" />
|
||||
<CButton color="outline-success" className="my-2 my-sm-0" type="submit">
|
||||
Search
|
||||
</CButton>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>CNavbar input group</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar light color="light">
|
||||
<CForm className="d-flex">
|
||||
<CFormInput className="me-sm-2" placeholder="Username" />
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default CNavbars
|
||||
@ -1,400 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CRow,
|
||||
CCol,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CDropdown,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CNav,
|
||||
CNavItem,
|
||||
CNavLink,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Navs = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Nav" href="components/nav" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Navs</strong> <small>Base navs</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
The base <code>.nav</code> component is built with flexbox and provide a strong
|
||||
foundation for building all types of navigation components. It includes some style
|
||||
overrides (for working with lists), some link padding for larger hit areas, and basic
|
||||
disabled styling.
|
||||
</p>
|
||||
<DocsExample href="components/nav#base-nav">
|
||||
<CNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
Classes are used throughout, so your markup can be super flexible. Use{' '}
|
||||
<code><ul></code>s like above, <code><ol></code> if the order of your
|
||||
items is important, or roll your own with a <code><nav></code> element. Because
|
||||
the .nav uses display: flex, the nav links behave the same as nav items would, but
|
||||
without the extra markup.
|
||||
</p>
|
||||
<DocsExample href="components/nav#base-nav">
|
||||
<CNav component="nav">
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNav>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Navs</strong> <small>Horizontal alignment</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Change the horizontal alignment of your nav with{' '}
|
||||
<a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
|
||||
flexbox utilities
|
||||
</a>
|
||||
. By default, navs are left-aligned, but you can easily change them to center or right
|
||||
aligned.
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
Centered with <code>.justify-content-center</code>:
|
||||
</p>
|
||||
<DocsExample href="components/nav#horizontal-alignment">
|
||||
<CNav className="justify-content-center">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
Right-aligned with <code>.justify-content-end</code>:
|
||||
</p>
|
||||
<DocsExample href="components/nav#base-nav">
|
||||
<CNav className="justify-content-end">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Navs</strong> <small>Vertical</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Stack your navigation by changing the flex item direction with the{' '}
|
||||
<code>.flex-column</code> utility. Need to stack them on some viewports but not
|
||||
others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
|
||||
</p>
|
||||
<DocsExample href="components/nav#vertical">
|
||||
<CNav className="flex-column">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Navs</strong> <small>Tabs</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Takes the basic nav from above and adds the <code>variant="tabs"</code> class
|
||||
to generate a tabbed interface
|
||||
</p>
|
||||
<DocsExample href="components/nav#tabs">
|
||||
<CNav variant="tabs">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Navs</strong> <small>Pills</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Take that same HTML, but use <code>variant="pills"</code> instead:
|
||||
</p>
|
||||
<DocsExample href="components/nav#pills">
|
||||
<CNav variant="pills">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Navs</strong> <small>Fill and justify</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Force your <code>.nav</code>'s contents to extend the full available width one of
|
||||
two modifier classes. To proportionately fill all available space with your{' '}
|
||||
<code>.nav-item</code>s, use <code>layout="fill"</code>. Notice that all
|
||||
horizontal space is occupied, but not every nav item has the same width.
|
||||
</p>
|
||||
<DocsExample href="components/nav#fill-and-justify">
|
||||
<CNav variant="pills" layout="fill">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
For equal-width elements, use <code>layout="justified"</code>. All horizontal
|
||||
space will be occupied by nav links, but unlike the .nav-fill above, every nav item
|
||||
will be the same width.
|
||||
</p>
|
||||
<DocsExample href="components/nav#fill-and-justify">
|
||||
<CNav variant="pills" layout="justified">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Navs</strong> <small>Working with flex utilities</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
If you need responsive nav variations, consider using a series of{' '}
|
||||
<a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a>. While more
|
||||
verbose, these utilities offer greater customization across responsive breakpoints. In
|
||||
the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
|
||||
horizontal layout that fills the available width starting from the small breakpoint.
|
||||
</p>
|
||||
<DocsExample href="components/nav#working-with-flex-utilities">
|
||||
<CNav component="nav" variant="pills" className="flex-column flex-sm-row">
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNav>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Navs</strong> <small>Tabs with dropdowns</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="components/nav#tabs-with-dropdowns">
|
||||
<CNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CDropdown variant="nav-item">
|
||||
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Navs</strong> <small>Pills with dropdowns</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="components/nav#pills-with-dropdowns">
|
||||
<CNav variant="pills">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CDropdown variant="nav-item">
|
||||
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navs
|
||||
@ -1,177 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CPagination,
|
||||
CPaginationItem,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Paginations = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Pagination" href="components/pagination" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Pagination</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
We use a large block of connected links for our pagination, making links hard to miss
|
||||
and easily scalable—all while providing large hit areas. Pagination is built with list
|
||||
HTML elements so screen readers can announce the number of available links. Use a
|
||||
wrapping <code><nav></code> element to identify it as a navigation section to
|
||||
screen readers and other assistive technologies.
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
In addition, as pages likely have more than one such navigation section, it's
|
||||
advisable to provide a descriptive <code>aria-label</code> for the{' '}
|
||||
<code><nav></code> to reflect its purpose. For example, if the pagination
|
||||
component is used to navigate between a set of search results, an appropriate label
|
||||
could be <code>aria-label="Search results pages"</code>.
|
||||
</p>
|
||||
<DocsExample href="components/pagination">
|
||||
<CPagination aria-label="Page navigation example">
|
||||
<CPaginationItem>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Pagination</strong> <small>Working with icons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Looking to use an icon or symbol in place of text for some pagination links? Be sure
|
||||
to provide proper screen reader support with <code>aria</code> attributes.
|
||||
</p>
|
||||
<DocsExample href="components/pagination#working-with-icons">
|
||||
<CPagination aria-label="Page navigation example">
|
||||
<CPaginationItem aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</CPaginationItem>
|
||||
</CPagination>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Pagination</strong> <small>Disabled and active states</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Pagination links are customizable for different circumstances. Use{' '}
|
||||
<code>disabled</code> for links that appear un-clickable and <code>.active</code> to
|
||||
indicate the current page.
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
While the <code>disabled</code> prop uses <code>pointer-events: none</code> to{' '}
|
||||
<em>try</em> to disable the link functionality of <code><a></code>s, that CSS
|
||||
property is not yet standardized and doesn'taccount for keyboard navigation. As
|
||||
such, we always add <code>tabindex="-1"</code> on disabled links and use
|
||||
custom JavaScript to fully disable their functionality.
|
||||
</p>
|
||||
<DocsExample href="components/pagination#disabled-and-active-states">
|
||||
<CPagination aria-label="Page navigation example">
|
||||
<CPaginationItem aria-label="Previous" disabled>
|
||||
<span aria-hidden="true">«</span>
|
||||
</CPaginationItem>
|
||||
<CPaginationItem active>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</CPaginationItem>
|
||||
</CPagination>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Pagination</strong> <small>Sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Fancy larger or smaller pagination? Add <code>size="lg"</code> or{' '}
|
||||
<code>size="sm"</code> for additional sizes.
|
||||
</p>
|
||||
<DocsExample href="components/pagination#sizing">
|
||||
<CPagination size="lg" aria-label="Page navigation example">
|
||||
<CPaginationItem>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/pagination#sizing">
|
||||
<CPagination size="sm" aria-label="Page navigation example">
|
||||
<CPaginationItem>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Pagination</strong> <small>Alignment</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Change the alignment of pagination components with{' '}
|
||||
<a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
|
||||
</p>
|
||||
<DocsExample href="components/pagination#aligment">
|
||||
<CPagination className="justify-content-center" aria-label="Page navigation example">
|
||||
<CPaginationItem disabled>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/pagination#aligment">
|
||||
<CPagination className="justify-content-end" aria-label="Page navigation example">
|
||||
<CPaginationItem disabled>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Paginations
|
||||
@ -1,196 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCardImage,
|
||||
CCardText,
|
||||
CCardTitle,
|
||||
CCol,
|
||||
CPlaceholder,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
import ReactImg from 'src/assets/images/react.jpg'
|
||||
|
||||
const Placeholders = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Placeholder" href="components/placeholder" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Placeholder</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
In the example below, we take a typical card component and recreate it with
|
||||
placeholders applied to create a "loading card". Size and proportions are the
|
||||
same between the two.
|
||||
</p>
|
||||
<DocsExample href="components/placeholder">
|
||||
<div className="d-flex justify-content-around p-3">
|
||||
<CCard style={{ width: '18rem' }}>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
Some quick example text to build on the card title and make up the bulk of the
|
||||
card's content.
|
||||
</CCardText>
|
||||
<CButton href="#">Go somewhere</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard style={{ width: '18rem' }}>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
width="100%"
|
||||
height="162"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
</CCardImage>
|
||||
<CCardBody>
|
||||
<CPlaceholder component={CCardTitle} animation="glow" xs={7}>
|
||||
<CPlaceholder xs={6} />
|
||||
</CPlaceholder>
|
||||
<CPlaceholder component={CCardText} animation="glow">
|
||||
<CPlaceholder xs={7} />
|
||||
<CPlaceholder xs={4} />
|
||||
<CPlaceholder xs={4} />
|
||||
<CPlaceholder xs={6} />
|
||||
<CPlaceholder xs={8} />
|
||||
</CPlaceholder>
|
||||
<CPlaceholder
|
||||
component={CButton}
|
||||
disabled
|
||||
href="#"
|
||||
tabIndex={-1}
|
||||
xs={6}
|
||||
></CPlaceholder>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Placeholder</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Create placeholders with the <code><CPlaceholder></code> component and a grid
|
||||
column propx (e.g., <code>xs={6}</code>) to set the <code>width</code>. They can
|
||||
replace the text inside an element or be added as a modifier class to an existing
|
||||
component.
|
||||
</p>
|
||||
<DocsExample href="components/placeholder">
|
||||
<p aria-hidden="true">
|
||||
<CPlaceholder xs={6} />
|
||||
</p>
|
||||
<CPlaceholder
|
||||
component={CButton}
|
||||
aria-hidden="true"
|
||||
disabled
|
||||
href="#"
|
||||
tabIndex={-1}
|
||||
xs={4}
|
||||
></CPlaceholder>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Placeholder</strong> <small> Width</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
You can change the <code>width</code> through grid column classes, width utilities, or
|
||||
inline styles.
|
||||
</p>
|
||||
<DocsExample href="components/placeholder#width">
|
||||
<CPlaceholder xs={6} />
|
||||
<CPlaceholder className="w-75" />
|
||||
<CPlaceholder style={{ width: '30%' }} />
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Placeholder</strong> <small> Color</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
By default, the <code><CPlaceholder></code> uses <code>currentColor</code>. This
|
||||
can be overridden with a custom color or utility class.
|
||||
</p>
|
||||
<DocsExample href="components/placeholder#color">
|
||||
<CPlaceholder xs={12} />
|
||||
|
||||
<CPlaceholder color="primary" xs={12} />
|
||||
<CPlaceholder color="secondary" xs={12} />
|
||||
<CPlaceholder color="success" xs={12} />
|
||||
<CPlaceholder color="danger" xs={12} />
|
||||
<CPlaceholder color="warning" xs={12} />
|
||||
<CPlaceholder color="info" xs={12} />
|
||||
<CPlaceholder color="light" xs={12} />
|
||||
<CPlaceholder color="dark" xs={12} />
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Placeholder</strong> <small> Sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
The size of <code><CPlaceholder></code>s are based on the typographic style of
|
||||
the parent element. Customize them with <code>size</code> prop: <code>lg</code>,{' '}
|
||||
<code>sm</code>, or <code>xs</code>.
|
||||
</p>
|
||||
<DocsExample href="components/placeholder#sizing">
|
||||
<CPlaceholder xs={12} size="lg" />
|
||||
<CPlaceholder xs={12} />
|
||||
<CPlaceholder xs={12} size="sm" />
|
||||
<CPlaceholder xs={12} size="xs" />
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Placeholder</strong> <small> Animation</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Animate placeholders with <code>animation="glow"</code> or{' '}
|
||||
<code>animation="wave"</code> to better convey the perception of something
|
||||
being <em>actively</em> loaded.
|
||||
</p>
|
||||
<DocsExample href="components/placeholder#animation">
|
||||
<CPlaceholder component="p" animation="glow">
|
||||
<CPlaceholder xs={12} />
|
||||
</CPlaceholder>
|
||||
|
||||
<CPlaceholder component="p" animation="wave">
|
||||
<CPlaceholder xs={12} />
|
||||
</CPlaceholder>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Placeholders
|
||||
@ -1,74 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Popovers = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Popover" href="components/popover" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Popover</strong> <small>Basic example</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="components/popover">
|
||||
<CPopover
|
||||
title="Popover title"
|
||||
content="And here’s some amazing content. It’s very engaging. Right?"
|
||||
placement="right"
|
||||
>
|
||||
<CButton color="danger" size="lg">
|
||||
Click to toggle popover
|
||||
</CButton>
|
||||
</CPopover>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Popover</strong> <small>Four directions</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Four options are available: top, right, bottom, and left aligned. Directions are
|
||||
mirrored when using CoreUI for React in RTL.
|
||||
</p>
|
||||
<DocsExample href="components/popover#four-directions">
|
||||
<CPopover
|
||||
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
||||
placement="top"
|
||||
>
|
||||
<CButton color="secondary">Popover on top</CButton>
|
||||
</CPopover>
|
||||
<CPopover
|
||||
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
||||
placement="right"
|
||||
>
|
||||
<CButton color="secondary">Popover on right</CButton>
|
||||
</CPopover>
|
||||
<CPopover
|
||||
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
||||
placement="bottom"
|
||||
>
|
||||
<CButton color="secondary">Popover on bottom</CButton>
|
||||
</CPopover>
|
||||
<CPopover
|
||||
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
||||
placement="left"
|
||||
>
|
||||
<CButton color="secondary">Popover on left</CButton>
|
||||
</CPopover>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Popovers
|
||||
@ -1,189 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCardHeader, CCol, CProgress, CProgressBar, CRow } from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Progress = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Progress" href="components/progress" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Progress</strong> <small>Basic example</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Progress components are built with two HTML elements, some CSS to set the width, and a
|
||||
few attributes. We don'tuse{' '}
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">
|
||||
the HTML5 <code><progress></code> element
|
||||
</a>
|
||||
, ensuring you can stack progress bars, animate them, and place text labels over them.
|
||||
</p>
|
||||
<DocsExample href="components/progress">
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar value={0} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar value={25} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar value={50} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar value={75} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar value={100} />
|
||||
</CProgress>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Progress</strong> <small>Labels</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add labels to your progress bars by placing text within the{' '}
|
||||
<code><CProgressBar></code>.
|
||||
</p>
|
||||
<DocsExample href="components/progress#labels">
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar value={25}>25%</CProgressBar>
|
||||
</CProgress>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Progress</strong> <small>Height</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
We only set a <code>height</code> value on the <code><CProgress></code>, so if
|
||||
you change that value the inner <code><CProgressBar></code> will automatically
|
||||
resize accordingly.
|
||||
</p>
|
||||
<DocsExample href="components/progress#height">
|
||||
<CProgress height={1} className="mb-3">
|
||||
<CProgressBar value={25}></CProgressBar>
|
||||
</CProgress>
|
||||
<CProgress height={20} className="mb-3">
|
||||
<CProgressBar value={25}></CProgressBar>
|
||||
</CProgress>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Progress</strong> <small>Backgrounds</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use <code>color</code> prop to change the appearance of individual progress bars.
|
||||
</p>
|
||||
<DocsExample href="components/progress#backgrounds">
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="success" value={25} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="info" value={50} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="warning" value={75} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="danger" value={100} />
|
||||
</CProgress>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Progress</strong> <small>Multiple bars</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Include multiple progress bars in a progress component if you need.
|
||||
</p>
|
||||
<DocsExample href="components/progress#multiple-bars">
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar value={15} />
|
||||
<CProgressBar color="success" value={30} />
|
||||
<CProgressBar color="info" value={20} />
|
||||
</CProgress>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Progress</strong> <small>Striped</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code>variant="striped"</code> to any <code><CProgressBar></code> to
|
||||
apply a stripe via CSS gradient over the progress bar's background color.
|
||||
</p>
|
||||
<DocsExample href="components/progress#striped">
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="success" variant="striped" value={25} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="info" variant="striped" value={50} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="warning" variant="striped" value={75} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="danger" variant="striped" value={100} />
|
||||
</CProgress>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Progress</strong> <small>Animated stripes</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
The striped gradient can also be animated. Add <code>animated</code> property to{' '}
|
||||
<code><CProgressBar></code> to animate the stripes right to left via CSS3
|
||||
animations.
|
||||
</p>
|
||||
<DocsExample href="components/progress#animated-stripes">
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="success" variant="striped" animated value={25} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="info" variant="striped" animated value={50} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="warning" variant="striped" animated value={75} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="danger" variant="striped" animated value={100} />
|
||||
</CProgress>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Progress
|
||||
@ -1,123 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Accordion = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Spinner" href="components/spinner" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Spinner</strong> <small>Border</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use the border spinners for a lightweight loading indicator.
|
||||
</p>
|
||||
<DocsExample href="components/spinner">
|
||||
<CSpinner />
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
The border spinner uses <code>currentColor</code> for its <code>border-color</code>.
|
||||
You can use any of our text color utilities on the standard spinner.
|
||||
</p>
|
||||
<DocsExample href="components/spinner#colors">
|
||||
<CSpinner color="primary" />
|
||||
<CSpinner color="secondary" />
|
||||
<CSpinner color="success" />
|
||||
<CSpinner color="danger" />
|
||||
<CSpinner color="warning" />
|
||||
<CSpinner color="info" />
|
||||
<CSpinner color="light" />
|
||||
<CSpinner color="dark" />
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Spinner</strong> <small>Growing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
If you don'tfancy a border spinner, switch to the grow spinner. While it
|
||||
doesn't technically spin, it does repeatedly grow!
|
||||
</p>
|
||||
<DocsExample href="components/spinner#growing-spinner">
|
||||
<CSpinner variant="grow" />
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
Once again, this spinner is built with <code>currentColor</code>, so you can easily
|
||||
change its appearance. Here it is in blue, along with the supported variants.
|
||||
</p>
|
||||
<DocsExample href="components/spinner#growing-spinner">
|
||||
<CSpinner color="primary" variant="grow" />
|
||||
<CSpinner color="secondary" variant="grow" />
|
||||
<CSpinner color="success" variant="grow" />
|
||||
<CSpinner color="danger" variant="grow" />
|
||||
<CSpinner color="warning" variant="grow" />
|
||||
<CSpinner color="info" variant="grow" />
|
||||
<CSpinner color="light" variant="grow" />
|
||||
<CSpinner color="dark" variant="grow" />
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Spinner</strong> <small>Size</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code>size="sm"</code> property to make a smaller spinner that can quickly
|
||||
be used within other components.
|
||||
</p>
|
||||
<DocsExample href="components/spinner#size">
|
||||
<CSpinner size="sm" />
|
||||
<CSpinner size="sm" variant="grow" />
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Spinner</strong> <small>Buttons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use spinners within buttons to indicate an action is currently processing or taking
|
||||
place. You may also swap the text out of the spinner element and utilize button text
|
||||
as needed.
|
||||
</p>
|
||||
<DocsExample href="components/spinner#buttons">
|
||||
<CButton disabled>
|
||||
<CSpinner component="span" size="sm" aria-hidden="true" />
|
||||
</CButton>
|
||||
<CButton disabled>
|
||||
<CSpinner component="span" size="sm" aria-hidden="true" />
|
||||
Loading...
|
||||
</CButton>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/spinner#buttons">
|
||||
<CButton disabled>
|
||||
<CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
|
||||
</CButton>
|
||||
<CButton disabled>
|
||||
<CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
|
||||
Loading...
|
||||
</CButton>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Accordion
|
||||
@ -1,989 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CRow,
|
||||
CTable,
|
||||
CTableBody,
|
||||
CTableCaption,
|
||||
CTableDataCell,
|
||||
CTableHead,
|
||||
CTableHeaderCell,
|
||||
CTableRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Tables = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Table" href="components/table" />
|
||||
</CCol>
|
||||
<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><CTable></code>-based
|
||||
tables look in CoreUI.
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</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>striped</code> property to add zebra-striping to any table row within the{' '}
|
||||
<code><CTableBody></code>.
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
These classes can also be added to table variants:
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</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>hover</code> property to enable a hover state on table rows within a{' '}
|
||||
<code><CTableBody></code>.
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Active tables</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</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>bordered</code> property for borders on all sides of the table and cells.
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
<a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
|
||||
Border color utilities
|
||||
</a>{' '}
|
||||
can be added to change colors:
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</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>borderless</code> property for a table without borders.
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</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>small</code> property to make any <code><CTable></code> more compact
|
||||
by cutting all cell <code>padding</code> in half.
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</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><CTableHead></code> are always vertical aligned to the
|
||||
bottom. Table cells in <code><CTableBody></code> inherit their alignment from{' '}
|
||||
<code><CTable></code> and are aligned to the the top by default. Use the align
|
||||
property to re-align where needed.
|
||||
</p>
|
||||
<DocsExample href="components/table#vertical-alignment">
|
||||
<CTable align="middle" responsive>
|
||||
<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>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</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>color="light"</code> or <code>color="dark"</code> to make{' '}
|
||||
<code><CTableHead></code>s appear light or dark gray.
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Table</strong> <small>Table foot</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</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><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>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
You can also put the <code><CTableCaption></code> on the top of the table with{' '}
|
||||
<code>caption="top"</code>.
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Tables
|
||||
@ -1,82 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Tooltips = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Tooltip" href="components/tooltip" />
|
||||
</CCol>
|
||||
<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>
|
||||
<DocsExample href="components/tooltip">
|
||||
<p className="text-medium-emphasis">
|
||||
Tight pants next level keffiyeh
|
||||
<CTooltip content="Tooltip text">
|
||||
<CLink> you probably </CLink>
|
||||
</CTooltip>
|
||||
haven'theard 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>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
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>
|
||||
<DocsExample href="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="right"
|
||||
>
|
||||
<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="left"
|
||||
>
|
||||
<CButton color="secondary">Tooltip on left</CButton>
|
||||
</CTooltip>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Tooltips
|
||||
@ -1,442 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CDropdown,
|
||||
CDropdownDivider,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CButtonGroup,
|
||||
CButtonToolbar,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CFormCheck,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const ButtonGroups = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Button Group" href="components/button-group" />
|
||||
</CCol>
|
||||
<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>
|
||||
<DocsExample href="components/button-group">
|
||||
<CButtonGroup role="group" aria-label="Basic example">
|
||||
<CButton color="primary">Left</CButton>
|
||||
<CButton color="primary">Middle</CButton>
|
||||
<CButton color="primary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</DocsExample>
|
||||
<p>
|
||||
These classes can also be added to groups of links, as an alternative to the{' '}
|
||||
<code><CNav></code> components.
|
||||
</p>
|
||||
<DocsExample href="components/button-group">
|
||||
<CButtonGroup>
|
||||
<CButton href="#" color="primary" active>
|
||||
Active link
|
||||
</CButton>
|
||||
<CButton href="#" color="primary">
|
||||
Link
|
||||
</CButton>
|
||||
<CButton href="#" color="primary">
|
||||
Link
|
||||
</CButton>
|
||||
</CButtonGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button Group</strong> <span>Mixed styles</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="components/button-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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button Group</strong> <span>Outlined styles</span>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="components/button-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>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="components/button-group#checkbox-and-radio-button-groups">
|
||||
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
|
||||
<CFormCheck
|
||||
button={{ variant: 'outline' }}
|
||||
id="btncheck1"
|
||||
autoComplete="off"
|
||||
label="Checkbox 1"
|
||||
/>
|
||||
<CFormCheck
|
||||
button={{ variant: 'outline' }}
|
||||
id="btncheck2"
|
||||
autoComplete="off"
|
||||
label="Checkbox 2"
|
||||
/>
|
||||
<CFormCheck
|
||||
button={{ variant: 'outline' }}
|
||||
id="btncheck3"
|
||||
autoComplete="off"
|
||||
label="Checkbox 3"
|
||||
/>
|
||||
</CButtonGroup>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/button-group#checkbox-and-radio-button-groups">
|
||||
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
button={{ variant: 'outline' }}
|
||||
name="btnradio"
|
||||
id="btnradio1"
|
||||
autoComplete="off"
|
||||
label="Radio 1"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
button={{ variant: 'outline' }}
|
||||
name="btnradio"
|
||||
id="btnradio2"
|
||||
autoComplete="off"
|
||||
label="Radio 2"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
button={{ variant: 'outline' }}
|
||||
name="btnradio"
|
||||
id="btnradio3"
|
||||
autoComplete="off"
|
||||
label="Radio 3"
|
||||
/>
|
||||
</CButtonGroup>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="components/button-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>
|
||||
</DocsExample>
|
||||
<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>
|
||||
<DocsExample href="components/button-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>
|
||||
<CFormInput
|
||||
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>
|
||||
<CFormInput
|
||||
placeholder="Input group example"
|
||||
aria-label="Input group example"
|
||||
aria-describedby="btnGroupAddon"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</CButtonToolbar>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="components/button-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>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="components/button-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>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="components/button-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>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/button-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>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/button-group/#vertical-variation">
|
||||
<CButtonGroup vertical role="group" aria-label="Vertical button group">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
button={{ color: 'danger', variant: 'outline' }}
|
||||
name="vbtnradio"
|
||||
id="vbtnradio1"
|
||||
autoComplete="off"
|
||||
label="Radio 1"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
button={{ color: 'danger', variant: 'outline' }}
|
||||
name="vbtnradio"
|
||||
id="vbtnradio2"
|
||||
autoComplete="off"
|
||||
label="Radio 2"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
button={{ color: 'danger', variant: 'outline' }}
|
||||
name="vbtnradio"
|
||||
id="vbtnradio3"
|
||||
autoComplete="off"
|
||||
label="Radio 3"
|
||||
/>
|
||||
</CButtonGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default ButtonGroups
|
||||
@ -1,404 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilBell } from '@coreui/icons'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Buttons = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Button" href="components/buttons" />
|
||||
</CCol>
|
||||
<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>
|
||||
<DocsExample href="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>
|
||||
))}
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button</strong> <small>with icons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>.
|
||||
</p>
|
||||
<DocsExample href="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 icon={cilBell} className="me-2" />
|
||||
{color.charAt(0).toUpperCase() + color.slice(1)}
|
||||
</CButton>
|
||||
))}
|
||||
<CButton color="link">
|
||||
<CIcon icon={cilBell} className="me-2" />
|
||||
Link
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
))}
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="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" />
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="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>
|
||||
))}
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="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>
|
||||
))}
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="components/buttons#sizes">
|
||||
<CButton color="primary" size="lg">
|
||||
Large button
|
||||
</CButton>
|
||||
<CButton color="secondary" size="lg">
|
||||
Large button
|
||||
</CButton>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/buttons#sizes">
|
||||
<CButton color="primary" size="sm">
|
||||
Small button
|
||||
</CButton>
|
||||
<CButton color="secondary" size="sm">
|
||||
Small button
|
||||
</CButton>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button</strong> <small>Pill</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="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>
|
||||
))}
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Button</strong> <small>Square</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="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>
|
||||
))}
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="components/buttons#disabled-state">
|
||||
<CButton color="primary" size="lg" disabled>
|
||||
Primary button
|
||||
</CButton>
|
||||
<CButton color="secondary" size="lg" disabled>
|
||||
Button
|
||||
</CButton>
|
||||
</DocsExample>
|
||||
<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'tsupport 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>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="components/buttons#block-buttons">
|
||||
<div className="d-grid gap-2">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
</DocsExample>
|
||||
<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>
|
||||
<DocsExample href="components/buttons#block-buttons">
|
||||
<div className="d-grid gap-2 d-md-block">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
</DocsExample>
|
||||
<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>
|
||||
<DocsExample href="components/buttons#block-buttons">
|
||||
<div className="d-grid gap-2 col-6 mx-auto">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
</DocsExample>
|
||||
<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>
|
||||
<DocsExample href="components/buttons#block-buttons">
|
||||
<div className="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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Buttons
|
||||
@ -1,341 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CButtonGroup,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CDropdown,
|
||||
CDropdownDivider,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Dropdowns = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Dropdown" href="components/dropdown" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Single button</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Here's how you can put them to work with either <code><button></code>{' '}
|
||||
elements:
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
The best part is you can do this with any button variant, too:
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
),
|
||||
)}
|
||||
</>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Split button</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Similarly, create split button dropdowns with virtually the same markup as single
|
||||
button dropdowns, but with the addition of boolean prop <code>split</code> for proper
|
||||
spacing around the dropdown caret.
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
We use this extra class to reduce the horizontal <code>padding</code> on either side
|
||||
of the caret by 25% and remove the <code>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>
|
||||
<DocsExample href="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>
|
||||
),
|
||||
)}
|
||||
</>
|
||||
</DocsExample>
|
||||
</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>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Single button</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Opt into darker dropdowns to match a dark navbar or custom style by set{' '}
|
||||
<code>dark</code> property. No changes are required to the dropdown items.
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">And putting it to use in a navbar:</p>
|
||||
<DocsExample href="components/dropdown#dark-dropdowns">
|
||||
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div className="container-fluid">
|
||||
<a className="navbar-brand" href="https://coreui.io/react/">
|
||||
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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Dropup</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Trigger dropdown menus above elements by adding{' '}
|
||||
<code>direction="dropup"</code> to the <code><CDropdown></code>{' '}
|
||||
component.
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Dropright</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Trigger dropdown menus at the right of the elements by adding{' '}
|
||||
<code>direction="dropend"</code> to the <code><CDropdown></code>{' '}
|
||||
component.
|
||||
</p>
|
||||
<DocsExample href="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>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Dropdown</strong> <small>Dropleft</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Trigger dropdown menus at the left of the elements by adding{' '}
|
||||
<code>direction="dropstart"</code> to the <code><CDropdown></code>{' '}
|
||||
component.
|
||||
</p>
|
||||
<DocsExample href="components/dropdown#dropleft">
|
||||
<CButtonGroup>
|
||||
<CDropdown variant="btn-group" direction="dropstart">
|
||||
<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>
|
||||
<CButton color="secondary">Small split button</CButton>
|
||||
</CButtonGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Dropdowns
|
||||
@ -1,5 +0,0 @@
|
||||
import ButtonDropdowns from './ButtonDropdowns'
|
||||
import ButtonGroups from './ButtonGroups'
|
||||
import Buttons from './Buttons'
|
||||
|
||||
export { ButtonDropdowns, ButtonGroups, Buttons }
|
||||
@ -1,176 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'
|
||||
import {
|
||||
CChartBar,
|
||||
CChartDoughnut,
|
||||
CChartLine,
|
||||
CChartPie,
|
||||
CChartPolarArea,
|
||||
CChartRadar,
|
||||
} from '@coreui/react-chartjs'
|
||||
import { DocsCallout } from 'src/components'
|
||||
|
||||
const Charts = () => {
|
||||
const random = () => Math.round(Math.random() * 100)
|
||||
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout
|
||||
name="Chart"
|
||||
href="components/chart"
|
||||
content="React wrapper component for Chart.js 3.0, the most popular charting library."
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Bar Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartBar
|
||||
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>Line Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartLine
|
||||
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>Doughnut Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartDoughnut
|
||||
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>Pie Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartPie
|
||||
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>
|
||||
<CChartPolarArea
|
||||
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>
|
||||
<CChartRadar
|
||||
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
|
||||
@ -1,55 +1,6 @@
|
||||
import React, { lazy } from 'react'
|
||||
|
||||
import {
|
||||
CAvatar,
|
||||
CButton,
|
||||
CButtonGroup,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardFooter,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CProgress,
|
||||
CRow,
|
||||
CTable,
|
||||
CTableBody,
|
||||
CTableDataCell,
|
||||
CTableHead,
|
||||
CTableHeaderCell,
|
||||
CTableRow,
|
||||
} from '@coreui/react'
|
||||
import { CChartLine } from '@coreui/react-chartjs'
|
||||
import { getStyle, hexToRgba } from '@coreui/utils'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import {
|
||||
cibCcAmex,
|
||||
cibCcApplePay,
|
||||
cibCcMastercard,
|
||||
cibCcPaypal,
|
||||
cibCcStripe,
|
||||
cibCcVisa,
|
||||
cibGoogle,
|
||||
cibFacebook,
|
||||
cibLinkedin,
|
||||
cifBr,
|
||||
cifEs,
|
||||
cifFr,
|
||||
cifIn,
|
||||
cifPl,
|
||||
cifUs,
|
||||
cibTwitter,
|
||||
cilCloudDownload,
|
||||
cilPeople,
|
||||
cilUser,
|
||||
cilUserFemale,
|
||||
} from '@coreui/icons'
|
||||
|
||||
import avatar1 from 'src/assets/images/avatars/1.jpg'
|
||||
import avatar2 from 'src/assets/images/avatars/2.jpg'
|
||||
import avatar3 from 'src/assets/images/avatars/3.jpg'
|
||||
import avatar4 from 'src/assets/images/avatars/4.jpg'
|
||||
import avatar5 from 'src/assets/images/avatars/5.jpg'
|
||||
import avatar6 from 'src/assets/images/avatars/6.jpg'
|
||||
|
||||
const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
|
||||
const WidgetsBrand = lazy(() => import('../widgets/WidgetsBrand.js'))
|
||||
@ -59,403 +10,12 @@ const Dashboard = () => {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
const progressExample = [
|
||||
{ title: 'Visits', value: '29.703 Users', percent: 40, color: 'success' },
|
||||
{ title: 'Unique', value: '24.093 Users', percent: 20, color: 'info' },
|
||||
{ title: 'Pageviews', value: '78.706 Views', percent: 60, color: 'warning' },
|
||||
{ title: 'New Users', value: '22.123 Users', percent: 80, color: 'danger' },
|
||||
{ title: 'Bounce Rate', value: 'Average Rate', percent: 40.15, color: 'primary' },
|
||||
]
|
||||
|
||||
const progressGroupExample1 = [
|
||||
{ title: 'Monday', value1: 34, value2: 78 },
|
||||
{ title: 'Tuesday', value1: 56, value2: 94 },
|
||||
{ title: 'Wednesday', value1: 12, value2: 67 },
|
||||
{ title: 'Thursday', value1: 43, value2: 91 },
|
||||
{ title: 'Friday', value1: 22, value2: 73 },
|
||||
{ title: 'Saturday', value1: 53, value2: 82 },
|
||||
{ title: 'Sunday', value1: 9, value2: 69 },
|
||||
]
|
||||
|
||||
const progressGroupExample2 = [
|
||||
{ title: 'Male', icon: cilUser, value: 53 },
|
||||
{ title: 'Female', icon: cilUserFemale, value: 43 },
|
||||
]
|
||||
|
||||
const progressGroupExample3 = [
|
||||
{ title: 'Organic Search', icon: cibGoogle, percent: 56, value: '191,235' },
|
||||
{ title: 'Facebook', icon: cibFacebook, percent: 15, value: '51,223' },
|
||||
{ title: 'Twitter', icon: cibTwitter, percent: 11, value: '37,564' },
|
||||
{ title: 'LinkedIn', icon: cibLinkedin, percent: 8, value: '27,319' },
|
||||
]
|
||||
|
||||
const tableExample = [
|
||||
{
|
||||
avatar: { src: avatar1, status: 'success' },
|
||||
user: {
|
||||
name: 'Yiorgos Avraamu',
|
||||
new: true,
|
||||
registered: 'Jan 1, 2021',
|
||||
},
|
||||
country: { name: 'USA', flag: cifUs },
|
||||
usage: {
|
||||
value: 50,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'success',
|
||||
},
|
||||
payment: { name: 'Mastercard', icon: cibCcMastercard },
|
||||
activity: '10 sec ago',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar2, status: 'danger' },
|
||||
user: {
|
||||
name: 'Avram Tarasios',
|
||||
new: false,
|
||||
registered: 'Jan 1, 2021',
|
||||
},
|
||||
country: { name: 'Brazil', flag: cifBr },
|
||||
usage: {
|
||||
value: 22,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'info',
|
||||
},
|
||||
payment: { name: 'Visa', icon: cibCcVisa },
|
||||
activity: '5 minutes ago',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar3, status: 'warning' },
|
||||
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2021' },
|
||||
country: { name: 'India', flag: cifIn },
|
||||
usage: {
|
||||
value: 74,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'warning',
|
||||
},
|
||||
payment: { name: 'Stripe', icon: cibCcStripe },
|
||||
activity: '1 hour ago',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar4, status: 'secondary' },
|
||||
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2021' },
|
||||
country: { name: 'France', flag: cifFr },
|
||||
usage: {
|
||||
value: 98,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'danger',
|
||||
},
|
||||
payment: { name: 'PayPal', icon: cibCcPaypal },
|
||||
activity: 'Last month',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar5, status: 'success' },
|
||||
user: {
|
||||
name: 'Agapetus Tadeáš',
|
||||
new: true,
|
||||
registered: 'Jan 1, 2021',
|
||||
},
|
||||
country: { name: 'Spain', flag: cifEs },
|
||||
usage: {
|
||||
value: 22,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'primary',
|
||||
},
|
||||
payment: { name: 'Google Wallet', icon: cibCcApplePay },
|
||||
activity: 'Last week',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar6, status: 'danger' },
|
||||
user: {
|
||||
name: 'Friderik Dávid',
|
||||
new: true,
|
||||
registered: 'Jan 1, 2021',
|
||||
},
|
||||
country: { name: 'Poland', flag: cifPl },
|
||||
usage: {
|
||||
value: 43,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'success',
|
||||
},
|
||||
payment: { name: 'Amex', icon: cibCcAmex },
|
||||
activity: 'Last week',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<WidgetsDropdown />
|
||||
{/* <CCard className="mb-4">
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm={5}>
|
||||
<h4 id="traffic" className="card-title mb-0">
|
||||
Traffic
|
||||
</h4>
|
||||
<div className="small text-medium-emphasis">January - July 2021</div>
|
||||
</CCol>
|
||||
<CCol sm={7} className="d-none d-md-block">
|
||||
<CButton color="primary" className="float-end">
|
||||
<CIcon icon={cilCloudDownload} />
|
||||
</CButton>
|
||||
<CButtonGroup className="float-end me-3">
|
||||
{['Day', 'Month', 'Year'].map((value) => (
|
||||
<CButton
|
||||
color="outline-secondary"
|
||||
key={value}
|
||||
className="mx-0"
|
||||
active={value === 'Month'}
|
||||
>
|
||||
{value}
|
||||
</CButton>
|
||||
))}
|
||||
</CButtonGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CChartLine
|
||||
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 xs={{ cols: 1 }} md={{ cols: 5 }} className="text-center">
|
||||
{progressExample.map((item, index) => (
|
||||
<CCol className="mb-sm-2 mb-0" key={index}>
|
||||
<div className="text-medium-emphasis">{item.title}</div>
|
||||
<strong>
|
||||
{item.value} ({item.percent}%)
|
||||
</strong>
|
||||
<CProgress thin className="mt-2" color={item.color} value={item.percent} />
|
||||
</CCol>
|
||||
))}
|
||||
</CRow>
|
||||
</CCardFooter>
|
||||
</CCard> */}
|
||||
|
||||
{/* <WidgetsBrand withCharts /> */}
|
||||
|
||||
{/* <CRow>
|
||||
<CCol xs>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Traffic {' & '} Sales</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol xs={12} md={6} xl={6}>
|
||||
<CRow>
|
||||
<CCol sm={6}>
|
||||
<div className="border-start border-start-4 border-start-info py-1 px-3">
|
||||
<div className="text-medium-emphasis small">New Clients</div>
|
||||
<div className="fs-5 fw-semibold">9,123</div>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol sm={6}>
|
||||
<div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
|
||||
<div className="text-medium-emphasis small">Recurring Clients</div>
|
||||
<div className="fs-5 fw-semibold">22,643</div>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<hr className="mt-0" />
|
||||
{progressGroupExample1.map((item, index) => (
|
||||
<div className="progress-group mb-4" key={index}>
|
||||
<div className="progress-group-prepend">
|
||||
<span className="text-medium-emphasis small">{item.title}</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="info" value={item.value1} />
|
||||
<CProgress thin color="danger" value={item.value2} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CCol>
|
||||
|
||||
<CCol xs={12} md={6} xl={6}>
|
||||
<CRow>
|
||||
<CCol sm={6}>
|
||||
<div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
|
||||
<div className="text-medium-emphasis small">Pageviews</div>
|
||||
<div className="fs-5 fw-semibold">78,623</div>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol sm={6}>
|
||||
<div className="border-start border-start-4 border-start-success py-1 px-3 mb-3">
|
||||
<div className="text-medium-emphasis small">Organic</div>
|
||||
<div className="fs-5 fw-semibold">49,123</div>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<hr className="mt-0" />
|
||||
|
||||
{progressGroupExample2.map((item, index) => (
|
||||
<div className="progress-group mb-4" key={index}>
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="me-2" icon={item.icon} size="lg" />
|
||||
<span>{item.title}</span>
|
||||
<span className="ms-auto fw-semibold">{item.value}%</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="warning" value={item.value} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="mb-5"></div>
|
||||
|
||||
{progressGroupExample3.map((item, index) => (
|
||||
<div className="progress-group" key={index}>
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="me-2" icon={item.icon} size="lg" />
|
||||
<span>{item.title}</span>
|
||||
<span className="ms-auto fw-semibold">
|
||||
{item.value}{' '}
|
||||
<span className="text-medium-emphasis small">({item.percent}%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="success" value={item.percent} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<br />
|
||||
|
||||
<CTable align="middle" className="mb-0 border" hover responsive>
|
||||
<CTableHead color="light">
|
||||
<CTableRow>
|
||||
<CTableHeaderCell className="text-center">
|
||||
<CIcon icon={cilPeople} />
|
||||
</CTableHeaderCell>
|
||||
<CTableHeaderCell>User</CTableHeaderCell>
|
||||
<CTableHeaderCell className="text-center">Country</CTableHeaderCell>
|
||||
<CTableHeaderCell>Usage</CTableHeaderCell>
|
||||
<CTableHeaderCell className="text-center">Payment Method</CTableHeaderCell>
|
||||
<CTableHeaderCell>Activity</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
{tableExample.map((item, index) => (
|
||||
<CTableRow v-for="item in tableItems" key={index}>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src={item.avatar.src} status={item.avatar.status} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>{item.user.name}</div>
|
||||
<div className="small text-medium-emphasis">
|
||||
<span>{item.user.new ? 'New' : 'Recurring'}</span> | Registered:{' '}
|
||||
{item.user.registered}
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={item.country.flag} title={item.country.name} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
<div className="float-start">
|
||||
<strong>{item.usage.value}%</strong>
|
||||
</div>
|
||||
<div className="float-end">
|
||||
<small className="text-medium-emphasis">{item.usage.period}</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress thin color={item.usage.color} value={item.usage.value} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={item.payment.icon} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
<strong>{item.activity}</strong>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
))}
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow> */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,395 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const ChecksRadios = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Check and Radios" href="forms/checks-radios" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checkbox</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/checks-radios">
|
||||
<CFormCheck id="flexCheckDefault" label="Default checkbox" />
|
||||
<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checkbox</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add the <code>disabled</code> attribute and the associated <code><label></code>s
|
||||
are automatically styled to match with a lighter color to help indicate the
|
||||
input's state.
|
||||
</p>
|
||||
<DocsExample href="forms/checks-radios#disabled">
|
||||
<CFormCheck label="Disabled checkbox" disabled />
|
||||
<CFormCheck label="Disabled checked checkbox" defaultChecked disabled />
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Radio</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add the <code>disabled</code> attribute and the associated <code><label></code>s
|
||||
are automatically styled to match with a lighter color to help indicate the
|
||||
input's state.
|
||||
</p>
|
||||
<DocsExample href="forms/checks-radios#radios">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDefault"
|
||||
id="flexRadioDefault1"
|
||||
label="Default radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDefault"
|
||||
id="flexRadioDefault2"
|
||||
label="Checked radio"
|
||||
defaultChecked
|
||||
/>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Radio</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/checks-radios#disabled-1">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDisabled"
|
||||
id="flexRadioDisabled"
|
||||
label="Disabled radio"
|
||||
disabled
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDisabled"
|
||||
id="flexRadioCheckedDisabled"
|
||||
label="Disabled checked radio"
|
||||
defaultChecked
|
||||
disabled
|
||||
/>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Switches</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
A switch has the markup of a custom checkbox but uses the <code>switch</code> boolean
|
||||
properly to render a toggle switch. Switches also support the <code>disabled</code>{' '}
|
||||
attribute.
|
||||
</p>
|
||||
<DocsExample href="forms/checks-radios#switches">
|
||||
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
|
||||
<CFormSwitch
|
||||
label="Checked switch checkbox input"
|
||||
id="formSwitchCheckChecked"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormSwitch
|
||||
label="Disabled switch checkbox input"
|
||||
id="formSwitchCheckDisabled"
|
||||
disabled
|
||||
/>
|
||||
<CFormSwitch
|
||||
label="Disabled checked switch checkbox input"
|
||||
id="formSwitchCheckCheckedDisabled"
|
||||
defaultChecked
|
||||
disabled
|
||||
/>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Switches</strong> <small>Sizes</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/checks-radios#sizes">
|
||||
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
|
||||
<CFormSwitch
|
||||
size="lg"
|
||||
label="Large switch checkbox input"
|
||||
id="formSwitchCheckDefaultLg"
|
||||
/>
|
||||
<CFormSwitch
|
||||
size="xl"
|
||||
label="Extra large switch checkbox input"
|
||||
id="formSwitchCheckDefaultXL"
|
||||
/>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checks and Radios</strong> <small>Default layout (stacked)</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
By default, any number of checkboxes and radios that are immediate sibling will be
|
||||
vertically stacked and appropriately spaced.
|
||||
</p>
|
||||
<DocsExample href="forms/checks-radios#default-stacked">
|
||||
<CFormCheck id="defaultCheck1" label="Default checkbox" />
|
||||
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
|
||||
</DocsExample>
|
||||
<DocsExample href="forms/checks-radios#default-stacked">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="exampleRadios"
|
||||
id="exampleRadios1"
|
||||
value="option1"
|
||||
label="Default radio"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="exampleRadios"
|
||||
id="exampleRadios2"
|
||||
value="option2"
|
||||
label="Second default radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="exampleRadios"
|
||||
id="exampleRadios3"
|
||||
value="option3"
|
||||
label="Disabled radio"
|
||||
disabled
|
||||
/>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checks and Radios</strong> <small>Inline</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Group checkboxes or radios on the same horizontal row by adding <code>inline</code>{' '}
|
||||
boolean property to any <code><CFormCheck></code>.
|
||||
</p>
|
||||
<DocsExample href="forms/checks-radios#inline">
|
||||
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
|
||||
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
|
||||
<CFormCheck
|
||||
inline
|
||||
id="inlineCheckbox3"
|
||||
value="option3"
|
||||
label="3 (disabled)"
|
||||
disabled
|
||||
/>
|
||||
</DocsExample>
|
||||
<DocsExample href="forms/checks-radios#inline">
|
||||
<CFormCheck
|
||||
inline
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
id="inlineCheckbox1"
|
||||
value="option1"
|
||||
label="1"
|
||||
/>
|
||||
<CFormCheck
|
||||
inline
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
id="inlineCheckbox2"
|
||||
value="option2"
|
||||
label="2"
|
||||
/>
|
||||
<CFormCheck
|
||||
inline
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
id="inlineCheckbox3"
|
||||
value="option3"
|
||||
label="3 (disabled)"
|
||||
disabled
|
||||
/>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checks and Radios</strong> <small>Without labels</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Remember to still provide some form of accessible name for assistive technologies (for
|
||||
instance, using <code>aria-label</code>).
|
||||
</p>
|
||||
<DocsExample href="forms/checks-radios#without-labels">
|
||||
<div>
|
||||
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="radioNoLabel"
|
||||
id="radioNoLabel"
|
||||
value=""
|
||||
aria-label="..."
|
||||
/>
|
||||
</div>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Toggle buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Create button-like checkboxes and radio buttons by using <code>button</code> boolean
|
||||
property on the <code><CFormCheck></code> component. These toggle buttons can
|
||||
further be grouped in a button group if needed.
|
||||
</p>
|
||||
<DocsExample href="forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
button={{ color: 'primary ' }}
|
||||
id="btn-check"
|
||||
autoComplete="off"
|
||||
label="Single toggle"
|
||||
/>
|
||||
</DocsExample>
|
||||
<DocsExample href="forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
button={{ color: 'primary ' }}
|
||||
id="btn-check-2"
|
||||
autoComplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
</DocsExample>
|
||||
<DocsExample href="forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
button={{ color: 'primary ' }}
|
||||
id="btn-check-3"
|
||||
autoComplete="off"
|
||||
label="Disabled"
|
||||
disabled
|
||||
/>
|
||||
</DocsExample>
|
||||
<h3>Radio toggle buttons</h3>
|
||||
<DocsExample href="forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
button={{ color: 'secondary' }}
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option1"
|
||||
autoComplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
button={{ color: 'secondary' }}
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option2"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
button={{ color: 'secondary' }}
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option3"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
disabled
|
||||
/>
|
||||
<CFormCheck
|
||||
button={{ color: 'secondary' }}
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option4"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
</DocsExample>
|
||||
<h3>Outlined styles</h3>
|
||||
<p className="text-medium-emphasis small">
|
||||
Different variants of button, such at the various outlined styles, are supported.
|
||||
</p>
|
||||
<DocsExample href="forms/checks-radios#toggle-buttons">
|
||||
<div>
|
||||
<CFormCheck
|
||||
button={{ color: 'primary', variant: 'outline' }}
|
||||
id="btn-check-outlined"
|
||||
autoComplete="off"
|
||||
label="Single toggle"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck
|
||||
button={{ color: 'secondary', variant: 'outline' }}
|
||||
id="btn-check-2-outlined"
|
||||
autoComplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck
|
||||
button={{ color: 'success', variant: 'outline' }}
|
||||
type="radio"
|
||||
name="options-outlined"
|
||||
id="success-outlined"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
button={{ color: 'danger', variant: 'outline' }}
|
||||
type="radio"
|
||||
name="options-outlined"
|
||||
id="danger-outlined"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
</div>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChecksRadios
|
||||
@ -1,173 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CFormInput,
|
||||
CFormLabel,
|
||||
CFormFloating,
|
||||
CFormSelect,
|
||||
CFormTextarea,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const FloatingLabels = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Floating Label" href="forms/floating-label" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Floating labels</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Wrap a pair of <code><CFormInput></code> and <code><CFormLabel></code>{' '}
|
||||
elements in <code>CFormFloating</code> to enable floating labels with textual form
|
||||
fields. A <code>placeholder</code> is required on each <code><CFormInput></code>{' '}
|
||||
as our method of CSS-only floating labels uses the <code>:placeholder-shown</code>{' '}
|
||||
pseudo-element. Also note that the <code><CFormInput></code> must come first so
|
||||
we can utilize a sibling selector (e.g., <code>~</code>).
|
||||
</p>
|
||||
<DocsExample href="forms/floating-labels">
|
||||
<CFormFloating className="mb-3">
|
||||
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
|
||||
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
|
||||
</CFormFloating>
|
||||
<CFormFloating>
|
||||
<CFormInput type="password" id="floatingPassword" placeholder="Password" />
|
||||
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
|
||||
</CFormFloating>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
When there's a <code>value</code> already defined, <code><CFormLabel></code>
|
||||
s will automatically adjust to their floated position.
|
||||
</p>
|
||||
<DocsExample href="forms/floating-labels">
|
||||
<CFormFloating>
|
||||
<CFormInput
|
||||
type="email"
|
||||
id="floatingInputValue"
|
||||
placeholder="name@example.com"
|
||||
defaultValue="test@example.com"
|
||||
/>
|
||||
<CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel>
|
||||
</CFormFloating>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Floating labels</strong> <small>Textareas</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
By default, <code><CFormTextarea></code>s will be the same height as{' '}
|
||||
<code><CFormInput></code>s.
|
||||
</p>
|
||||
<DocsExample href="forms/floating-labels#textareas">
|
||||
<CFormFloating>
|
||||
<CFormTextarea
|
||||
id="floatingTextarea"
|
||||
placeholder="Leave a comment here"
|
||||
></CFormTextarea>
|
||||
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
|
||||
</CFormFloating>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
To set a custom height on your <code><CFormTextarea;></code>, do not use the{' '}
|
||||
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
|
||||
inline or via custom CSS).
|
||||
</p>
|
||||
<DocsExample href="forms/floating-labels#textareas">
|
||||
<CFormFloating>
|
||||
<CFormTextarea
|
||||
placeholder="Leave a comment here"
|
||||
id="floatingTextarea2"
|
||||
style={{ height: '100px' }}
|
||||
></CFormTextarea>
|
||||
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
|
||||
</CFormFloating>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Floating labels</strong> <small>Selects</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Other than <code><CFormInput></code>, floating labels are only available on{' '}
|
||||
<code><CFormSelect></code>s. They work in the same way, but unlike{' '}
|
||||
<code><CFormInput></code>s, they'll always show the{' '}
|
||||
<code><CFormLabel></code> in its floated state.{' '}
|
||||
<strong>
|
||||
Selects with <code>size</code> and <code>multiple</code> are not supported.
|
||||
</strong>
|
||||
</p>
|
||||
<DocsExample href="forms/floating-labels#selects">
|
||||
<CFormFloating>
|
||||
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CFormLabel htmlFor="floatingSelect">Works with selects</CFormLabel>
|
||||
</CFormFloating>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Floating labels</strong> <small>Layout</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
When working with the CoreUI for Bootstrap grid system, be sure to place form elements
|
||||
within column classes.
|
||||
</p>
|
||||
<DocsExample href="forms/floating-labels#layout">
|
||||
<CRow xs={{ gutter: 2 }}>
|
||||
<CCol md>
|
||||
<CFormFloating>
|
||||
<CFormInput
|
||||
type="email"
|
||||
id="floatingInputGrid"
|
||||
placeholder="name@example.com"
|
||||
defaultValue="email@example.com"
|
||||
/>
|
||||
<CFormLabel htmlFor="floatingInputGrid">Email address</CFormLabel>
|
||||
</CFormFloating>
|
||||
</CCol>
|
||||
<CCol md>
|
||||
<CFormFloating>
|
||||
<CFormSelect id="floatingSelectGrid" aria-label="Floating label select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CFormLabel htmlFor="floatingSelectGrid">Works with selects</CFormLabel>
|
||||
</CFormFloating>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default FloatingLabels
|
||||
@ -1,251 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CFormLabel,
|
||||
CFormTextarea,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const FormControl = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Form Control" href="forms/form-control" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Form Control</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/form-control">
|
||||
<CForm>
|
||||
<div className="mb-3">
|
||||
<CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
|
||||
<CFormInput
|
||||
type="email"
|
||||
id="exampleFormControlInput1"
|
||||
placeholder="name@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
|
||||
<CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
|
||||
</div>
|
||||
</CForm>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Form Control</strong> <small>Sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Set heights using <code>size</code> property like <code>size="lg"</code> and{' '}
|
||||
<code>size="sm"</code>.
|
||||
</p>
|
||||
<DocsExample href="forms/form-control#sizing">
|
||||
<CFormInput
|
||||
type="text"
|
||||
size="lg"
|
||||
placeholder="Large input"
|
||||
aria-label="lg input example"
|
||||
/>
|
||||
<br />
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Default input"
|
||||
aria-label="default input example"
|
||||
/>
|
||||
<br />
|
||||
<CFormInput
|
||||
type="text"
|
||||
size="sm"
|
||||
placeholder="Small input"
|
||||
aria-label="sm input example"
|
||||
/>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Form Control</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
|
||||
appearance and remove pointer events.
|
||||
</p>
|
||||
<DocsExample href="forms/form-control#disabled">
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Disabled input"
|
||||
aria-label="Disabled input example"
|
||||
disabled
|
||||
/>
|
||||
<br />
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Disabled readonly input"
|
||||
aria-label="Disabled input example"
|
||||
disabled
|
||||
readOnly
|
||||
/>
|
||||
<br />
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Form Control</strong> <small>Readonly</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add the <code>readOnly</code> boolean attribute on an input to prevent modification of
|
||||
the input's value. Read-only inputs appear lighter (just like disabled inputs),
|
||||
but retain the standard cursor.
|
||||
</p>
|
||||
<DocsExample href="forms/form-control#readonly">
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Readonly input here..."
|
||||
aria-label="readonly input example"
|
||||
readOnly
|
||||
/>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Form Control</strong> <small>Readonly plain text</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
If you want to have <code><input readonly></code> elements in your form styled
|
||||
as plain text, use the <code>plainText</code> boolean property to remove the default
|
||||
form field styling and preserve the correct margin and padding.
|
||||
</p>
|
||||
<DocsExample href="components/accordion">
|
||||
<CRow className="mb-3">
|
||||
<CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">
|
||||
Email
|
||||
</CFormLabel>
|
||||
<div className="col-sm-10">
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="staticEmail"
|
||||
defaultValue="email@example.com"
|
||||
readOnly
|
||||
plainText
|
||||
/>
|
||||
</div>
|
||||
</CRow>
|
||||
<CRow className="mb-3">
|
||||
<CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">
|
||||
Password
|
||||
</CFormLabel>
|
||||
<div className="col-sm-10">
|
||||
<CFormInput type="password" id="inputPassword" />
|
||||
</div>
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/accordion">
|
||||
<CForm className="row g-3">
|
||||
<div className="col-auto">
|
||||
<CFormLabel htmlFor="staticEmail2" className="visually-hidden">
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="staticEmail2"
|
||||
defaultValue="email@example.com"
|
||||
readOnly
|
||||
plainText
|
||||
/>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<CFormLabel htmlFor="inputPassword2" className="visually-hidden">
|
||||
Password
|
||||
</CFormLabel>
|
||||
<CFormInput type="password" id="inputPassword2" placeholder="Password" />
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<CButton type="submit" className="mb-3">
|
||||
Confirm identity
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Form Control</strong> <small>File input</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/form-control#file-input">
|
||||
<div className="mb-3">
|
||||
<CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
|
||||
<CFormInput type="file" id="formFile" />
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
|
||||
<CFormInput type="file" id="formFileMultiple" multiple />
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
|
||||
<CFormInput type="file" id="formFileDisabled" disabled />
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
|
||||
<CFormInput type="file" size="sm" id="formFileSm" />
|
||||
</div>
|
||||
<div>
|
||||
<CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
|
||||
<CFormInput type="file" size="lg" id="formFileLg" />
|
||||
</div>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Form Control</strong> <small>Color</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/form-control#color">
|
||||
<CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
|
||||
<CFormInput
|
||||
type="color"
|
||||
id="exampleColorInput"
|
||||
defaultValue="#563d7c"
|
||||
title="Choose your color"
|
||||
/>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default FormControl
|
||||
@ -1,506 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CDropdown,
|
||||
CDropdownDivider,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CFormCheck,
|
||||
CFormInput,
|
||||
CFormLabel,
|
||||
CFormSelect,
|
||||
CFormTextarea,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Select = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Input Group" href="forms/input-group" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Basic example</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Place one add-on or button on either side of an input. You may also place one on both
|
||||
sides of an input. Remember to place <code><CFormLabel></code>s outside the
|
||||
input group.
|
||||
</p>
|
||||
<DocsExample href="forms/input-group">
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText id="basic-addon1">@</CInputGroupText>
|
||||
<CFormInput
|
||||
placeholder="Username"
|
||||
aria-label="Username"
|
||||
aria-describedby="basic-addon1"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CFormInput
|
||||
placeholder="Recipient's username"
|
||||
aria-label="Recipient's username"
|
||||
aria-describedby="basic-addon2"
|
||||
/>
|
||||
<CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
|
||||
<CFormInput id="basic-url" aria-describedby="basic-addon3" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CFormInput aria-label="Amount (to the nearest dollar)" />
|
||||
<CInputGroupText>.00</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CFormInput placeholder="Username" aria-label="Username" />
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput placeholder="Server" aria-label="Server" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>With textarea</CInputGroupText>
|
||||
<CFormTextarea aria-label="With textarea"></CFormTextarea>
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Wrapping</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Input groups wrap by default via <code>flex-wrap: wrap</code> in order to accommodate
|
||||
custom form field validation within an input group. You may disable this with{' '}
|
||||
<code>.flex-nowrap</code>.
|
||||
</p>
|
||||
<DocsExample href="forms/input-group#wrapping">
|
||||
<CInputGroup className="flex-nowrap">
|
||||
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
|
||||
<CFormInput
|
||||
placeholder="Username"
|
||||
aria-label="Username"
|
||||
aria-describedby="addon-wrapping"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add the relative form sizing classes to the <code><CInputGroup></code> itself
|
||||
and contents within will automatically resize—no need for repeating the form control
|
||||
size classes on each element.
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
<strong>Sizing on the individual input group elements isn'tsupported.</strong>
|
||||
</p>
|
||||
<DocsExample href="forms/input-group#sizing">
|
||||
<CInputGroup size="sm" className="mb-3">
|
||||
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
|
||||
<CFormInput
|
||||
aria-label="Sizing example input"
|
||||
aria-describedby="inputGroup-sizing-sm"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
|
||||
<CFormInput
|
||||
aria-label="Sizing example input"
|
||||
aria-describedby="inputGroup-sizing-default"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup size="lg">
|
||||
<CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
|
||||
<CFormInput
|
||||
aria-label="Sizing example input"
|
||||
aria-describedby="inputGroup-sizing-lg"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Checkboxes and radios</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Place any checkbox or radio option within an input group's addon instead of text.
|
||||
</p>
|
||||
<DocsExample href="forms/input-group#checkboxes-and-radios">
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
value=""
|
||||
aria-label="Checkbox for following text input"
|
||||
/>
|
||||
</CInputGroupText>
|
||||
<CFormInput aria-label="Text input with checkbox" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
value=""
|
||||
aria-label="Radio button for following text input"
|
||||
/>
|
||||
</CInputGroupText>
|
||||
<CFormInput aria-label="Text input with radio button" />
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Multiple inputs</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
While multiple <code><CFormInput></code>s are supported visually, validation
|
||||
styles are only available for input groups with a single{' '}
|
||||
<code><CFormInput></code>.
|
||||
</p>
|
||||
<DocsExample href="forms/input-group#multiple-inputs">
|
||||
<CInputGroup>
|
||||
<CInputGroupText>First and last name</CInputGroupText>
|
||||
<CFormInput aria-label="First name" />
|
||||
<CFormInput aria-label="Last name" />
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Multiple addons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Multiple add-ons are supported and can be mixed with checkbox and radio input
|
||||
versions..
|
||||
</p>
|
||||
<DocsExample href="forms/input-group#multiple-addons">
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CInputGroupText>0.00</CInputGroupText>
|
||||
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CInputGroupText>0.00</CInputGroupText>
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Button addons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Multiple add-ons are supported and can be mixed with checkbox and radio input
|
||||
versions..
|
||||
</p>
|
||||
<DocsExample href="forms/input-group#button-addons">
|
||||
<CInputGroup className="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline" id="button-addon1">
|
||||
Button
|
||||
</CButton>
|
||||
<CFormInput
|
||||
placeholder=""
|
||||
aria-label="Example text with button addon"
|
||||
aria-describedby="button-addon1"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CFormInput
|
||||
placeholder="Recipient's username"
|
||||
aria-label="Recipient's username"
|
||||
aria-describedby="button-addon2"
|
||||
/>
|
||||
<CButton type="button" color="secondary" variant="outline" id="button-addon2">
|
||||
Button
|
||||
</CButton>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
<CFormInput placeholder="" aria-label="Example text with two button addons" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput
|
||||
placeholder="Recipient's username"
|
||||
aria-label="Recipient's username with two button addons"
|
||||
/>
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Buttons with dropdowns</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/input-group#buttons-with-dropdowns">
|
||||
<CInputGroup className="mb-3">
|
||||
<CDropdown variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
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>
|
||||
<CFormInput aria-label="Text input with dropdown button" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CFormInput aria-label="Text input with dropdown button" />
|
||||
<CDropdown alignment="end" variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
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>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CDropdown variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
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>
|
||||
<CFormInput aria-label="Text input with 2 dropdown buttons" />
|
||||
<CDropdown alignment="end" variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
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>
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Segmented buttons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/input-group#segmented-buttons">
|
||||
<CInputGroup className="mb-3">
|
||||
<CDropdown variant="input-group">
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Action
|
||||
</CButton>
|
||||
<CDropdownToggle color="secondary" variant="outline" 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>
|
||||
<CFormInput aria-label="Text input with segmented dropdown button" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput aria-label="Text input with segmented dropdown button" />
|
||||
<CDropdown alignment="end" variant="input-group">
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Action
|
||||
</CButton>
|
||||
<CDropdownToggle color="secondary" variant="outline" 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>
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Custom select</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/input-group#custom-select">
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText component="label" htmlFor="inputGroupSelect01">
|
||||
Options
|
||||
</CInputGroupText>
|
||||
<CFormSelect id="inputGroupSelect01">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CFormSelect id="inputGroupSelect02">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CInputGroupText component="label" htmlFor="inputGroupSelect02">
|
||||
Options
|
||||
</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
<CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Custom file input</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/input-group#custom-file-input">
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText component="label" htmlFor="inputGroupFile01">
|
||||
Upload
|
||||
</CInputGroupText>
|
||||
<CFormInput type="file" id="inputGroupFile01" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CFormInput type="file" id="inputGroupFile02" />
|
||||
<CInputGroupText component="label" htmlFor="inputGroupFile02">
|
||||
Upload
|
||||
</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CButton
|
||||
type="button"
|
||||
color="secondary"
|
||||
variant="outline"
|
||||
id="inputGroupFileAddon03"
|
||||
>
|
||||
Button
|
||||
</CButton>
|
||||
<CFormInput
|
||||
type="file"
|
||||
id="inputGroupFile03"
|
||||
aria-describedby="inputGroupFileAddon03"
|
||||
aria-label="Upload"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput
|
||||
type="file"
|
||||
id="inputGroupFile04"
|
||||
aria-describedby="inputGroupFileAddon04"
|
||||
aria-label="Upload"
|
||||
/>
|
||||
<CButton
|
||||
type="button"
|
||||
color="secondary"
|
||||
variant="outline"
|
||||
id="inputGroupFileAddon04"
|
||||
>
|
||||
Button
|
||||
</CButton>
|
||||
</CInputGroup>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Select
|
||||
@ -1,414 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CForm,
|
||||
CFormCheck,
|
||||
CFormInput,
|
||||
CFormLabel,
|
||||
CFormSelect,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsExample } from 'src/components'
|
||||
|
||||
const Layout = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Form grid</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
More complex forms can be built using our grid classes. Use these for form layouts
|
||||
that require multiple columns, varied widths, and additional alignment options.
|
||||
</p>
|
||||
<DocsExample href="forms/layout#form-grid">
|
||||
<CRow>
|
||||
<CCol xs>
|
||||
<CFormInput placeholder="First name" aria-label="First name" />
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CFormInput placeholder="Last name" aria-label="Last name" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Gutters</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
By adding <a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>
|
||||
, you can have control over the gutter width in as well the inline as block direction.
|
||||
</p>
|
||||
<DocsExample href="forms/layout#gutters">
|
||||
<CRow className="g-3">
|
||||
<CCol xs>
|
||||
<CFormInput placeholder="First name" aria-label="First name" />
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CFormInput placeholder="Last name" aria-label="Last name" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
More complex layouts can also be created with the grid system.
|
||||
</p>
|
||||
<DocsExample href="forms/layout#gutters">
|
||||
<CForm className="row g-3">
|
||||
<CCol md={6}>
|
||||
<CFormLabel htmlFor="inputEmail4">Email</CFormLabel>
|
||||
<CFormInput type="email" id="inputEmail4" />
|
||||
</CCol>
|
||||
<CCol md={6}>
|
||||
<CFormLabel htmlFor="inputPassword4">Password</CFormLabel>
|
||||
<CFormInput type="password" id="inputPassword4" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CFormLabel htmlFor="inputAddress">Address</CFormLabel>
|
||||
<CFormInput id="inputAddress" placeholder="1234 Main St" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CFormLabel htmlFor="inputAddress2">Address 2</CFormLabel>
|
||||
<CFormInput id="inputAddress2" placeholder="Apartment, studio, or floor" />
|
||||
</CCol>
|
||||
<CCol md={6}>
|
||||
<CFormLabel htmlFor="inputCity">City</CFormLabel>
|
||||
<CFormInput id="inputCity" />
|
||||
</CCol>
|
||||
<CCol md={4}>
|
||||
<CFormLabel htmlFor="inputState">State</CFormLabel>
|
||||
<CFormSelect id="inputState">
|
||||
<option>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md={2}>
|
||||
<CFormLabel htmlFor="inputZip">Zip</CFormLabel>
|
||||
<CFormInput id="inputZip" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CFormCheck type="checkbox" id="gridCheck" label="Check me out" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CButton type="submit">Sign in</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Horizontal form</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Create horizontal forms with the grid by adding the <code>.row</code> class to form
|
||||
groups and using the <code>.col-*-*</code> classes to specify the width of your labels
|
||||
and controls. Be sure to add <code>.col-form-label</code> to your{' '}
|
||||
<code><CFormLabel></code>s as well so they're vertically centered with their
|
||||
associated form controls.
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
At times, you maybe need to use margin or padding utilities to create that perfect
|
||||
alignment you need. For example, we've removed the <code>padding-top</code> on our
|
||||
stacked radio inputs label to better align the text baseline.
|
||||
</p>
|
||||
<DocsExample href="forms/layout#horizontal-form">
|
||||
<CForm>
|
||||
<CRow className="mb-3">
|
||||
<CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CCol sm={10}>
|
||||
<CFormInput type="email" id="inputEmail3" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="mb-3">
|
||||
<CFormLabel htmlFor="inputPassword3" className="col-sm-2 col-form-label">
|
||||
Password
|
||||
</CFormLabel>
|
||||
<CCol sm={10}>
|
||||
<CFormInput type="password" id="inputPassword3" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<fieldset className="row mb-3">
|
||||
<legend className="col-form-label col-sm-2 pt-0">Radios</legend>
|
||||
<CCol sm={10}>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="gridRadios"
|
||||
id="gridRadios1"
|
||||
value="option1"
|
||||
label="First radio"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="gridRadios"
|
||||
id="gridRadios2"
|
||||
value="option2"
|
||||
label="Second radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="gridRadios"
|
||||
id="gridRadios3"
|
||||
value="option3"
|
||||
label="Third disabled radio"
|
||||
disabled
|
||||
/>
|
||||
</CCol>
|
||||
</fieldset>
|
||||
<CRow className="mb-3">
|
||||
<div className="col-sm-10 offset-sm-2">
|
||||
<CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox" />
|
||||
</div>
|
||||
</CRow>
|
||||
<CButton type="submit">Sign in</CButton>
|
||||
</CForm>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Horizontal form label sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Be sure to use <code>.col-form-label-sm</code> or <code>.col-form-label-lg</code> to
|
||||
your <code><CFormLabel></code>s or <code><legend></code>s to correctly
|
||||
follow the size of <code>.form-control-lg</code> and <code>.form-control-sm</code>.
|
||||
</p>
|
||||
<DocsExample href="forms/layout#horizontal-form-label-sizing">
|
||||
<CRow className="mb-3">
|
||||
<CFormLabel
|
||||
htmlFor="colFormLabelSm"
|
||||
className="col-sm-2 col-form-label col-form-label-sm"
|
||||
>
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CCol sm={10}>
|
||||
<CFormInput
|
||||
type="email"
|
||||
className="form-control form-control-sm"
|
||||
id="colFormLabelSm"
|
||||
placeholder="col-form-label-sm"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="mb-3">
|
||||
<CFormLabel htmlFor="colFormLabel" className="col-sm-2 col-form-label">
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CCol sm={10}>
|
||||
<CFormInput type="email" id="colFormLabel" placeholder="col-form-label" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CFormLabel
|
||||
htmlFor="colFormLabelLg"
|
||||
className="col-sm-2 col-form-label col-form-label-lg"
|
||||
>
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CCol sm={10}>
|
||||
<CFormInput
|
||||
type="email"
|
||||
className="form-control form-control-lg"
|
||||
id="colFormLabelLg"
|
||||
placeholder="col-form-label-lg"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Column sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
As shown in the previous examples, our grid system allows you to place any number of{' '}
|
||||
<code><CCol></code>s within a <code><CRow></code>. They'll split the
|
||||
available width equally between them. You may also pick a subset of your columns to
|
||||
take up more or less space, while the remaining <code><CCol></code>s equally
|
||||
split the rest, with specific column classes like{' '}
|
||||
<code><CCol sm="7"></code>.
|
||||
</p>
|
||||
<DocsExample href="forms/layout#column-sizing">
|
||||
<CRow className="g-3">
|
||||
<CCol sm={7}>
|
||||
<CFormInput placeholder="City" aria-label="City" />
|
||||
</CCol>
|
||||
<CCol sm>
|
||||
<CFormInput placeholder="State" aria-label="State" />
|
||||
</CCol>
|
||||
<CCol sm>
|
||||
<CFormInput placeholder="Zip" aria-label="Zip" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Auto-sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
The example below uses a flexbox utility to vertically center the contents and changes{' '}
|
||||
<code><CCol></code> to <code><CCol xs="auto"></code> so that your
|
||||
columns only take up as much space as needed. Put another way, the column sizes itself
|
||||
based on the contents.
|
||||
</p>
|
||||
<DocsExample href="forms/layout#auto-sizing">
|
||||
<CForm className="row gy-2 gx-3 align-items-center">
|
||||
<CCol xs="auto">
|
||||
<CFormLabel className="visually-hidden" htmlFor="autoSizingInput">
|
||||
Name
|
||||
</CFormLabel>
|
||||
<CFormInput id="autoSizingInput" placeholder="Jane Doe" />
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CFormLabel className="visually-hidden" htmlFor="autoSizingInputGroup">
|
||||
Username
|
||||
</CFormLabel>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput id="autoSizingInputGroup" placeholder="Username" />
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CFormLabel className="visually-hidden" htmlFor="autoSizingSelect">
|
||||
Preference
|
||||
</CFormLabel>
|
||||
<CFormSelect id="autoSizingSelect">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me" />
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CButton type="submit">Submit</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
You can then remix that once again with size-specific column classes.
|
||||
</p>
|
||||
<DocsExample href="forms/layout#auto-sizing">
|
||||
<CForm className="row gx-3 gy-2 align-items-center">
|
||||
<CCol sm={3}>
|
||||
<CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">
|
||||
Name
|
||||
</CFormLabel>
|
||||
<CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
|
||||
</CCol>
|
||||
<CCol sm={3}>
|
||||
<CFormLabel className="visually-hidden" htmlFor="specificSizeInputGroupUsername">
|
||||
Username
|
||||
</CFormLabel>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput id="specificSizeInputGroupUsername" placeholder="Username" />
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol sm={3}>
|
||||
<CFormLabel className="visually-hidden" htmlFor="specificSizeSelect">
|
||||
Preference
|
||||
</CFormLabel>
|
||||
<CFormSelect id="specificSizeSelect">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me" />
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CButton type="submit">Submit</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Inline forms</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use the <code><CCol xs="auto"></code> class to create horizontal
|
||||
layouts. By adding{' '}
|
||||
<a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>, we will
|
||||
have gutters in horizontal and vertical directions. The{' '}
|
||||
<code>.align-items-center</code> aligns the form elements to the middle, making the{' '}
|
||||
<code><CFormCheck></code> align properly.
|
||||
</p>
|
||||
<DocsExample href="forms/layout#inline-forms">
|
||||
<CForm className="row row-cols-lg-auto g-3 align-items-center">
|
||||
<CCol xs={12}>
|
||||
<CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername">
|
||||
Username
|
||||
</CFormLabel>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput id="inlineFormInputGroupUsername" placeholder="Username" />
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CFormLabel className="visually-hidden" htmlFor="inlineFormSelectPref">
|
||||
Preference
|
||||
</CFormLabel>
|
||||
<CFormSelect id="inlineFormSelectPref">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CButton type="submit">Submit</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Layout
|
||||
@ -1,85 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCardHeader, CCol, CFormLabel, CFormRange, CRow } from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Range = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Range" href="forms/range" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Range</strong> <small></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Create custom <code><input type="range"></code> controls with{' '}
|
||||
<code><CFormRange></code>.
|
||||
</p>
|
||||
<DocsExample href="forms/range">
|
||||
<CFormLabel htmlFor="customRange1">Example range</CFormLabel>
|
||||
<CFormRange id="customRange1" />
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Range</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
|
||||
appearance and remove pointer events.
|
||||
</p>
|
||||
<DocsExample href="forms/range#disabled">
|
||||
<CFormLabel htmlFor="disabledRange">Disabled range</CFormLabel>
|
||||
<CFormRange id="disabledRange" disabled />
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Range</strong> <small>Min and max</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Range inputs have implicit values for <code>min</code> and <code>max</code>—
|
||||
<code>0</code> and <code>100</code>, respectively. You may specify new values for
|
||||
those using the <code>min</code> and <code>max</code> attributes.
|
||||
</p>
|
||||
<DocsExample href="forms/range#min-and-max">
|
||||
<CFormLabel htmlFor="customRange2">Example range</CFormLabel>
|
||||
<CFormRange min="0" max="5" defaultValue="3" id="customRange2" />
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Range</strong> <small>Steps</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
By default, range inputs "snap" to integer values. To change this, you can
|
||||
specify a <code>step</code> value. In the example below, we double the number of steps
|
||||
by using <code>step="0.5"</code>.
|
||||
</p>
|
||||
<DocsExample href="forms/range#steps">
|
||||
<CFormLabel htmlFor="customRange3">Example range</CFormLabel>
|
||||
<CFormRange min="0" max="5" step="0.5" defaultValue="3" id="customRange3" />
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Range
|
||||
@ -1,102 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Select = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Form Select" href="forms/select" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Select</strong> <small>Default</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="forms/select">
|
||||
<CFormSelect aria-label="Default select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Select</strong> <small>Sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
You may also choose from small and large custom selects to match our similarly sized
|
||||
text inputs.
|
||||
</p>
|
||||
<DocsExample href="forms/select#sizing">
|
||||
<CFormSelect size="lg" className="mb-3" aria-label="Large select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CFormSelect size="sm" className="mb-3" aria-label="Small select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
The <code>multiple</code> attribute is also supported:
|
||||
</p>
|
||||
<DocsExample href="forms/select#sizing">
|
||||
<CFormSelect size="lg" multiple aria-label="Multiple select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
As is the <code>htmlSize</code> property:
|
||||
</p>
|
||||
<DocsExample href="forms/select#sizing">
|
||||
<CFormSelect size="lg" multiple aria-label="Multiple select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Select</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add the <code>disabled</code> boolean attribute on a select to give it a grayed out
|
||||
appearance and remove pointer events.
|
||||
</p>
|
||||
<DocsExample href="forms/select#disabled">
|
||||
<CFormSelect aria-label="Disabled select example" disabled>
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Select
|
||||
@ -1,506 +0,0 @@
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CForm,
|
||||
CFormCheck,
|
||||
CFormInput,
|
||||
CFormFeedback,
|
||||
CFormLabel,
|
||||
CFormSelect,
|
||||
CFormTextarea,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const CustomStyles = () => {
|
||||
const [validated, setValidated] = useState(false)
|
||||
const handleSubmit = (event) => {
|
||||
const form = event.currentTarget
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
setValidated(true)
|
||||
}
|
||||
return (
|
||||
<CForm
|
||||
className="row g-3 needs-validation"
|
||||
noValidate
|
||||
validated={validated}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<CCol md={4}>
|
||||
<CFormLabel htmlFor="validationCustom01">Email</CFormLabel>
|
||||
<CFormInput type="text" id="validationCustom01" defaultValue="Mark" required />
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={4}>
|
||||
<CFormLabel htmlFor="validationCustom02">Email</CFormLabel>
|
||||
<CFormInput type="text" id="validationCustom02" defaultValue="Otto" required />
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={4}>
|
||||
<CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
|
||||
<CInputGroup className="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="validationCustomUsername"
|
||||
defaultValue=""
|
||||
aria-describedby="inputGroupPrepend"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>Please choose a username.</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md={6}>
|
||||
<CFormLabel htmlFor="validationCustom03">City</CFormLabel>
|
||||
<CFormInput type="text" id="validationCustom03" required />
|
||||
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={3}>
|
||||
<CFormLabel htmlFor="validationCustom04">City</CFormLabel>
|
||||
<CFormSelect id="validationCustom04">
|
||||
<option disabled>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={3}>
|
||||
<CFormLabel htmlFor="validationCustom05">City</CFormLabel>
|
||||
<CFormInput type="text" id="validationCustom05" required />
|
||||
<CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
id="invalidCheck"
|
||||
label="Agree to terms and conditions"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CButton color="primary" type="submit">
|
||||
Submit form
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
)
|
||||
}
|
||||
|
||||
const BrowserDefaults = () => {
|
||||
const [validated, setValidated] = useState(false)
|
||||
const handleSubmit = (event) => {
|
||||
const form = event.currentTarget
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
setValidated(true)
|
||||
}
|
||||
return (
|
||||
<CForm className="row g-3 needs-validation" validated={validated} onSubmit={handleSubmit}>
|
||||
<CCol md={4}>
|
||||
<CFormLabel htmlFor="validationDefault01">Email</CFormLabel>
|
||||
<CFormInput type="text" id="validationDefault01" defaultValue="Mark" required />
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={4}>
|
||||
<CFormLabel htmlFor="validationDefault02">Email</CFormLabel>
|
||||
<CFormInput type="text" id="validationDefault02" defaultValue="Otto" required />
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={4}>
|
||||
<CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel>
|
||||
<CInputGroup className="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="validationDefaultUsername"
|
||||
defaultValue=""
|
||||
aria-describedby="inputGroupPrepend02"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>Please choose a username.</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md={6}>
|
||||
<CFormLabel htmlFor="validationDefault03">City</CFormLabel>
|
||||
<CFormInput type="text" id="validationDefault03" required />
|
||||
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={3}>
|
||||
<CFormLabel htmlFor="validationDefault04">City</CFormLabel>
|
||||
<CFormSelect id="validationDefault04">
|
||||
<option disabled>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={3}>
|
||||
<CFormLabel htmlFor="validationDefault05">City</CFormLabel>
|
||||
<CFormInput type="text" id="validationDefault05" required />
|
||||
<CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
id="invalidCheck"
|
||||
label="Agree to terms and conditions"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CButton color="primary" type="submit">
|
||||
Submit form
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
)
|
||||
}
|
||||
|
||||
const Tooltips = () => {
|
||||
const [validated, setValidated] = useState(false)
|
||||
const handleSubmit = (event) => {
|
||||
const form = event.currentTarget
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
setValidated(true)
|
||||
}
|
||||
return (
|
||||
<CForm
|
||||
className="row g-3 needs-validation"
|
||||
noValidate
|
||||
validated={validated}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<CCol md={4} className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltip01">Email</CFormLabel>
|
||||
<CFormInput type="text" id="validationTooltip01" defaultValue="Mark" required />
|
||||
<CFormFeedback tooltip valid>
|
||||
Looks good!
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={4} className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltip02">Email</CFormLabel>
|
||||
<CFormInput type="text" id="validationTooltip02" defaultValue="Otto" required />
|
||||
<CFormFeedback tooltip valid>
|
||||
Looks good!
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={4} className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
|
||||
<CInputGroup className="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="validationTooltipUsername"
|
||||
defaultValue=""
|
||||
aria-describedby="inputGroupPrepend"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback tooltip invalid>
|
||||
Please choose a username.
|
||||
</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md={6} className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltip03">City</CFormLabel>
|
||||
<CFormInput type="text" id="validationTooltip03" required />
|
||||
<CFormFeedback tooltip invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={3} className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltip04">City</CFormLabel>
|
||||
<CFormSelect id="validationTooltip04" required>
|
||||
<option disabled defaultValue="">
|
||||
Choose...
|
||||
</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback tooltip invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={3} className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltip05">City</CFormLabel>
|
||||
<CFormInput type="text" id="validationTooltip05" required />
|
||||
<CFormFeedback tooltip invalid>
|
||||
Please provide a valid zip.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs={12} className="position-relative">
|
||||
<CButton color="primary" type="submit">
|
||||
Submit form
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
)
|
||||
}
|
||||
|
||||
const Validation = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Validation" href="forms/validation" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Custom styles</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
For custom CoreUI form validation messages, you'll need to add the{' '}
|
||||
<code>noValidate</code> boolean property to your <code><CForm></code>. This
|
||||
disables the browser default feedback tooltips, but still provides access to the form
|
||||
validation APIs in JavaScript. Try to submit the form below; our JavaScript will
|
||||
intercept the submit button and relay feedback to you. When attempting to submit,
|
||||
you'll see the <code>:invalid</code> and <code>:valid</code> styles applied to
|
||||
your form controls.
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
Custom feedback styles apply custom colors, borders, focus styles, and background
|
||||
icons to better communicate feedback.{' '}
|
||||
</p>
|
||||
<DocsExample href="forms/validation">{CustomStyles()}</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Browser defaults</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Not interested in custom validation feedback messages or writing JavaScript to change
|
||||
form behaviors? All good, you can use the browser defaults. Try submitting the form
|
||||
below. Depending on your browser and OS, you'll see a slightly different style of
|
||||
feedback.
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
While these feedback styles cannot be styled with CSS, you can still customize the
|
||||
feedback text through JavaScript.
|
||||
</p>
|
||||
<DocsExample href="forms/validation#browser-defaults">{BrowserDefaults()}</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Server side</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
We recommend using client-side validation, but in case you require server-side
|
||||
validation, you can indicate invalid and valid form fields with <code>invalid</code>{' '}
|
||||
and <code>valid</code> boolean properties.
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
For invalid fields, ensure that the invalid feedback/error message is associated with
|
||||
the relevant form field using <code>aria-describedby</code> (noting that this
|
||||
attribute allows more than one <code>id</code> to be referenced, in case the field
|
||||
already points to additional form text).
|
||||
</p>
|
||||
<DocsExample href="forms/validation#server-side">
|
||||
<CForm className="row g-3 needs-validation">
|
||||
<CCol md={4}>
|
||||
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="validationServer01"
|
||||
defaultValue="Mark"
|
||||
valid
|
||||
required
|
||||
/>
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={4}>
|
||||
<CFormLabel htmlFor="validationServer02">Email</CFormLabel>
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="validationServer02"
|
||||
defaultValue="Otto"
|
||||
valid
|
||||
required
|
||||
/>
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={4}>
|
||||
<CFormLabel htmlFor="validationServerUsername">Username</CFormLabel>
|
||||
<CInputGroup className="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="validationServerUsername"
|
||||
defaultValue=""
|
||||
aria-describedby="inputGroupPrepend03"
|
||||
invalid
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>Please choose a username.</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md={6}>
|
||||
<CFormLabel htmlFor="validationServer03">City</CFormLabel>
|
||||
<CFormInput type="text" id="validationServer03" invalid required />
|
||||
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={3}>
|
||||
<CFormLabel htmlFor="validationServer04">City</CFormLabel>
|
||||
<CFormSelect id="validationServer04" invalid>
|
||||
<option disabled>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md={3}>
|
||||
<CFormLabel htmlFor="validationServer05">City</CFormLabel>
|
||||
<CFormInput type="text" id="validationServer05" invalid required />
|
||||
<CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
id="invalidCheck"
|
||||
label="Agree to terms and conditions"
|
||||
invalid
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CButton color="primary" type="submit">
|
||||
Submit form
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Supported elements</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Validation styles are available for the following form controls and components:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code><CFormInput></code>s
|
||||
</li>
|
||||
<li>
|
||||
<code><CFormSelect></code>s
|
||||
</li>
|
||||
<li>
|
||||
<code><CFormCheck></code>s
|
||||
</li>
|
||||
</ul>
|
||||
<DocsExample href="forms/validation#supported-elements">
|
||||
<CForm validated={true}>
|
||||
<div className="mb-3">
|
||||
<CFormLabel htmlFor="validationTextarea" className="form-label">
|
||||
Textarea
|
||||
</CFormLabel>
|
||||
<CFormTextarea
|
||||
id="validationTextarea"
|
||||
placeholder="Required example textarea"
|
||||
invalid
|
||||
required
|
||||
></CFormTextarea>
|
||||
<CFormFeedback invalid>Please enter a message in the textarea.</CFormFeedback>
|
||||
</div>
|
||||
<CFormCheck
|
||||
className="mb-3"
|
||||
id="validationFormCheck1"
|
||||
label="Check this checkbox"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>Example invalid feedback text</CFormFeedback>
|
||||
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="radio-stacked"
|
||||
id="validationFormCheck2"
|
||||
label="Check this checkbox"
|
||||
required
|
||||
/>
|
||||
|
||||
<CFormCheck
|
||||
className="mb-3"
|
||||
type="radio"
|
||||
name="radio-stacked"
|
||||
id="validationFormCheck3"
|
||||
label="Or toggle this other radio"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>More example invalid feedback text</CFormFeedback>
|
||||
|
||||
<div className="mb-3">
|
||||
<CFormSelect required aria-label="select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>Example invalid select feedback</CFormFeedback>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<CFormInput
|
||||
type="file"
|
||||
id="validationTextarea"
|
||||
aria-label="file example"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>Example invalid form file feedback</CFormFeedback>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<CButton type="submit" color="primary" disabled>
|
||||
Submit form
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Tooltips</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
If your form layout allows it, you can swap the text for the tooltip to display
|
||||
validation feedback in a styled tooltip. Be sure to have a parent with{' '}
|
||||
<code>position: relative</code> on it for tooltip positioning. In the example below,
|
||||
our column classes have this already, but your project may require an alternative
|
||||
setup.
|
||||
</p>
|
||||
<DocsExample href="forms/validation#tooltips">{Tooltips()}</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Validation
|
||||
@ -1,38 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { brandSet } from '@coreui/icons'
|
||||
import { DocsCallout } from 'src/components'
|
||||
|
||||
const toKebabCase = (str) => {
|
||||
return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
|
||||
export const getIconsView = (iconset) => {
|
||||
return Object.entries(iconset).map(([name, value]) => (
|
||||
<CCol className="mb-5" xs={6} sm={4} md={3} xl={2} key={name}>
|
||||
<CIcon icon={value} size="xxl" />
|
||||
<div>{toKebabCase(name)}</div>
|
||||
</CCol>
|
||||
))
|
||||
}
|
||||
|
||||
const CoreUIIcons = () => {
|
||||
return (
|
||||
<>
|
||||
<DocsCallout
|
||||
name="CoreUI Brand Icons"
|
||||
href="components/chart"
|
||||
content="CoreUI Brand Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
|
||||
/>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Brand Icons</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow className="text-center">{getIconsView(brandSet)}</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default CoreUIIcons
|
||||
@ -1,25 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
|
||||
import { freeSet } from '@coreui/icons'
|
||||
import { getIconsView } from '../brands/Brands.js'
|
||||
import { DocsCallout } from 'src/components'
|
||||
|
||||
const CoreUIIcons = () => {
|
||||
return (
|
||||
<>
|
||||
<DocsCallout
|
||||
name="CoreUI Icons"
|
||||
href="components/chart"
|
||||
content="CoreUI Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
|
||||
/>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Free Icons</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow className="text-center">{getIconsView(freeSet)}</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default CoreUIIcons
|
||||
@ -1,25 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
|
||||
import { getIconsView } from '../brands/Brands.js'
|
||||
import { flagSet } from '@coreui/icons'
|
||||
import { DocsCallout } from 'src/components'
|
||||
|
||||
const CoreUIIcons = () => {
|
||||
return (
|
||||
<>
|
||||
<DocsCallout
|
||||
name="CoreUI Flag Icons"
|
||||
href="components/chart"
|
||||
content="CoreUI Flag Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
|
||||
/>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Flag Icons</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow className="text-center">{getIconsView(flagSet)}</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default CoreUIIcons
|
||||
@ -1,5 +0,0 @@
|
||||
import CoreUIIcons from './coreui-icons'
|
||||
import Flags from './flags'
|
||||
import Brands from './brands'
|
||||
|
||||
export { CoreUIIcons, Flags, Brands }
|
||||
@ -1,150 +0,0 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CAlert,
|
||||
CAlertHeading,
|
||||
CAlertLink,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Alerts = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Alert" href="components/alert" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Alert</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
React Alert is prepared for any length of text, as well as an optional close button.
|
||||
For a styling, use one of the <strong>required</strong> contextual <code>color</code>{' '}
|
||||
props (e.g., <code>primary</code>). For inline dismissal, use the{' '}
|
||||
<a href="https://coreui.io/react/docs/4.0/components/alert#dismissing">
|
||||
dismissing prop
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<DocsExample href="components/alert">
|
||||
<CAlert color="primary">A simple primary alert—check it out!</CAlert>
|
||||
<CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
|
||||
<CAlert color="success">A simple success alert—check it out!</CAlert>
|
||||
<CAlert color="danger">A simple danger alert—check it out!</CAlert>
|
||||
<CAlert color="warning">A simple warning alert—check it out!</CAlert>
|
||||
<CAlert color="info">A simple info alert—check it out!</CAlert>
|
||||
<CAlert color="light">A simple light alert—check it out!</CAlert>
|
||||
<CAlert color="dark">A simple dark alert—check it out!</CAlert>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Alert</strong> <small>Link color</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use the <code><CAlertLink></code> component to immediately give matching colored
|
||||
links inside any alert.
|
||||
</p>
|
||||
<DocsExample href="components/alert#link-color">
|
||||
<CAlert color="primary">
|
||||
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give
|
||||
it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="secondary">
|
||||
A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>.
|
||||
Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="success">
|
||||
A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give
|
||||
it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="danger">
|
||||
A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give
|
||||
it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="warning">
|
||||
A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give
|
||||
it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="info">
|
||||
A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
|
||||
a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="light">
|
||||
A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
|
||||
a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="dark">
|
||||
A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
|
||||
a click if you like.
|
||||
</CAlert>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Alert</strong> <small>Additional content</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Alert can also incorporate supplementary components & elements like heading,
|
||||
paragraph, and divider.
|
||||
</p>
|
||||
<DocsExample href="components/alert#additional-content">
|
||||
<CAlert color="success">
|
||||
<CAlertHeading tag="h4">Well done!</CAlertHeading>
|
||||
<p>
|
||||
Aww yeah, you successfully read this important alert message. This example text is
|
||||
going to run a bit longer so that you can see how spacing within an alert works
|
||||
with this kind of content.
|
||||
</p>
|
||||
<hr />
|
||||
<p className="mb-0">
|
||||
Whenever you need to, be sure to use margin utilities to keep things nice and
|
||||
tidy.
|
||||
</p>
|
||||
</CAlert>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Alert</strong> <small>Dismissing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Alerts can also be easily dismissed. Just add the <code>dismissible</code> prop.
|
||||
</p>
|
||||
<DocsExample href="components/alert#dismissing">
|
||||
<CAlert
|
||||
color="warning"
|
||||
dismissible
|
||||
onClose={() => {
|
||||
alert('👋 Well, hi there! Thanks for dismissing me.')
|
||||
}}
|
||||
>
|
||||
<strong>Go right ahead</strong> and click that dimiss over there on the right.
|
||||
</CAlert>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Alerts
|
||||
@ -1,125 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CCol, CBadge, CRow } from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Badges = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Badges" href="components/badge" />
|
||||
</CCol>
|
||||
<CCol lg={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Badges</strong> <small>Dismissing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Bootstrap badge scale to suit the size of the parent element by using relative font
|
||||
sizing and <code>em</code> units.
|
||||
</p>
|
||||
<DocsExample href="components/badge">
|
||||
<h1>
|
||||
Example heading <CBadge color="secondary">New</CBadge>
|
||||
</h1>
|
||||
<h2>
|
||||
Example heading <CBadge color="secondary">New</CBadge>
|
||||
</h2>
|
||||
<h3>
|
||||
Example heading <CBadge color="secondary">New</CBadge>
|
||||
</h3>
|
||||
<h4>
|
||||
Example heading <CBadge color="secondary">New</CBadge>
|
||||
</h4>
|
||||
<h5>
|
||||
Example heading <CBadge color="secondary">New</CBadge>
|
||||
</h5>
|
||||
<h6>
|
||||
Example heading <CBadge color="secondary">New</CBadge>
|
||||
</h6>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
Badges can be used as part of links or buttons to provide a counter.
|
||||
</p>
|
||||
<DocsExample href="components/badge">
|
||||
<CButton color="primary">
|
||||
Notifications <CBadge color="secondary">4</CBadge>
|
||||
</CButton>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
Remark that depending on how you use them, badges may be complicated for users of
|
||||
screen readers and related assistive technologies.
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
Unless the context is clear, consider including additional context with a visually
|
||||
hidden piece of additional text.
|
||||
</p>
|
||||
<DocsExample href="components/badge">
|
||||
<CButton color="primary">
|
||||
Profile <CBadge color="secondary">9</CBadge>
|
||||
<span className="visually-hidden">unread messages</span>
|
||||
</CButton>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol lg={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Badges</strong> <small>Contextual variations</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add any of the below-mentioned <code>color</code> props to modify the presentation of
|
||||
a badge.
|
||||
</p>
|
||||
<DocsExample href="components/badge#contextual-variations">
|
||||
<CBadge color="primary">primary</CBadge>
|
||||
<CBadge color="success">success</CBadge>
|
||||
<CBadge color="danger">danger</CBadge>
|
||||
<CBadge color="warning">warning</CBadge>
|
||||
<CBadge color="info">info</CBadge>
|
||||
<CBadge color="light">light</CBadge>
|
||||
<CBadge color="dark">dark</CBadge>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Badges</strong> <small>Pill badges</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Apply the <code>shape="rounded-pill"</code> prop to make badges rounded.
|
||||
</p>
|
||||
<DocsExample href="components/badge#pill-badges">
|
||||
<CBadge color="primary" shape="rounded-pill">
|
||||
primary
|
||||
</CBadge>
|
||||
<CBadge color="success" shape="rounded-pill">
|
||||
success
|
||||
</CBadge>
|
||||
<CBadge color="danger" shape="rounded-pill">
|
||||
danger
|
||||
</CBadge>
|
||||
<CBadge color="warning" shape="rounded-pill">
|
||||
warning
|
||||
</CBadge>
|
||||
<CBadge color="info" shape="rounded-pill">
|
||||
info
|
||||
</CBadge>
|
||||
<CBadge color="light" shape="rounded-pill">
|
||||
light
|
||||
</CBadge>
|
||||
<CBadge color="dark" shape="rounded-pill">
|
||||
dark
|
||||
</CBadge>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Badges
|
||||
@ -1,6 +0,0 @@
|
||||
import Alerts from './Alerts'
|
||||
import Badges from './Badges'
|
||||
import Modals from './Modals'
|
||||
import Toaster from './toasts'
|
||||
|
||||
export { Alerts, Badges, Modals, Toaster }
|
||||
@ -1,723 +0,0 @@
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CLink,
|
||||
CModal,
|
||||
CModalBody,
|
||||
CModalFooter,
|
||||
CModalHeader,
|
||||
CModalTitle,
|
||||
CPopover,
|
||||
CRow,
|
||||
CTooltip,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const LiveDemo = () => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
|
||||
<CModal visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" onClick={() => setVisible(false)}>
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const StaticBackdrop = () => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
|
||||
<CModal backdrop="static" visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
I will not close if you click outside me. Don'teven try to press escape key.
|
||||
</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" onClick={() => setVisible(false)}>
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const ScrollingLongContent = () => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
|
||||
<CModal visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" onClick={() => setVisible(false)}>
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const ScrollingLongContent2 = () => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
|
||||
<CModal scrollable visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" onClick={() => setVisible(false)}>
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const VerticallyCentered = () => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
|
||||
<CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" onClick={() => setVisible(false)}>
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const VerticallyCentered2 = () => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
|
||||
<CModal alignment="center" scrollable visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" onClick={() => setVisible(false)}>
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const TooltipsPopovers = () => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
|
||||
<CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
<h5>Popover in a modal</h5>
|
||||
<p>
|
||||
This
|
||||
<CPopover title="Popover title" content="Popover body content is set in this property.">
|
||||
<CButton>button</CButton>
|
||||
</CPopover>{' '}
|
||||
triggers a popover on click.
|
||||
</p>
|
||||
<hr />
|
||||
<h5>Tooltips in a modal</h5>
|
||||
<p>
|
||||
<CTooltip content="Tooltip">
|
||||
<CLink>This link</CLink>
|
||||
</CTooltip>{' '}
|
||||
and
|
||||
<CTooltip content="Tooltip">
|
||||
<CLink>that link</CLink>
|
||||
</CTooltip>{' '}
|
||||
have tooltips on hover.
|
||||
</p>
|
||||
</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" onClick={() => setVisible(false)}>
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const OptionalSizes = () => {
|
||||
const [visibleXL, setVisibleXL] = useState(false)
|
||||
const [visibleLg, setVisibleLg] = useState(false)
|
||||
const [visibleSm, setVisibleSm] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
|
||||
<CButton onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
|
||||
<CButton onClick={() => setVisibleSm(!visibleSm)}>Small large modal</CButton>
|
||||
<CModal size="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Extra large modal</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
<CModal size="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Large modal</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
<CModal size="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Small modal</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const FullscreenModal = () => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
const [visibleSm, setVisibleSm] = useState(false)
|
||||
const [visibleMd, setVisibleMd] = useState(false)
|
||||
const [visibleLg, setVisibleLg] = useState(false)
|
||||
const [visibleXL, setVisibleXL] = useState(false)
|
||||
const [visibleXXL, setVisibleXXL] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Full screen</CButton>
|
||||
<CButton onClick={() => setVisibleSm(!visibleSm)}>Full screen below sm</CButton>
|
||||
<CButton onClick={() => setVisibleMd(!visibleMd)}>Full screen below md</CButton>
|
||||
<CButton onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
|
||||
<CButton onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
|
||||
<CButton onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
|
||||
<CModal fullscreen visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Full screen</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Full screen below sm</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="md" visible={visibleMd} onClose={() => setVisibleMd(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Full screen below md</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Full screen below lg</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Full screen below xl</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="xxl" visible={visibleXXL} onClose={() => setVisibleXXL(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Full screen below xxl</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const Modals = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Modal" href="components/modal" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Modal</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Below is a static modal example (meaning its <code>position</code> and{' '}
|
||||
<code>display</code> have been overridden). Included are the modal header, modal body
|
||||
(required for <code>padding</code>), and modal footer (optional). We ask that you
|
||||
include modal headers with dismiss actions whenever possible, or provide another
|
||||
explicit dismiss action.
|
||||
</p>
|
||||
<DocsExample href="components/modal">
|
||||
<CModal
|
||||
className="show d-block position-static"
|
||||
backdrop={false}
|
||||
keyboard={false}
|
||||
portal={false}
|
||||
visible
|
||||
>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>Modal body text goes here.</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary">Close</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Modal</strong> <small>Live demo</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Toggle a working modal demo by clicking the button below. It will slide down and fade
|
||||
in from the top of the page.
|
||||
</p>
|
||||
<DocsExample href="components/modal#live-demo">{LiveDemo()}</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Modal</strong> <small>Static backdrop</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
If you don’t provide an <code>onDimsiss</code> handler to the Modal component, your
|
||||
modal will behave as though the backdrop is static, meaning it will not close when
|
||||
clicking outside it. Click the button below to try it.
|
||||
</p>
|
||||
<DocsExample href="components/modal#static-backdrop">{StaticBackdrop()}</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Modal</strong> <small>Scrolling long content</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
If you don’t provide an <code>onDimsiss</code> handler to the Modal component, your
|
||||
modal will behave as though the backdrop is static, meaning it will not close when
|
||||
clicking outside it. Click the button below to try it.
|
||||
</p>
|
||||
<DocsExample href="components/modal#scrolling-long-content">
|
||||
{ScrollingLongContent()}
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
You can also create a scrollable modal that allows scroll the modal body by adding{' '}
|
||||
<code>scrollable</code> prop.
|
||||
</p>
|
||||
<DocsExample href="components/modal#scrolling-long-content">
|
||||
{ScrollingLongContent2()}
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Modal</strong> <small>Vertically centered</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code>alignment="center"</code> to <code><CModal></code> to
|
||||
vertically center the modal.
|
||||
</p>
|
||||
<DocsExample href="components/modal#vertically-centered">
|
||||
{VerticallyCentered()}
|
||||
</DocsExample>
|
||||
<DocsExample href="components/modal#vertically-centered">
|
||||
{VerticallyCentered2()}
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Modal</strong> <small>Tooltips and popovers</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
<code><CTooltips></code> and <code><CPopovers></code> can be placed within
|
||||
modals as needed. When modals are closed, any tooltips and popovers within are also
|
||||
automatically dismissed.
|
||||
</p>
|
||||
<DocsExample href="components/modal#tooltips-and-popovers">
|
||||
{TooltipsPopovers()}
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Modal</strong> <small>Optional sizes</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Modals have three optional sizes, available via modifier classes to be placed on a{' '}
|
||||
<code><CModal></code>. These sizes kick in at certain breakpoints to avoid
|
||||
horizontal scrollbars on narrower viewports.
|
||||
</p>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Size</th>
|
||||
<th>Property size</th>
|
||||
<th>Modal max-width</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Small</td>
|
||||
<td>
|
||||
<code>'sm'</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>300px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Default</td>
|
||||
<td className="text-medium-emphasis">None</td>
|
||||
<td>
|
||||
<code>500px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Large</td>
|
||||
<td>
|
||||
<code>'lg'</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>800px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Extra large</td>
|
||||
<td>
|
||||
<code>'xl'</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1140px</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<DocsExample href="components/modal#optional-sizes">{OptionalSizes()}</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Modal</strong> <small>Fullscreen Modal</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Another override is the option to pop up a modal that covers the user viewport,
|
||||
available via property <code>fullscrean</code>.
|
||||
</p>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Property fullscrean</th>
|
||||
<th>Availability</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>true</code>
|
||||
</td>
|
||||
<td>Always</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>'sm'</code>
|
||||
</td>
|
||||
<td>
|
||||
Below <code>576px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>'md'</code>
|
||||
</td>
|
||||
<td>
|
||||
Below <code>768px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>'lg'</code>
|
||||
</td>
|
||||
<td>
|
||||
Below <code>992px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>'xl'</code>
|
||||
</td>
|
||||
<td>
|
||||
Below <code>1200px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>'xxl'</code>
|
||||
</td>
|
||||
<td>
|
||||
Below <code>1400px</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<DocsExample href="components/modal#fullscreen-modal">{FullscreenModal()}</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Modals
|
||||
@ -1,255 +0,0 @@
|
||||
import React, { useRef, useState } from 'react'
|
||||
import {
|
||||
CCard,
|
||||
CCardHeader,
|
||||
CCardBody,
|
||||
CButton,
|
||||
CRow,
|
||||
CCol,
|
||||
CToast,
|
||||
CToastBody,
|
||||
CToastClose,
|
||||
CToastHeader,
|
||||
CToaster,
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const ExampleToast = () => {
|
||||
const [toast, addToast] = useState(0)
|
||||
const toaster = useRef()
|
||||
const exampleToast = (
|
||||
<CToast title="CoreUI for React.js">
|
||||
<CToastHeader closeButton>
|
||||
<svg
|
||||
className="rounded me-2"
|
||||
width="20"
|
||||
height="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
role="img"
|
||||
>
|
||||
<rect width="100%" height="100%" fill="#007aff"></rect>
|
||||
</svg>
|
||||
<strong className="me-auto">CoreUI for React.js</strong>
|
||||
<small>7 min ago</small>
|
||||
</CToastHeader>
|
||||
<CToastBody>Hello, world! This is a toast message.</CToastBody>
|
||||
</CToast>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => addToast(exampleToast)}>Send a toast</CButton>
|
||||
<CToaster ref={toaster} push={toast} placement="top-end" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const Toasts = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<DocsCallout name="Toast" href="components/toast" />
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Toast</strong> <small>Basic</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Toasts are as flexible as you need and have very little required markup. At a minimum,
|
||||
we require a single element to contain your “toasted” content and strongly encourage a
|
||||
dismiss button.
|
||||
</p>
|
||||
<DocsExample href="components/toast">
|
||||
<CToast title="CoreUI for React.js" autohide={false} visible={true}>
|
||||
<CToastHeader closeButton>
|
||||
<svg
|
||||
className="rounded me-2"
|
||||
width="20"
|
||||
height="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
role="img"
|
||||
>
|
||||
<rect width="100%" height="100%" fill="#007aff"></rect>
|
||||
</svg>
|
||||
<strong className="me-auto">CoreUI for React.js</strong>
|
||||
<small>7 min ago</small>
|
||||
</CToastHeader>
|
||||
<CToastBody>Hello, world! This is a toast message.</CToastBody>
|
||||
</CToast>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/toast">{ExampleToast()}</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Toast</strong> <small>Translucent</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Toasts are slightly translucent to blend in with what's below them.
|
||||
</p>
|
||||
<DocsExample href="components/toast#translucent">
|
||||
<div className="bg-dark p-3">
|
||||
<CToast title="CoreUI for React.js" autohide={false} visible={true}>
|
||||
<CToastHeader closeButton>
|
||||
<svg
|
||||
className="rounded me-2"
|
||||
width="20"
|
||||
height="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
role="img"
|
||||
>
|
||||
<rect width="100%" height="100%" fill="#007aff"></rect>
|
||||
</svg>
|
||||
<strong className="me-auto">CoreUI for React.js</strong>
|
||||
<small>7 min ago</small>
|
||||
</CToastHeader>
|
||||
<CToastBody>Hello, world! This is a toast message.</CToastBody>
|
||||
</CToast>
|
||||
</div>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Toast</strong> <small>Stacking</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
You can stack toasts by wrapping them in a toast container, which will vertically add
|
||||
some spacing.
|
||||
</p>
|
||||
<DocsExample href="components/toast#stacking">
|
||||
<CToaster>
|
||||
<CToast title="CoreUI for React.js" autohide={false} visible={true}>
|
||||
<CToastHeader closeButton>
|
||||
<svg
|
||||
className="rounded me-2"
|
||||
width="20"
|
||||
height="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
role="img"
|
||||
>
|
||||
<rect width="100%" height="100%" fill="#007aff"></rect>
|
||||
</svg>
|
||||
<strong className="me-auto">CoreUI for React.js</strong>
|
||||
<small>7 min ago</small>
|
||||
</CToastHeader>
|
||||
<CToastBody>Hello, world! This is a toast message.</CToastBody>
|
||||
</CToast>
|
||||
<CToast title="CoreUI for React.js" autohide={false} visible={true}>
|
||||
<CToastHeader closeButton>
|
||||
<svg
|
||||
className="rounded me-2"
|
||||
width="20"
|
||||
height="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
role="img"
|
||||
>
|
||||
<rect width="100%" height="100%" fill="#007aff"></rect>
|
||||
</svg>
|
||||
<strong className="me-auto">CoreUI for React.js</strong>
|
||||
<small>7 min ago</small>
|
||||
</CToastHeader>
|
||||
<CToastBody>Hello, world! This is a toast message.</CToastBody>
|
||||
</CToast>
|
||||
</CToaster>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Toast</strong> <small>Custom content</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Customize your toasts by removing sub-components, tweaking them with{' '}
|
||||
<a href="https://coreui.io/docs/4.0/utilities/api">utilities</a>, or by adding your
|
||||
own markup. Here we've created a simpler toast by removing the default{' '}
|
||||
<code><CToastHeader></code>, adding a custom hide icon from{' '}
|
||||
<a href="https://icons.coreui.io">CoreUI Icons</a>, and using some{' '}
|
||||
<a href="https://coreui.io/docs/4.0/utilities/flex">flexbox utilities</a> to adjust
|
||||
the layout.
|
||||
</p>
|
||||
<DocsExample href="components/toast#custom-content">
|
||||
<CToast autohide={false} className="align-items-center" visible={true}>
|
||||
<div className="d-flex">
|
||||
<CToastBody>Hello, world! This is a toast message.</CToastBody>
|
||||
<CToastClose className="me-2 m-auto" />
|
||||
</div>
|
||||
</CToast>
|
||||
</DocsExample>
|
||||
<p className="text-medium-emphasis small">
|
||||
Alternatively, you can also add additional controls and components to toasts.
|
||||
</p>
|
||||
<DocsExample href="components/toast#custom-content">
|
||||
<CToast autohide={false} visible={true}>
|
||||
<CToastBody>
|
||||
Hello, world! This is a toast message.
|
||||
<div className="mt-2 pt-2 border-top">
|
||||
<CButton type="button" color="primary" size="sm">
|
||||
Take action
|
||||
</CButton>
|
||||
<CToastClose component={CButton} color="secondary" size="sm" className="ms-1">
|
||||
Close
|
||||
</CToastClose>
|
||||
</div>
|
||||
</CToastBody>
|
||||
</CToast>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Toast</strong> <small>Custom content</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Building on the above example, you can create different toast color schemes with our{' '}
|
||||
<a href="https://coreui.io/docs/4.0/utilities/colors">color</a> and{' '}
|
||||
<a href="https://coreui.io/docs/4.0//utilities/background">background</a> utilities.
|
||||
Here we've set <code>color="primary"</code> and added{' '}
|
||||
<code>.text-white</code> class to the <code><Ctoast></code>, and then set{' '}
|
||||
<code>white</code> property to our close button. For a crisp edge, we remove the
|
||||
default border with <code>.border-0</code>.
|
||||
</p>
|
||||
<DocsExample href="components/toast#color-schemes">
|
||||
<CToast
|
||||
autohide={false}
|
||||
color="primary"
|
||||
className="text-white align-items-center"
|
||||
visible={true}
|
||||
>
|
||||
<div className="d-flex">
|
||||
<CToastBody>Hello, world! This is a toast message.</CToastBody>
|
||||
<CToastClose className="me-2 m-auto" white />
|
||||
</div>
|
||||
</CToast>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Toasts
|
||||
@ -19,24 +19,29 @@ import Swal from 'sweetalert2'
|
||||
import { useHistory } from 'react-router-dom'
|
||||
|
||||
const Register = () => {
|
||||
const { token } = isAutheticated()
|
||||
const [password, setPassword] = useState({
|
||||
oldPassword: "",
|
||||
newPassword: "",
|
||||
cpassword: ''
|
||||
});
|
||||
const [oldPassword, setOldPassword] = useState();
|
||||
const [newPassword, setNewPassword] = useState();
|
||||
const [confirmPassword, setConfirmPassword] = useState();
|
||||
const history = useHistory();
|
||||
const handleChange = (e) => (event) => {
|
||||
setPassword({ ...password, [e]: event.target.value });
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (password.cpassword !== password.newPassword) {
|
||||
let res = await axios.put('/owner/changePassword', password, {
|
||||
const token = localStorage.getItem("authToken")
|
||||
//console.log(token)
|
||||
if (newPassword == confirmPassword) {
|
||||
let res = await axios.put('/api/user/update/password',
|
||||
{
|
||||
oldPassword
|
||||
, newPassword,
|
||||
confirmPassword
|
||||
}, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`
|
||||
Authorization: `Bearer ${token}`,
|
||||
}
|
||||
})
|
||||
if (res.statusText === 'OK') {
|
||||
console.log(res)
|
||||
if (res) {
|
||||
Swal.fire({
|
||||
title: 'Done',
|
||||
text: 'Password Changed',
|
||||
@ -45,7 +50,7 @@ const Register = () => {
|
||||
confirmButtonColor: '#303c54',
|
||||
iconColor: '#303c54'
|
||||
}).then(() => {
|
||||
history.push('/profile')
|
||||
history.push('/dashboard')
|
||||
});
|
||||
}
|
||||
|
||||
@ -56,26 +61,20 @@ const Register = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-light min-vh-50 d-flex flex-row align-items-flex-start">
|
||||
<div className="bg-light min-vh-70 d-flex flex-row align-items-flex-start">
|
||||
<CContainer>
|
||||
<CRow className="justify-content-center">
|
||||
<CCol md={9} lg={7} xl={6}>
|
||||
<CCol md={15} lg={20} xl={16}>
|
||||
<CCard className="mx-4">
|
||||
<CCardBody className="p-4">
|
||||
<CCardBody className="p-1">
|
||||
<CForm>
|
||||
<h1>Change Password</h1>
|
||||
{/* <p className="text-medium-emphasis">Create your account</p> */}
|
||||
{/* <CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormInput placeholder="Username" autoComplete="username" />
|
||||
</CInputGroup> */}
|
||||
<h2 className="mb-3">Change Password</h2>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLockLocked} />
|
||||
</CInputGroupText>
|
||||
<CFormInput placeholder="Old Password" autoComplete="email" onChange={handleChange('oldPassword')} />
|
||||
<CFormInput placeholder="Old Password" autoComplete="email" onChange={(e) => setOldPassword(e.target.value)} />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
@ -84,8 +83,8 @@ const Register = () => {
|
||||
<CFormInput
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
autoComplete="new-password"
|
||||
onChange={handleChange('newPassword')}
|
||||
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-4">
|
||||
@ -95,12 +94,11 @@ const Register = () => {
|
||||
<CFormInput
|
||||
type="password"
|
||||
placeholder="Confirm password"
|
||||
autoComplete="new-password"
|
||||
onChange={handleChange('cPassword')}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<div className="d-grid">
|
||||
<CButton color="success" onClick={() => handleSubmit()}>Submit</CButton>
|
||||
<CButton color="success" onClick={handleSubmit}>Submit</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
@ -1,91 +0,0 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import React, { useEffect, useState, createRef } from 'react'
|
||||
import classNames from 'classnames'
|
||||
import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react'
|
||||
import { rgbToHex } from '@coreui/utils'
|
||||
import { DocsLink } from 'src/components'
|
||||
|
||||
const ThemeView = () => {
|
||||
const [color, setColor] = useState('rgb(255, 255, 255)')
|
||||
const ref = createRef()
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current.parentNode.firstChild
|
||||
const varColor = window.getComputedStyle(el).getPropertyValue('background-color')
|
||||
setColor(varColor)
|
||||
}, [ref])
|
||||
|
||||
return (
|
||||
<table className="table w-100" ref={ref}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="text-medium-emphasis">HEX:</td>
|
||||
<td className="font-weight-bold">{rgbToHex(color)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-medium-emphasis">RGB:</td>
|
||||
<td className="font-weight-bold">{color}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
}
|
||||
|
||||
const ThemeColor = ({ className, children }) => {
|
||||
const classes = classNames(className, 'theme-color w-75 rounded mb-3')
|
||||
return (
|
||||
<CCol xs={12} sm={6} md={4} xl={2} className="mb-4">
|
||||
<div className={classes} style={{ paddingTop: '75%' }}></div>
|
||||
{children}
|
||||
<ThemeView />
|
||||
</CCol>
|
||||
)
|
||||
}
|
||||
|
||||
ThemeColor.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
}
|
||||
|
||||
const Colors = () => {
|
||||
return (
|
||||
<>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Theme colors
|
||||
<DocsLink href="https://coreui.io/docs/utilities/colors/" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<ThemeColor className="bg-primary">
|
||||
<h6>Brand Primary Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-secondary">
|
||||
<h6>Brand Secondary Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-success">
|
||||
<h6>Brand Success Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-danger">
|
||||
<h6>Brand Danger Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-warning">
|
||||
<h6>Brand Warning Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-info">
|
||||
<h6>Brand Info Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-light">
|
||||
<h6>Brand Light Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-dark">
|
||||
<h6>Brand Dark Color</h6>
|
||||
</ThemeColor>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Colors
|
||||
@ -1,229 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardHeader, CCardBody } from '@coreui/react'
|
||||
import { DocsLink } from 'src/components'
|
||||
|
||||
const Typography = () => {
|
||||
return (
|
||||
<>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Headings
|
||||
<DocsLink href="https://coreui.io/docs/content/typography/" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Documentation and examples for Bootstrap typography, including global settings,
|
||||
headings, body text, lists, and more.
|
||||
</p>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heading</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h1></h1></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h1">h1. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h2></h2></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h2">h2. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h3></h3></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h3">h3. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h4></h4></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h4">h4. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h5></h5></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h5">h5. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h6></h6></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h6">h6. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Headings</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
<code className="highlighter-rouge">.h1</code> through
|
||||
<code className="highlighter-rouge">.h6</code>
|
||||
classes are also available, for when you want to match the font styling of a heading but
|
||||
cannot use the associated HTML element.
|
||||
</p>
|
||||
<div className="bd-example">
|
||||
<p className="h1">h1. Bootstrap heading</p>
|
||||
<p className="h2">h2. Bootstrap heading</p>
|
||||
<p className="h3">h3. Bootstrap heading</p>
|
||||
<p className="h4">h4. Bootstrap heading</p>
|
||||
<p className="h5">h5. Bootstrap heading</p>
|
||||
<p className="h6">h6. Bootstrap heading</p>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<div className="card-header">Display headings</div>
|
||||
<div className="card-body">
|
||||
<p>
|
||||
Traditional heading elements are designed to work best in the meat of your page content.
|
||||
When you need a heading to stand out, consider using a <strong>display heading</strong>
|
||||
—a larger, slightly more opinionated heading style.
|
||||
</p>
|
||||
<div className="bd-example bd-example-type">
|
||||
<table className="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span className="display-1">Display 1</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span className="display-2">Display 2</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span className="display-3">Display 3</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span className="display-4">Display 4</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Inline text elements</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Traditional heading elements are designed to work best in the meat of your page content.
|
||||
When you need a heading to stand out, consider using a <strong>display heading</strong>
|
||||
—a larger, slightly more opinionated heading style.
|
||||
</p>
|
||||
<div className="bd-example">
|
||||
<p>
|
||||
You can use the mark tag to <mark>highlight</mark> text.
|
||||
</p>
|
||||
<p>
|
||||
<del>This line of text is meant to be treated as deleted text.</del>
|
||||
</p>
|
||||
<p>
|
||||
<s>This line of text is meant to be treated as no longer accurate.</s>
|
||||
</p>
|
||||
<p>
|
||||
<ins>This line of text is meant to be treated as an addition to the document.</ins>
|
||||
</p>
|
||||
<p>
|
||||
<u>This line of text will render as underlined</u>
|
||||
</p>
|
||||
<p>
|
||||
<small>This line of text is meant to be treated as fine print.</small>
|
||||
</p>
|
||||
<p>
|
||||
<strong>This line rendered as bold text.</strong>
|
||||
</p>
|
||||
<p>
|
||||
<em>This line rendered as italicized text.</em>
|
||||
</p>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Description list alignment</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Align terms and descriptions horizontally by using our grid system’s predefined classes
|
||||
(or semantic mixins). For longer terms, you can optionally add a{' '}
|
||||
<code className="highlighter-rouge">.text-truncate</code> class to truncate the text
|
||||
with an ellipsis.
|
||||
</p>
|
||||
<div className="bd-example">
|
||||
<dl className="row">
|
||||
<dt className="col-sm-3">Description lists</dt>
|
||||
<dd className="col-sm-9">A description list is perfect for defining terms.</dd>
|
||||
|
||||
<dt className="col-sm-3">Euismod</dt>
|
||||
<dd className="col-sm-9">
|
||||
<p>
|
||||
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
|
||||
</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
||||
</dd>
|
||||
|
||||
<dt className="col-sm-3">Malesuada porta</dt>
|
||||
<dd className="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
|
||||
<dt className="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd className="col-sm-9">
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
|
||||
fermentum massa justo sit amet risus.
|
||||
</dd>
|
||||
|
||||
<dt className="col-sm-3">Nesting</dt>
|
||||
<dd className="col-sm-9">
|
||||
<dl className="row">
|
||||
<dt className="col-sm-4">Nested definition list</dt>
|
||||
<dd className="col-sm-8">
|
||||
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
|
||||
</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Typography
|
||||
Loading…
Reference in New Issue
Block a user