Transcript
Hot fire native comes with, uh, another default, uh, Strat or bridge component. It's the menu component. So basically, if you go to the example application and click on this menu example, you can click on this open menu button and you see it opens, um, uh, a native menu. And it also has an example of this overflow plus menu where you have, uh, this, uh, button on the top right corner of the screen that, uh, opens the same kind of menu. So you don't have to click on an HTML button to open the native menu. You can click on a native button to open the native menu. And, uh, let's try implementing this, uh, in, uh, rails application. So first of all, I will use the local host to run my native application and on local host on the server. I already have an application running. It's, uh, this application. So, uh, in the web application, if you go to an organization page, you have the edit button and the destroy button. And I want to open this two buttons in the native, uh, uh, actions model. How can I do this? So here I already have this, uh, uh, local host served. I go to organizations. I have the edit and destroy, and I want to serve them in this, uh, native popup. So, uh, going to this native demo repository, we can find the, uh, menu, uh, controller. I'm going to go to this, uh, menu controller into my rails application, into my stimulus, uh, controllers in the bridge folder. So here I will create a new, uh, file menu controller. I will go with the content and, uh, also for the, uh, no, actually, yeah, I use the wrong menu. Uh, here I have the bridge menu. So I need this menu content, okay, the bridge menu. And, uh, I will also cope with the overflow menu to have the icon in the top right corner. So I will go with this overflow menu here. Okay. Now, I, uh, have already previously installed, uh, uh, hot wire bridge in my input maps. So here, already have hot native bridge, and I have, uh, the stimulus control is present in my rails application and in my, uh, iOS application, again, by default in the demo application, have this menu component and overflow menu component. Now, I just need to apply it in, uh, h tm L in, uh, my page. So if I go to organizations slash show here, I have a link to edit and a link to destroy. And, uh, as a previous, I want to open them in a model. So let's have a look at how, uh, these menus are used, uh, in, uh, the example application. Let's, uh, look for menu. You have this bridge menu, HTML file. Let's, uh, try copy in the menu and display it, uh, in our page. I'll just copy it. Let's see if, uh, this menu works. I will, uh, refresh. Okay, we have, uh, a lot of, uh, H TM L but if you click on this open menu, you see it actually opens the menu. Let's click on something. Yeah, so the menu gets, uh, open and this buttons are clickable, but, uh, now they don't have any actions. Let's clean this, uh, up. And, uh, uh, just use it on the link to edit and link to destroy. So, uh, this is the button to open the menu. We will, uh, leave it. We can just clean everything up, and we'll have a link to edit and link to, uh, destroy. Um, so for the link to edit, we will need to add data, uh, bridge menu, target item. So, uh, I will say data bridge menu, target item, um, like this. And, uh, we don't need the data action, we just need this bridge menu target item. I think, um, we can remove everything else, and, uh, we will need this, uh, uh, data bridge menu target title with the title of the dropdown. So you see here, you see it's like an option. Let's name it actions. We can remove everything else. Uh, we can remove this. Okay, much, uh, cleaner. Let's see if, uh, this works. I will, uh, refresh the page. Here we have the added button. I click on open menu. And you see we have the added button. I click on the added button, and it actually pops up the edit model. So our, uh, clean up, uh, version works. Let's, uh, also add that destroy button. And the destroy button. Again, I will just add the, the bridge menu target item. Let's refresh. Okay, now clicking on open menu. You see we have edit and Destroy. I click on destroy, and, uh, we have the default behavior so we can destroy the organization or cancel. Uh, looks good. Now, uh, again, we have the duplication of Edit and Destroy here and here in theory, we could, uh, uh, wrap these elements in data controller, uh, menu, bridge menu, or we could just, uh, uh, apply a hidden, hidden class to this, uh, element. Uh, we can do it later. For now, we have applied the menu controller, but we haven't over applied the overflow menu controller. So we still want to, uh, remove this H TM L button, and we want to have a native button here. Now, to do this, we can just, uh, have a look at the example of the bridge overflow. And all we do here is we add this additional data controller, bridge overflow menu to our action button. So here we have our action button, and, uh, we will just add data controller, bridge overflow menu. And, uh, the native button is going to click on this button. Let's, uh, try, if it works, I will refresh. You see we have this native button pop up, and, uh, what this native button does, it, uh, just clicks here. So you see we have this native button that opens, uh, this actions, uh, pop up, looks well, works, uh, well. So that's how you can use, uh, alterna menu that, uh, opens with H TM L, or overflow menu that opens with a native uh, button. Thanks for watching and see you in the next one.
0