在这篇文章中，我将显示Avatar component just built on previous post的用例。
网格
我们的目标是构建一个网格组件，该组件将带有一些其他文本信息的头像，然后在后台添加一些很酷的视频播放。为了实现这一目标，将执行以下步骤：
- 创建一个将使用Avatar组件的头像卡组件，然后使用2个文本字段，持有名称和角色信息。
- 将几个头像卡组件放在网格中。
- 添加一个视频，该视频将在页面背景中在页面背景中很好地播放。
虽然在纸上似乎很正常，但html/css的编码是有些并发症，因为我无法在任何头像父母上使用任何背景来产生所需的效果。
在编码Web组件时，我尝试最大化HTML/CSS代码，但有时JS是实现某些功能障碍的最干净，最简单的方法。我正在寻找创建一个集中物品的网格组件（就像CSS网格合理性：中心属性一样），但是在尝试仅尝试使用CSS之后，请记住我们需要使网格响应且灵活（网格组件）不知道孩子的元素大小）我意识到JS将是最好的选择。再次，我喜欢将代码保持尽可能可读和清洁，其中包括CSS代码（这是使用形状剪切所有外部内容的rathen，可以创建新形状 - 例如一个装有六角形的正方形 - 能够管理它的纵横比需要相关性，因为面具容器可以水平地生长尽可能多，而不会影响形状的纵横比，因此我们不需要任何额外的空侧元素来获得相同的元素增长效果），因此如果CSS变得过于复杂，我倾向于重新考虑实施设计，但是当然，这只是个人编码样式的选择。
因此，为了以中心方式进行分类，我创建了以下组件（用react ts制成）。以下是代码：
const SideGrowingGrid: React.FC<SideGrowingGridProps> = ({ coverColor = 'white', children }): ReactElement => {
const [gridRef, { width }] = useElementSize();
const [itemRef, { width: iWidth }] = useElementSize();
const childs = ( (children as JSX.Element[]).map ? children : [(children as JSX.Element)] ) as JSX.Element[];
const itemsPerRow : number = iWidth === 0 ? childs.length : iWidth > width ? 1 : Math.floor(width / iWidth);
return (
<div className='sgg-container'
ref={gridRef}>
{
([...Array(Math.ceil(childs.length / itemsPerRow))]).map((e, i) => (
<div className='sgg-row' key={i}>
<div style={{backgroundColor: coverColor, flexGrow: 1}}></div>
{
childs.slice(i * itemsPerRow, i * itemsPerRow + itemsPerRow).map((child, j) => (
<div key={j} ref={(i === 0 && j === 0) ? itemRef : null}>
{child}
</div>
))
}
<div style={{backgroundColor: coverColor, flexGrow: 1}}></div>
</div>
))
}
</div>
);
}
组件非常简单：
- 使用自定义挂钩获得网格大小和网格项目的大小（注意：假设所有项目的大小都相同）。
- 计算每个网格行的项目数，以后创建相应包装此类孩子的行元素。
- 在开始的开始和每行的末端添加空元素，并使用其作为组件属性传递的任何颜色覆盖网格远端。
就是这样，我们已经准备好了网格组件！尽管如此，如果您对像CSS网格这样的物品进行排序良好 - 周围的空间确实可以很容易地使用CSS实现它。您可以检查下面的笔实现并进行播放。
想象力是无限的
现在我们拥有网格组件，我们只需要添加一个酷的背景即可获得大部分。在公司的网站中，我们使用了一些微妙的（动画梯度和涂鸦背景），但是对于此用例，我添加了一个视频，访问者可以轻松地告诉所有头像都在共享相同的背景。
您可以查看完整的实现here
，在下面的链接中，您可以检查实时结果：
< UI Challenge - Elevate CSS masking techniques - Pt1
谢谢
就是这样，希望您发现这篇文章有用，如果您有一些很酷的用例想法，请毫不犹豫地分享它们！如果您想连接，可以在LinkedIn
中找到我