mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-24 04:15:54 +08:00
7facec3849
* feat(scaleable): add scaleable props to each component * chore(scaleable): update the exported type * feat: apply scaleable to components chore: remove with-default test: improve testcase for scaleable chore: resolve test warning ci: upgrade nodejs to latest lts docs: fix type error in document site * docs: update documents to be compatible with scaleable chore: fix build errors * chore: remove all size-related attributes docs: improve guide document * docs: add scaleable documentation test: update snapshots chore: remove unused * feat: add scaleable to grid components * docs: improve docs * test: update snapshots * fix(grid): fix basic component props
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
import { useTheme } from 'components'
|
|
import { addColorAlpha } from 'components/utils/color'
|
|
|
|
const GridDemo: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
|
|
const theme = useTheme()
|
|
const bgColor = addColorAlpha(theme.palette.accents_2, 0.5)
|
|
return (
|
|
<div className="grid-demo">
|
|
{children}
|
|
<style jsx>{`
|
|
.grid-demo {
|
|
background: transparent;
|
|
background-image: linear-gradient(${bgColor} 1px, transparent 0),
|
|
linear-gradient(90deg, ${bgColor} 1px, transparent 0);
|
|
background-size: 15px 15px, 15px 15px, 75px 75px, 75px 75px;
|
|
border: 2px solid ${bgColor};
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
width: 500px;
|
|
height: 150px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
.grid-demo :global(> *) {
|
|
margin-bottom: 15px;
|
|
}
|
|
.grid-demo :global(> *:last-of-type) {
|
|
margin-bottom: 0;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default GridDemo
|