PrimerLive 项目教程

PrimerLive 项目教程

primer_live An implementation of GitHub's Primer Design System using Phoenix LiveView 项目地址: https://gitcode.com/gh_mirrors/pr/primer_live

1. 项目介绍

PrimerLive 是一个基于 Phoenix LiveView 实现的 GitHub Primer 设计系统的开源项目。GitHub 的 Primer 设计系统提供了一个强大的基础，用于创建数据驱动的应用程序，如具有交互式表单的丰富 CRUD 应用程序。PrimerLive 组件接受 class 属性进行自定义，并且通常支持 classes 结构体来处理内部元素。Primer 的实用类允许在不编写自定义样式的情况下进行广泛的定制。PrimerLive 组件可以在 Phoenix LiveView 页面和常规（非 LiveView）的 Phoenix 应用程序视图中使用。此外，使用 Ash Framework 创建的表单也得到支持。

2. 项目快速启动

安装依赖

首先，确保你已经安装了 Elixir 和 Phoenix。然后，在你的项目中添加 primer_live 依赖：

defp deps do
  [
    {:primer_live, "~> 0.7.2"}
  ]
end

在终端中运行以下命令来获取依赖：

mix deps.get

配置

在你的 config/config.exs 文件中添加以下配置：

config :primer_live,
  repo: MyApp.Repo,
  ecto_schema: MyApp.Schema

使用 PrimerLive 组件

在你的 LiveView 页面中使用 PrimerLive 组件：

defmodule MyAppWeb.MyLiveView do
  use MyAppWeb, :live_view
  import PrimerLive.Components

  def render(assigns) do
    ~H"""
    <.primer_button>点击我</.primer_button>
    """
  end
end

启动应用

在终端中运行以下命令启动你的 Phoenix 应用：

mix phx.server

现在，你可以访问 http://localhost:4000 查看你的应用。

3. 应用案例和最佳实践

案例1：创建一个简单的表单

使用 PrimerLive 创建一个简单的表单：

defmodule MyAppWeb.FormLive do
  use MyAppWeb, :live_view
  import PrimerLive.Components

  def render(assigns) do
    ~H"""
    <.primer_form for={@changeset} action={Routes.live_path(@socket, __MODULE__)}>
      <.primer_text_input field={:name} label="姓名" />
      <.primer_text_input field={:email} label="邮箱" />
      <.primer_button type="submit">提交</.primer_button>
    </.primer_form>
    """
  end

  def mount(_params, _session, socket) do
    changeset = MyApp.Schema.changeset(%MyApp.Schema{}, %{})
    {:ok, assign(socket, changeset: changeset)}
  end
end

最佳实践

• 组件复用：尽量复用 PrimerLive 提供的组件，减少自定义样式的工作量。
• 响应式设计：利用 Primer 的实用类进行响应式设计，确保应用在不同设备上都能良好显示。
• 表单验证：使用 Ecto 进行表单验证，确保数据的完整性和安全性。

4. 典型生态项目

Phoenix LiveView

Phoenix LiveView 是一个基于 Elixir 的实时应用框架，PrimerLive 正是基于此框架实现的。通过 LiveView，你可以构建实时、交互性强的 Web 应用。

Ash Framework

Ash Framework 是一个用于构建 API 和数据驱动的应用程序的框架。PrimerLive 支持使用 Ash Framework 创建的表单，使得数据驱动的应用开发更加便捷。

Ecto

Ecto 是 Elixir 的数据库包装器和查询语言，用于与数据库进行交互。PrimerLive 与 Ecto 集成，提供了强大的数据处理能力。

通过这些生态项目的结合，你可以构建出功能强大、用户体验良好的 Web 应用。

primer_live An implementation of GitHub's Primer Design System using Phoenix LiveView 项目地址: https://gitcode.com/gh_mirrors/pr/primer_live