-
-
Save adrianhajdin/7d0eea1cbab4ab21a69dc8c2faf9b831 to your computer and use it in GitHub Desktop.
@import url('https://cdn.syncfusion.com/ej2/material.css'); | |
.sidebar { | |
box-shadow: rgb(113 122 131 / 11%) 0px 7px 30px 0px; | |
} | |
.nav-item, | |
.navbar { | |
z-index: 10000; | |
} | |
@media screen and (max-width:800px) { | |
.sidebar{ | |
z-index: 10000000; | |
} | |
} | |
.e-dlg-center-center, .e-quick-popup-wrapper.e-device{ | |
z-index: 1000000 !important; | |
} | |
::-webkit-scrollbar { | |
width: 6px; | |
} | |
::-webkit-scrollbar-thumb { | |
background-color: rgb(216, 216, 216); | |
border-radius: 40px; | |
} | |
::-webkit-scrollbar-track { | |
background-color: transparent; | |
} | |
/* color-picker style */ | |
#preview { | |
background: transparent | |
url('https://ej2.syncfusion.com/react/demos/src/color-picker/images/pen.png') | |
no-repeat; | |
display: inline-block; | |
height: 80px; | |
margin: 10px 0; | |
min-width: 300px; | |
max-width: 600px; | |
background-color: #008000; | |
} | |
.e-input-group:not(.e-float-icon-left), .e-input-group.e-success:not(.e-float-icon-left), .e-input-group.e-warning:not(.e-float-icon-left), .e-input-group.e-error:not(.e-float-icon-left), .e-input-group.e-control-wrapper:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){ | |
border: none; | |
} |
// craco.config.js | |
module.exports = { | |
style: { | |
postcss: { | |
plugins: [ | |
require('tailwindcss'), | |
require('autoprefixer'), | |
], | |
}, | |
}, | |
}; |
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap'); | |
body { | |
margin: 0; | |
padding:0; | |
font-family: "Open Sans", sans-serif; | |
} | |
@tailwind base; | |
@tailwind components; | |
@tailwind utilities; |
export { default as Button } from './Button'; | |
export { default as ThemeSettings } from './ThemeSettings'; | |
export { default as Sidebar } from './Sidebar'; | |
export { default as Navbar } from './Navbar'; | |
export { default as Footer } from './Footer'; | |
export { default as Cart } from './Cart'; | |
export { default as Chat } from './Chat'; | |
export { default as Notification } from './Notification'; | |
export { default as UserProfile } from './UserProfile'; | |
export { default as SparkLine } from './Charts/SparkLine'; | |
export { default as LineChart } from './Charts/LineChart'; | |
export { default as Stacked } from './Charts/Stacked'; | |
export { default as Pie } from './Charts/Pie'; | |
export { default as ChartsHeader } from './ChartsHeader'; | |
export { default as Header } from './Header'; | |
export { default as Ecommerce } from './Ecommerce'; | |
export { default as Kanban } from './Kanban'; | |
export { default as Orders } from './Orders'; | |
export { default as Employees } from './Employees'; | |
export { default as Editor } from './Editor'; | |
export { default as Customers } from './Customers'; | |
export { default as ColorPicker } from './ColorPicker'; | |
export { default as Calendar } from './Calendar'; | |
export { default as Area } from './Charts/Area'; | |
export { default as Bar } from './Charts/Bar'; | |
export { default as ColorMapping } from './Charts/ColorMapping'; | |
export { default as Financial } from './Charts/Financial'; | |
export { default as Line } from './Charts/Line'; | |
export { default as Pie } from './Charts/Pie'; | |
export { default as Pyramid } from './Charts/Pyramid'; | |
export { default as Stacked } from './Charts/Stacked'; | |
{ | |
"name": "project_syncfusion_dashboard", | |
"version": "0.1.0", | |
"private": true, | |
"dependencies": { | |
"@syncfusion/ej2": "^19.4.48", | |
"@syncfusion/ej2-react-calendars": "^19.4.48", | |
"@syncfusion/ej2-react-charts": "^19.4.50", | |
"@syncfusion/ej2-react-dropdowns": "^19.4.52", | |
"@syncfusion/ej2-react-grids": "^19.4.50", | |
"@syncfusion/ej2-react-inputs": "^19.4.52", | |
"@syncfusion/ej2-react-kanban": "^19.4.48", | |
"@syncfusion/ej2-react-popups": "^19.4.52", | |
"@syncfusion/ej2-react-richtexteditor": "^19.4.50", | |
"@syncfusion/ej2-react-schedule": "^19.4.50", | |
"react": "^17.0.2", | |
"react-dom": "^17.0.2", | |
"react-icons": "^4.3.1", | |
"react-router-dom": "^6.2.1", | |
"react-scripts": "5.0.0" | |
}, | |
"scripts": { | |
"start": "react-scripts start", | |
"build": "react-scripts build", | |
"test": "react-scripts test", | |
"eject": "react-scripts eject" | |
}, | |
"browserslist": { | |
"production": [ | |
">0.2%", | |
"not dead", | |
"not op_mini all" | |
], | |
"development": [ | |
"last 1 chrome version", | |
"last 1 firefox version", | |
"last 1 safari version" | |
] | |
}, | |
"devDependencies": { | |
"autoprefixer": "^10.4.2", | |
"postcss": "^8.4.6", | |
"tailwindcss": "^3.0.19" | |
} | |
} |
import React from 'react'; | |
import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts'; | |
class SparkLine extends React.PureComponent { | |
render() { | |
const { id, height, width, color, data, type, currentColor } = this.props; | |
return ( | |
<SparklineComponent | |
id={id} | |
height={height} | |
width={width} | |
lineWidth={1} | |
valueType="Numeric" | |
fill={color} | |
border={{ color: currentColor, width: 2 }} | |
tooltipSettings={{ | |
visible: true, | |
// eslint-disable-next-line no-template-curly-in-string | |
format: '${x} : data ${yval}', | |
trackLineSettings: { | |
visible: true, | |
}, | |
}} | |
markerSettings={{ visible: ['All'], size: 2.5, fill: currentColor }} | |
dataSource={data} | |
xName="x" | |
yName="yval" | |
type={type} | |
> | |
<Inject services={[SparklineTooltip]} /> | |
</SparklineComponent> | |
); | |
} | |
} | |
export default SparkLine; |
module.exports = { | |
content: ['./src/**/*.{js,jsx,ts,tsx}'], | |
darkMode: 'class', | |
theme: { | |
fontFamily: { | |
display: ['Open Sans', 'sans-serif'], | |
body: ['Open Sans', 'sans-serif'], | |
}, | |
extend: { | |
fontSize: { | |
14: '14px', | |
}, | |
backgroundColor: { | |
'main-bg': '#FAFBFB', | |
'main-dark-bg': '#20232A', | |
'secondary-dark-bg': '#33373E', | |
'light-gray': '#F7F7F7', | |
'half-transparent': 'rgba(0, 0, 0, 0.5)', | |
}, | |
borderWidth: { | |
1: '1px', | |
}, | |
borderColor: { | |
color: 'rgba(0, 0, 0, 0.1)', | |
}, | |
width: { | |
400: '400px', | |
760: '760px', | |
780: '780px', | |
800: '800px', | |
1000: '1000px', | |
1200: '1200px', | |
1400: '1400px', | |
}, | |
height: { | |
80: '80px', | |
}, | |
minHeight: { | |
590: '590px', | |
}, | |
backgroundImage: { | |
'hero-pattern': | |
"url('https://demos.wrappixel.com/premium-admin-templates/react/flexy-react/main/static/media/welcome-bg-2x-svg.25338f53.svg')", | |
}, | |
}, | |
}, | |
plugins: [], | |
}; |
If someone is having difficulty with this, they can refer to the official documentation here:
syncfusion documentation
and this is a demo for all components : syncfusion demos
If someone is experiencing issues with their license, as this is a paid component library, they have the option to register and obtain a Free Community license. This license allows them to use it for commercial projects for Companies and individuals with less than $1 million USD in annual gross revenue, 5 or fewer developers,
and 10 or fewer total employees.
see community licence here : syncfusion communitylicense
For Tailwind issue use @import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities"; use these command instead of
@tailwind base; @tailwind components; @tailwind utilities; in index.css it works for me
please instal tailwind in your project using tailwind command in terminal
@belvpassos for recognized your import by your IDE you should first declare where are you importing from (react-icons/fi)then it will give you the recommendation of FiSettins. If that does not work then you may check your dependencies in package.json ("react-icons": "^4.3.1", Version may differ) it should be present in the package.json file . You may let me know if the problem still persist .
@Faizy-khan Same issue. The two points suggested by you,fall in place. However, problem still persists.
so what should i do in the hero-pattern image it's just a white background
same issues here
so what should i do in the hero-pattern image it's just a white background
same issues here
It's a premium image now, you can easily download a good image and replace it!! Or directly replace the URL with another image URL :)
Hi, my code is not running anything at all, wat should i do
syncfusion components are not working. How I solve this issue? please anyone help.
syncfusion components are not working. How I solve this issue? please anyone help.
What Syncfusion components did not work? Or all of them?
https://minhaskamal.github.io/DownGit...
try this link