use of home component in a calcite-action-bar

Question

I'm using ArcGIS JS API 4.32 and currently converting the app's widgets into components. The app includes a calcite-action-bar on the left side, and I've been successfully integrating components like the LayerList, Legend, and others. Most conversions have been straightforward, except for the Home component. Integrating the Home component into the action bar has been challenging, as it interacts directly with the map view, making it less adaptable to the component-based structure. This is the current setup.

How can I use the home component in the action bar?

@AnneFitz @JoelBennett

fdeters · Accepted Answer

@LefterisKoumis This was one of my concerns when adopting web components, too. Thankfully, the Home component follows the same pattern that many of the web components follow: You can set the "reference-element" property on the Home component to point to the "id" of the component. This will let you place the Home component wherever you want in the DOM, while still linking it to the view inside the Map component.

See this codepen for a complete example: https://codepen.io/fdeters/pen/Pwqewwa. The styling doesn't quite work how I would expect it to out of the box, but some CSS could probably get it to work right.

RRubalcava · Accepted Answer

You can add an arcgis-home { margin: 10px; } and it will place it correctly in the action bar. It's still has a button width/height that is different on hover, but aligns right.