PureAdmin replaces Phoenix's generated CoreComponents module.
This page shows what's replaced, what's new, and how to handle the migration.
Resumen de la migración
Replace
import MyAppWeb.CoreComponents with use PureAdmin.Components
in your html_helpers/0 function. All replaced functions keep the same name and
similar signatures, so most templates work without changes.
| Función CoreComponents | Reemplazo de PureAdmin | Estado |
|---|---|---|
button/1 |
PureAdmin.Components.Button.button/1 |
Reemplazado |
input/1 |
PureAdmin.Components.Form.input/1
— accepts field={@form[:x]} the same way CoreComponents does; auto-renders
error help. Same treatment on textarea/1, select/1,
checkbox/1, radio/1, and form_group/1.
|
Reemplazado |
simple_form/1 |
PureAdmin.Components.Form.simple_form/1 |
Reemplazado |
modal/1 |
PureAdmin.Components.Modal.modal/1 |
Reemplazado |
table/1 |
PureAdmin.Components.Table.table/1 |
Reemplazado |
list/1 |
PureAdmin.Components.List.list/1 |
Reemplazado |
label/1 |
PureAdmin.Components.Badge.label/1 |
Reemplazado |
flash/1, flash_group/1 |
PureAdmin.Components.Flash
— see Flash Messages
|
Reemplazado |
header/1 |
Page title via @page_title in <.page_header> (layout renders it, LiveView sets it) |
No necesario |
icon/1 |
Use Font Awesome directly: <i class="fa-solid fa-..."> |
Manual |
show/1, hide/1 |
Use Phoenix.LiveView.JS.show/1 and JS.hide/1 directly (thin wrappers, not needed) |
No necesario |
translate_error/1 |
PureAdmin.Components.Form.translate_error/1 ships a plain
%{key}-interpolating default. For Gettext, point
config :keen_pure_admin, :error_formatter at your app's
translate_error/1 (see form.ex moduledoc).
|
Reemplazado |
Pasos de configuración
-
Crear proyecto sin Tailwind
mix phx.new my_app --no-tailwind
-
Añadir dependencia
{:keen_pure_admin, "~> 1.0"} -
Reemplazar la importación de CoreComponents
# In your MyAppWeb module, replace: # import MyAppWeb.CoreComponents # With: use PureAdmin.Components
-
Añadir translate_error/1
PureAdmin does not include
translate_error/1since it depends on your app's Gettext configuration. Copy it from the generated CoreComponents or define your own. -
Reemplazar las referencias de iconos
CoreComponents uses Heroicons via
<.icon name="hero-..." />. PureAdmin uses Font Awesome:<i class="fa-solid fa-..."></i>.