はじめに
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>