IMPLEMENTED: Trigger offcanvas by click on standard button element

Feature Requests / Improvements
1

Hello,

I’m using the 1.8 beta and trying out the offcanvas element. However, I can’t figure out how to trigger the offcanvas element using another element than the trigger element. I want to trigger it via a standard button element. Is this possible at the moment?

2

Sure.

Use button element design as you need.

Assign class .brxe-toggle, then add attributes: aria-label=“Open” aria-expanded=“false”, data-selector=“#offcanvas_id”.

Then you should be good to go.

2 Likes
3

Thanks a lot Martin, this works a treat! Guess I was to lazy to inspect the code myself :smiley:

Hopefully this will be implemented in the same way popups can be triggered from an interaction.

4

Is it possible if can you share screenshot where exactly, put all those class and attributes?

1 Like
5

Te paso capturas de como hacerlo.

1) Añadir la clase .brxe-toggle al elemento que quires que abra el Off Canvas(Assign class .brxe-toggle)

Captura de pantalla 2023-07-26 085955
Captura de pantalla 2023-07-26 0859551920×671 88.4 KB

Como podes ver es añadir una clase al elemento que deseas que abra el offcanvas

2) Añadir los atibutos al elemento que quieres que abra el Off Canvas (add attributes: aria-label=“Open” aria-expanded=“false”, data-selector=“#offcanvas_id”.)
IMG 2

IMPORTANTE
el data-selector es el ID que tiene tu OffCanvas eso lo podes cambiar acá

IMG3

poner sin #

2 Likes
6

IMG2

Captura de pantalla 2023-07-26 090033
Captura de pantalla 2023-07-26 090033368×921 21 KB

7

IMG 3

Captura de pantalla 2023-07-26 090120
Captura de pantalla 2023-07-26 0901201920×868 163 KB

8

Hello, I would like to ask for your help, I am trying to replicate this action, but it does not work for me, I am sending screenshots, greetings

data-selector = #detalle{echo:get_the_id()}
aria-label = open
aria-expanded = false

css id = #detalle{post_id}

image
image1916×855 253 KB

9

Hi, assign an ID to your Offcanvas element and add it in the value field you see in IMG2

1 Like
10

Hey all, sorry to revive an old thread but I am tackling this now and I wonder about some improvements.

Applying the .brxe-toggle class to my buttons overrides a bunch of theme style defaults I have set for the button element. Is there a way to include the toggle functionality without being stuck re-declaring the button styling as overrides?

Ideally, we could:

  • Select TOGGLE as a Link type option from the button element content panel
  • Input the ID of the off-canvas as part of that select
  • This applies the required toggle nuts and bolts without introducing override styles

I am brand new to Bricks so if there is an easy way to scrap these overrides I’m all ears :slight_smile:

11

Hi @TomLD ,

We are currently implementing a new interaction action to Trigger the Offcanvas.
So you can apply it to any element.

Regards,
Jenn

1 Like
12

Hi @itchycode,

We can have it now. Is it different from the new action?

Screenshot
Screenshot374×809 22.2 KB

13

@HOSEIN ,

Something like A11y needs to be handled as well when toggling the offcanvas.

Creating a new Interaction action will be easier for Bricks users to setup.

Regards,
Jenn

2 Likes
14

Hi guys,

We’ve added this feature in Bricks 1.11 BETA, now available as a manual download (Bricks – Account)

Please let us know if you are still experiencing issues.

You can see the full changelog here: Bricks 1.11 Changelog – Bricks

As with any beta release, please do not use it on a production/live website. It is only meant for testing in a local or staging environment.

Best regards,
Matej

1 Like