umi#Helmet TypeScript Examples
The following examples show how to use
umi#Helmet.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From smart-background with MIT License | 4 votes |
|
Index: React.FunctionComponent<IProps> = () => {
const [collapsed, setCollapsed] = useState(false);
const onCtrlB = () => {
setCollapsed(!collapsed);
};
console.log('packageInfo',packageInfo)
return (
<>
<Helmet>
<meta charSet="utf-8" />
<title>
Smart Background —— An React Component Automatically generate the
background
</title>
<link rel="canonical" href={packageInfo.homePageUrl} />
<link rel="shortcut icon" type="image/x-icon" href="/assets/logo.png" />
</Helmet>
<div className="App">
<a
className="github"
href={packageInfo.homePageUrl}
target="_blank"
></a>
<Background
style={{ width: '100%', height: '500px' }}
underlayColor="#0252D9"
symbolsStyle={{
color: '#000',
opacity: '0.3',
}}
animation={{ type: 'top', speed: 5 }}
gap={20}
symbols={icons}
>
<a
className="github"
href={packageInfo.homePageUrl}
style={{
backgroundImage: `url(https://img.shields.io/github/stars/yuanguandong/${packageInfo.packageName}?style=social)`,
}}
target="_blank"
></a>
</Background>
<div className="wrap">
<div className="alignCenter">
<div className="">
{/* <img className="logoImage" src={Logo} alt="react-keyevent" /> */}
<div className="logo" style={{ color: '#fff' }}>
{packageInfo.symbol}
</div>
<span className="name" style={{ color: '#fff' }}>
Smart Background
</span>
</div>
</div>
<Intro />
<div className="container">
<Background
underlayColor="#f00"
animation={{ type: 'bottom', speed: 5 }}
>
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
}}
>
<FaLaugh style={{ color: '#fff', fontSize: 120 }} />
<h1 style={{ color: '#fff', fontSize: 36, fontWeight: 'bold' }}>
JUST DO IT
</h1>
</div>
</Background>
</div>
{/* <Title level={2}>Easy To Use 容易使用</Title> */}
<Paragraph>默认以圆点作为符号</Paragraph>
<Code content={Code0} />
<Title level={2}>Animation 动画</Title>
<Paragraph>支持四个方向的滚动循环动画，可以控制速度</Paragraph>
<Paragraph>GPU rendering, Does not occupy the js process</Paragraph>
<Paragraph>GPU 渲染, 动画不占用javascript线程</Paragraph>
<div className="container">
<Background
underlayImage="linear-gradient(to right, #434343 0%, black 100%)"
symbolsStyle={{ color: 'rgba(255,255,255,0.8)' }}
symbolSize={20}
gap={20}
animation={{ type: 'right', speed: 5 }}
rotate={45}
symbols={[
'乾',
'坤',
'震',
'巽',
'坎',
'离',
'艮',
'兑',
'天',
'地',
'雷',
'风',
'水',
'火',
'山',
'泽',
]}
>
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
fontWeight: 'bold',
}}
>
<FaYinYang style={{ color: '#fff', fontSize: 120 }} />
<h1 style={{ color: '#fff', fontSize: 36 }}>乾坤</h1>
</div>
</Background>
</div>
<Code content={Code1} />
<Title level={2}>Curtain 幕布</Title>
<Paragraph>使用适当的实现可以很方便的实现一个图片幕布墙</Paragraph>
<div className="container">
<Background
symbolsStyle={{ opacity: 1 }}
symbolSize={100}
gap={0}
symbols={[
...images.map((img) => (
<div
style={{
width: '100%',
height: '100%',
backgroundSize: 'cover',
backgroundImage: `url(${img})`,
transform: 'scale(1.2)',
}}
/>
)),
]}
animation={{ type: 'top', speed: 5 }}
>
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
background: 'rgba(0,0,0,0.5)',
fontSize: 120,
}}
>
?
<h1 style={{ color: '#fff', fontSize: 36, fontWeight: 'bold' }}>
Nice Image
</h1>
</div>
</Background>
</div>
<Code content={Code2} />
<Title level={2}>Exact 精确模式</Title>
<Paragraph>使用精确模式，可以让元素固定在某一位置</Paragraph>
<div className="container">
<Background
symbolsStyle={{ opacity: 1 }}
exact={true}
symbols={[
...dots.map((dot) => (
<div
style={{
position: 'absolute',
width: dot.size,
height: dot.size,
borderRadius: dot.borderRadius,
background: dot.background,
top: dot.y,
left: dot.x,
}}
/>
)),
]}
>
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
fontSize: 120,
}}
>
<FaApple />
<h1 style={{ color: '#000', fontSize: 36, fontWeight: 'bold' }}>
Apple
</h1>
</div>
</Background>
</div>
<Code content={Code3} />
<Title level={2}>Random 随机模式</Title>
<Paragraph>使用随机模式，可以让元素位置随机显示</Paragraph>
<div className="container">
<Background
symbols={icons1}
random={{ fontSizeRange: [60, 90] }}
rotate={45}
underlayImage="linear-gradient(to right, #ff0844 0%, #ffb199 100%)"
>
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
fontSize: 120,
}}
>
<FaApple style={{ color: '#fff' }} />
<h1 style={{ color: '#fff', fontSize: 36, fontWeight: 'bold' }}>
Apple
</h1>
</div>
</Background>
</div>
<Code content={Code4} />
<Title level={2}>Why 为什么？</Title>
在开发过程中，我们经常会遇到使用背景的地方，比如登录页面，用户信息页面，封面图……
寻找契合业务主题的背景十分耗费精力，总觉得做的背景不合适，如果直接用图片呢，逻辑是比较简单，但寻找到一张契合业务主题的图片也不是那么容易，所以想到用符号生成幕布一样的背景，从这个出发点做了这个组件，滚动的图片墙可能这个需求比较常见，用SmartBackground可以很快速的实现，希望可以帮到您，别忘了star哟
<Title level={2}>Props</Title>
<Api />
<Title level={2}>Tip 注意</Title>
Background的高度默认继承父级元素
如果Background有children，需要给Background的父级元素添加position:relative属性
<Footer />
</div>
</div>
</>
);
}
