Salad UIのHello worldをやってみた

はじめに

Phoenixのプロジェクトを作成してから、Salad UIを使えるようにするまでの手順のメモです

SaladUI Github

Phoenixのプロジェクト作成まで

mix phx.new hello_salad --no-ecto
cd hello_salad
mix ecto.create
mix phx.server
git init .

SaladUIのインストール

https://github.com/bluzky/salad_ui
Instsllのセクションに記載されてる通りの変更をする

mix deps.get
mix phx.server

Salad UIのコンポーネントを使ってみる

CoreComponentsを無効にして、SaladUI.Buttonをimportする

/lib/hello_salad_web.ex

       # HTML escaping functionality
       import Phoenix.HTML
       # Core UI components and translation
-      import HelloSaladWeb.CoreComponents
+      # import HelloSaladWeb.CoreComponents
+      import SaladUI.Button
+
       import HelloSaladWeb.Gettext
 
       # Shortcut for generating JS commands

flash_group flashもCoreComponentsの関数なので削除

/lib/hello_salad_web/components/layouts/app.html.heex

 </header>
 <main class="px-4 py-20 sm:px-6 lg:px-8">
   <div class="mx-auto max-w-2xl">
-    <.flash_group flash={@flash} />
     <%= @inner_content %>
   </div>
 </main>

home.html.heexをSaladUIのボタンにする

/lib/hello_salad_web/controllers/page_html/home.html.heex

<.button>
  Default
</.button>
<.button variant="secondary">
  Secondary
</.button>
<.button variant="destructive">
  Destructive
</.button>
<.button variant="outline">
  Outline
</.button>
<.button variant="ghost">
  Ghost
</.button>
<.button variant="link">
  Link
</.button>