spotlight with horizontal tab controls?

[DanielFGray]

I love the spotlight transition effects, but I wondered if it's possible to mark some individual spotlight blocks for horizontal controls with my own css?

[pomber]

Haven't tried, but it's a flex container so changing flex-direction should get you halfway there.

But I would take a look later, it's a very valid use case and I want to reduce the css required to style it.

[pomber]

Here is a quick example.

You can start with this css:

.ch-spotlight {
  flex-direction: column;
}

.ch-spotlight-tabs {
  flex-direction: row;
  gap: 12px;
  margin-right: 0px;
}

.ch-spotlight-tab {
  margin: 0;
  padding: 4px 8px;
}

.ch-spotlight-tab p {
  margin: 0;
}

.ch-spotlight-sticker {
  width: auto;
}

[DanielFGray]

Am I correct in understanding this would apply to all spotlight components? if so, that would not quite be ideal, as I only have two cases in particular where I want horizontal controls, but I want to keep all the others vertical

<CH.Spotlight horizontal> would, imo, be the ideal API for this, and then being able to style with a selector like .ch-spotlight-tabs-horizontal

Thank you for taking the time to consider this!

[pomber]

You should be able to use something like <CH.Spotlight className="horizontal"> but it isn't working right now, I need to fix it.

As a workaround, for now, you can wrap it inside a <div className="horizontal">, see it here.

[pomber]

you should be able to use <CH.Spotlight className="your-class"> in v0.6.2-next.0

[github-actions]

🚀 Issue was released in v0.6.2 🚀