mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-10 09:03:57 +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
65 lines
1.5 KiB
TypeScript
65 lines
1.5 KiB
TypeScript
import React from 'react'
|
|
import { Spacer, Code, useTheme } from 'components'
|
|
import VirtualAnchor from 'lib/components/anchor'
|
|
import { useConfigs } from 'lib/config-context'
|
|
|
|
export interface AttributesTitleProps {
|
|
alias?: string
|
|
}
|
|
|
|
const getAlias = (isChinese: boolean, alias?: string) => {
|
|
if (!alias) return null
|
|
return (
|
|
<small>
|
|
<span>[</span>
|
|
{isChinese ? '别名' : 'alias'}: <Code>{alias}</Code>
|
|
<span>]</span>
|
|
</small>
|
|
)
|
|
}
|
|
|
|
const AttributesTitle: React.FC<
|
|
React.PropsWithChildren<AttributesTitleProps>
|
|
> = React.memo(({ children, alias }) => {
|
|
const theme = useTheme()
|
|
const { isChinese } = useConfigs()
|
|
|
|
return (
|
|
<>
|
|
<h4 className="title">
|
|
<Code>
|
|
<VirtualAnchor pure>{children}</VirtualAnchor>
|
|
</Code>
|
|
{getAlias(!!isChinese, alias)}
|
|
</h4>
|
|
<Spacer h={0.1} />
|
|
|
|
<style jsx>{`
|
|
h4 {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 2rem;
|
|
padding-left: ${theme.layout.gapQuarter};
|
|
padding-right: ${theme.layout.gapHalf};
|
|
background-color: ${theme.palette.accents_1};
|
|
border-radius: ${theme.layout.radius};
|
|
}
|
|
|
|
h4 :global(small) {
|
|
font-size: 0.65em;
|
|
padding-left: 0.65rem;
|
|
color: ${theme.palette.accents_4};
|
|
align-self: flex-end;
|
|
line-height: 1.6rem;
|
|
}
|
|
|
|
h4 :global(span) {
|
|
color: ${theme.palette.accents_6};
|
|
}
|
|
`}</style>
|
|
</>
|
|
)
|
|
})
|
|
|
|
export default AttributesTitle
|