Is there more comprehensive docs for core_components.ex?

As a beginner, I always have questions about certain implementations of components inside of core_components.ex?

For 1, it’s different for different phoenix versions.
For 2, they dont have examples for everything e.g <.input type=“search”…>.

I feel the @docs inside of core_components.ex itself is insufficient. Not sure if i’m the only one who thinks this. Please do share with me where I can find more on this :pray:

They’re just example components. If you have questions about why or how things are done it’s probably best to ask here/slack/discord.

These are updated every now and then, indeed. But that shouldn’t matter because they’re your code. They’re meant to be adjusted to your individual needs, which is the whole reason why they’re no longer in a library. If you don’t use the generators you could even drop them completely. There’s no expectation for core components to stay the way they are or the way they’re updated in newer phoenix versions.

3 Likes

I wonder if you realized/noticed that there’s docs inside the core_components.ex file? This is in the doc for the input function:

  ## Types

  This function accepts all HTML input types, considering that:

    * You may also set `type="select"` to render a `<select>` tag

    * `type="checkbox"` is used exclusively to render boolean values

    * For live file uploads, see `Phoenix.Component.live_file_input/1`

  See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
  for more information.

See especially that last line, ie. <.input type="search" ...> just creates a standard HTML <input type="search" ...> tag, which is described here in the referenced MDN doc: <input type="search"> - HTML: HyperText Markup Language | MDN

3 Likes

hmm, am I not seeing this because i’m on Phoenix 1.7.2?

I understand. But as a beginner, it would be tremendously helpful if there are guides and tutorials on how to use those in core_components as a way for me to learn about the framework. I’m sure there are many good considerations for why they were structured that way but reverse-engineering them as a beginner is tough.

Sorry, I always assume people are on the latest unless they mention they’re not. It was introduced in 1.7.3: Improve .input docs · phoenixframework/phoenix@b8fe141 · GitHub

i’m sorry but i’m a web dev goondo…do you happen to have a working example I can take a look at?

I don’t, honestly I’ve never used a search type (I don’t use a lot of the new (to me) html5 stuff). There’s a bunch of examples on the MDN page I linked to above.