CSS悬停和焦点状态

CSS包含允许对不同元素状态进行精确样式化的伪类. 这里有一些技巧来捕捉他们在彩色.

通过道具触发CSS状态

为互动状态, 十博体育备用网址建议将状态从组件中分离出来,以实现“纯”无状态组件和有状态组件. 然后,您可以按照您所追求的配置编写针对无状态的故事. 这对开发也很有用, 十博体育备用网址发现,您甚至不需要与组件交互就可以在故事之间切换.

MyComponent / /添加.js

出口 函数 MyComponent({ isHovered, isActive, label }) {
  返回 (
    <Button isHovered={isHovered} isActive={isActive}>
      {label}
    </按钮>
  );
}

MyComponent.默认的Props = {
  isHovered: ,
  isActive: ,
  label: '提交'
};

然后写一个触发道具的故事.

MyComponent / /添加.故事.js MyComponent |添加.故事.ts

进口 MyComponent  ".MyComponent /添加";

出口 默认的 {
  组件: MyComponent,
};

常量 Template = (arg游戏) => <MyComponent {...arg游戏}/>;

出口 常量 HoverState = Template.绑定({});
HoverState.arg游戏 = {
  isHovered: 真正的,
  label: 我:徘徊
};

出口 常量 ActiveState的 = Template.绑定({});
ActiveState的.arg游戏 = {
  isActive: 真正的,
  label: 我:活跃的
}:

CSS类名

添加一个CSS类名来镜像 :徘徊, :主动, or :专注 状态.

/*组件样式*/
MyComponent:徘徊,
MyComponent.徘徊 {
  background: 紫色的;
}

MyComponent:主动,
MyComponent.活跃的 {
  background: 绿色;
}

然后编写一个利用类名的故事.

MyComponent / /添加.故事.js MyComponent |添加.故事.ts

进口 MyComponent  ".MyComponent /添加";

出口 默认的 {
  组件: MyComponent,
};

常量 Template = (arg游戏) => <MyComponent {...arg游戏}/>;

出口 常量 HoverStatewithClass= Template.绑定({});
HoverStatewithClass.arg游戏 = {
  ...HoverState.arg游戏,
  类名称: '徘徊'
};

出口 常量 ActiveState的withClass = Template.绑定({});
ActiveState的withClass.arg游戏 = {
  ...ActiveState的.arg游戏,
  类名称: '活跃的',
};

你也可以使用JS包装器来扩展这项技术 自动添加类.

在未来

十博体育备用网址正在考虑通过使用chropter进行这种交互,并可能在未来为此添加一个薄层.

友情链接: 1 2 3 4 5 6 7 8 9 10