Paginator - active page

Hello, sorry for the noob question, but there must be a simple way to highlight an active site, right? :slight_smile:

image

Hey @Cichy ,
you need to add an “active” state to the Text, then select this state and add your style.

Create the active state on top of the sidepanel (the pencil)
Capture

Select it, and add your style. Style under this state will have a green dot.
Capture2

3 Likes

Hello Aurelie, thank you :slight_smile: Is there any tutorial on states? What other states can be added?

My paginator is at the bottom of the list. Is there a simple way to make the next page open at the top of the list?

Hi @Cichy!

We’re working on adding states to the product. In the meantime, documentation is a little bit limited but you can use the hover state. Here’s a tutorial on how you might use it.

Re the Paginator, here’s how you could do it:

Step 1 – add a CSS id to the container where you want it to scroll back to

In the example below, we want to scroll back to the top of the article on the page:

Step 2 – add a workflow on the Paginator that triggers On click

with the following custom code in a Custom JavaScript action:

const target = document.getElementById("article");

target.scrollIntoView({behavior: "smooth",block:"start",inline:"nearest"});

You can replace “article” by any other string of course. Just make sure it matches the CSS id you chose in step 1 :slight_smile:

1 Like

Well, it works very well. Thank you Joyce!

1 Like

Hi @aurelie @Joyce , following this question, do you have the list of the supported states we can add this way ?

Hi Maxence :wave:

Not really. At the moment the hover state is the only one that’s 100% reliable. We’ve been having issues with the active state mentioned above recently.

Making more standard states available (like active link and focus) are one of the current priorities for the tech team but we don’t have a clear timeline yet on when those states will be available in the product.

Was there a specific use case you were trying to set up?

1 Like

Thanks for your answer :slight_smile:
Yes I wanted to integrate an active state but I was also wondering about other possibilities since Aurelie’s screen has 5 states on her picture above

2 Likes