I think it's more like Vue or Svelte slots. <a href="https://svelte.dev/tutorial/n

I think it can be done using children: <div class="highlight highlight-source-elix

Slots about surface HOT 5 CLOSED

surface-ui commented on July 30, 2024

Slots

from surface.

Comments (5)

joerichsen commented on July 30, 2024

First of all: Surface looks really. really great!

I was just wondering what you mean by Slots?

Is it something like this? https://daveceddia.com/pluggable-slots-in-react-components/

from surface.

mazz-seven commented on July 30, 2024

I think it's more like Vue or Svelte slots.
https://svelte.dev/tutorial/named-slots
https://vuejs.org/v2/guide/components-slots.html

from surface.

msaraiva commented on July 30, 2024

It's basically the same concept that can be found in other libs like Vue.js and Svelte, like @mazz-seven pointed out.

from surface.

joerichsen commented on July 30, 2024

OK, thanks to both of you for clarifying :-)

from surface.

saverio-kantox commented on July 30, 2024

I think it can be done using children:

defmodule SlottedComponent do
  defmodule Body do
    # it should be a normal, not a data component
  end
  defmodule Header do
    # it should be a normal, not a data component
  end

  property headers, :children, group: :Header
  property bodies, :children, group: :Body

  def render(assigns) do
    ~H"""
    <div class="container">
      <header :if={{ @headers }}>
         <div :for={{ h <- @headers }}>{{ h.inner_content.() }}</div>
      </header>
      <main :if={{ @bodies }}>
         <div :for={{ b <- @bodies }}>{{ b.inner_content.() }}</div>
      </main>
    </div>
    """
  end
end

defmodule MyView do
  def render(assigns) do
    ~H"""
    <SlottedComponent>
      <Header>Hello</Header>
      <Body>World</Body>
    </SlottedComponent>
    """
  end
end

from surface.

Slots about surface HOT 5 CLOSED

Comments (5)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent