0.8.1 • Published 4 years ago
@smartgear/edison v0.8.1
@smartgear/edison
SmartGear Edison Components and Material-UI Theme.
Install
npm install --save @smartgear/edison
Usage
Bootstrapped Application
import React from 'react';
import { ThemeProvider, makeStyles } from '@smartgear/edison';
import { SmartgearIcons } from '@smartgear/icons';
import {
CssBaseline,
Card,
CardActions,
Button,
CardContent,
Typography,
CardHeader,
Avatar,
} from '@material-ui/core';
const App: React.FC = () => {
// By default, two themes are registerd:
// "Siemens (Light)" and "Siemens (Dark)"
const themeName = 'Siemens (Light)'
return (
<ThemeProvider theme="Siemens (Light)">
<AppContent />
</ThemeProvider>
);
}
const useStyles = makeStyles(theme => ({
root: {
left: 0,
right: 0,
marginTop: theme.spacing(10),
marginBottom: theme.spacing(10),
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: '800px',
maxHeight: '800px',
},
}));
const AppContent: React.FC = () => {
const classes = useStyles();
return (
<div className={classes.root}>
<CssBaseline />
<Card>
<CardHeader
title="SmartGear Edison Theme"
avatar={
<Avatar>
<SmartgearIcons.Elevation />
</Avatar>
}
>
</CardHeader>
<CardContent>
<Typography variant='body1'>This is a card</Typography>
</CardContent>
<CardActions>
<Button color='secondary' variant='contained'>Secondary</Button>
<Button color='primary' variant='outlined'>Primary</Button>
</CardActions>
</Card>
</div>
)
}
export default App;
Example Theme Switcher
import {
edisonThemeCreatorFactory,
SiemensBaseColors,
ThemeProvider,
getRegisteredThemeNames,
} from '@smartgear/edison'
import { Select, MenuItem, Typography } from '@material-ui/core';
import { useEdisonTheme } from '../src/hooks/useCustomTheme';
import { useLocalThemeName } from '../src/hooks/useLocalThemeName';
// The name of the theme you want to register
const myCustomThemeName = 'My Custom Theme Name';
// the edison theme creator factory generates the theme and
// then registers it into the list of supported themes.
// It can now be called
edisonThemeCreatorFactory(myCustomThemeName, {
palette: {
primary: {
main: SiemensBaseColors.Accent.BlueDark,
},
secondary: {
main: SiemensBaseColors.Accent.RedLight,
},
text: {
primary: '#F4F2E1',
},
background: {
default: '#ccd6db',
paper: '#495359',
},
type: 'dark',
},
})
const ThemeSelector: React.FC = () => {
const themeNames = getRegisteredThemeNames();
const [themeName, setThemeName] = useLocalThemeName();
const [theme] = useEdisonTheme();
const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
setThemeName(event.target.value as string);
};
return (
<div>
<Typography>
The current themes primary color is {theme.palette.primary.main}
</Typography>
<Select
value={themeName}
onChange={handleChange}
>
{
themeNames.map(name => (
<MenuItem key={name} value={name}>{name}</MenuItem>
))
}
</Select>
</div>
)
}
const App: React.FC = () => {
return (
<ThemeProvider theme={myCustomThemeName}>
<ThemeSelector />
</ThemeProvider>
)
}
export default App;
License
SEE LICENSE IN LICENSE © Siemens 2019
0.8.1
4 years ago
0.8.0
4 years ago
0.7.9
4 years ago
0.7.6
4 years ago
0.7.5
4 years ago
0.7.8
4 years ago
0.7.7
4 years ago
0.7.4
4 years ago
0.7.3
4 years ago
0.7.2
4 years ago
0.7.1
4 years ago
0.7.0
4 years ago
0.6.0
4 years ago
0.5.7
4 years ago
0.5.6
4 years ago
0.5.4
4 years ago
0.5.5
4 years ago
0.5.3
4 years ago
0.5.0
4 years ago
0.5.2
4 years ago
0.5.1
4 years ago
0.4.2
4 years ago
0.4.1
4 years ago
0.4.0
4 years ago
0.3.1
4 years ago
0.3.0
5 years ago
0.2.7
5 years ago
0.2.7-alpha.1
5 years ago
0.2.7-alpha.0
5 years ago
0.2.6
5 years ago
0.2.5
5 years ago
0.2.4
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago