Is there a way to select Partial Mode on button?

I researched and I do not think it is possible, but it would be nice to do something like:

<a f-partial="/my-link" f-mode="append">Append Mode</a>
<a f-partial="/my-link" f-mode="replace">Replace Mode</a>

<a f-partial="/my-link" f-mode="append">Append Mode</a>
<a f-partial="/my-link" f-mode="replace">Replace Mode</a>

2 Replies

Deno AI Helper•5mo ago

Yes, you can specify the replacement mode for a <Partial> component in Fresh, which allows you to control how content is integrated into the active page when using partials. According to the documentation, there are three distinct merge modes you can use: - replace - Swap out the content of the existing partial (default) - prepend - Insert the new content before the existing content - append - Insert the new content after the existing content Here's an example from the documentation on how to use the mode prop with a <Partial> component:

<Partial name="cart-items" mode="append">
  {/* content to append */}
</Partial>

<Partial name="cart-items" mode="append">
  {/* content to append */}
</Partial>

However, the f-mode attribute you're referring to does not exist in the documentation. Instead, you should use the mode prop directly on the <Partial> component to specify how the content should be integrated. For buttons, the documentation mentions that the f-partial attribute is scoped to <a>, <button>, and <form> elements. This means you can use f-partial with a button, but you would still need to use the mode prop on the <Partial> component to specify the replacement mode. Here's an example of how you might use f-partial with a button, keeping in mind that you'll need to define the corresponding partial route and component:

<button f-partial="/partials/my-button-partial">Click Me</button>

<button f-partial="/partials/my-button-partial">Click Me</button>

And in your partial component, you would specify the mode:

export default function MyButtonPartial() {
  return (
    <Partial name="some-partial-name" mode="append">
      {/* content to append */}
    </Partial>
  );
}

export default function MyButtonPartial() {
  return (
    <Partial name="some-partial-name" mode="append">
      {/* content to append */}
    </Partial>
  );
}

Remember to define the partial route and component according to your application's needs. 🦕

Helpful Links: Partials | Fresh docs Fresh 1.5: Partials, client side navigation and more Styling active links | Fresh docs

tavanogui•5mo ago

Actually, the mode is indicated by <Partial that is coming, not current one. So, I just added a param at my link and my component know how to handle with.