响应式溢出选项卡

Question

如何实现在react的移动版本的标签开始和结束添加梯度(如在照片中)?附加的选项卡通过选项卡标签悬垂上的深色到浅色渐变来暗示。这种颜色渐变为用户提供了一个视觉信号，即水平滑动到滚动交互将显示额外的选项卡。输入图片描述

Answer 1

我想你说的react的移动版本是指react native。如果是这种情况，并且您正在使用expo，则可以使用expo的线性梯度(https://docs.expo.dev/versions/latest/sdk/linear-gradient/)，并在选项卡行的右侧绝对放置一个梯度，以获得所需的效果。如果你只是想要一个移动网页显示，你可以使用常规的div并将背景色设置为线性渐变。