You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
3.0 KiB
111 lines
3.0 KiB
An entire AdminJS interface is built with 2 main packages:
|
|
|
|
- [styled-components]{@link https://styled-components.com/} backed by
|
|
- [styled-system]{@link https://styled-system.com/}.
|
|
|
|
The core of the style information is the {@link Theme}. It is base on the
|
|
[Theme Specification]{@link https://styled-system.com/theme-specification/} and
|
|
it is used by almost all the components provided by AdminJS.
|
|
|
|
The structure of the Theme is as follows:
|
|
|
|
```javascript
|
|
const theme = {
|
|
breakpoints,
|
|
colors,
|
|
fontSizes,
|
|
fontWeights,
|
|
lineHeights,
|
|
shadows,
|
|
sizes,
|
|
space,
|
|
}
|
|
```
|
|
|
|
Each element controls a different kind of props passed to the Design System Components.
|
|
|
|
|
|
|
|
So let's say you would like to create a box with the same background as our
|
|
`primary100` color. This is one way of achieving that:
|
|
|
|
```javascript
|
|
import styled from 'styled-components'
|
|
import { Box } from '@adminjs/design-system'
|
|
|
|
const MyBlueBox = styled(Box)`
|
|
background: ${({ theme }) => theme.colors.primary100};
|
|
// other css styles you want to override.
|
|
`
|
|
```
|
|
|
|
> There is a helper function {@link themeGet} which can be used to fetch the data from Theme.
|
|
|
|
But, since AdminJS uses [styled-system]{@link https://styled-system.com/}, you also can achieve
|
|
a similar result by passing a `bg` Prop to the [Box Component]{@link Box},
|
|
everything because Box supports all the {@link ColorProps}.
|
|
|
|
```javascript
|
|
import { Box } from '@adminjs/design-system'
|
|
|
|
const ComponentWhereIWantToUseBlueBox = () => (
|
|
<Box bg="primary100">
|
|
...
|
|
</Box>
|
|
)
|
|
```
|
|
|
|
The last way of accessing the theme is to use withTheme HOC provided by
|
|
[styled-components]{@link https://styled-components.com/}
|
|
|
|
```javascript
|
|
import { withTheme } from 'styled-components'
|
|
|
|
const MyComponent = (props) => {
|
|
const { theme } = props
|
|
// theme.colors.primary100
|
|
}
|
|
|
|
export default withTheme(MyComponent)
|
|
```
|
|
|
|
{@link ColorProps} is only one of the extensions we provided. Take a look at the documentation
|
|
below to see all possible options,
|
|
|
|
|
|
### Responsive styles
|
|
|
|
You can pass an array instead of value to props to define how behaves in in different breakpoints.
|
|
|
|
so passing `[1, 1/2, 0.4]` as `width` will width for a following breakpoints:
|
|
|
|
- <= 577px: 100%
|
|
- 578px-769px: 50%
|
|
- \>= 769px: 40%
|
|
|
|
Combined with {@Box} and {@FlexProps} creates a tool to build entire layouts.
|
|
|
|
Take a look at this example:
|
|
|
|
```javascript
|
|
import { Box } from '@adminjs/design-system'
|
|
|
|
const ComponentWhereIWantToUseResponsiveStyle = () => (
|
|
<Box flex flexDirection="column">
|
|
<Box width={[1, 1/2, 1/3]}>Sidebar</Box>
|
|
<Box width={[1, 1/2, 2/3]}>Content</Box>
|
|
</Box>
|
|
)
|
|
```
|
|
|
|
Above we defined that the Sidebar box should have 100% width until the viewport reaches the first
|
|
breakpoint, then 50% (until the next breakpoint) and then 1/3rd of the page for the remaining 2
|
|
breakpoints.
|
|
|
|
You can read more about responsive features on `styled-system`
|
|
{@link https://styled-system.com/responsive-styles}
|
|
|
|
<style>
|
|
.shadow-div { display: block; width: 80px; height: 80px;}
|
|
.space-box { display: inline-block; height: 20px; background: #4268F6; vertical-align: middle;}
|
|
</style> |