Installation and usage
Install primer_live
-
Add PrimerLive as a dependency in your Phoenix application's
mix.exs
:{:primer_live, "~> 0.2.2"}
- Run
mix.deps get
Add CSS and JavaScript dependencies
You can either use npm
, or add the dependencies to the HTML file.
If you plan to use menus, dialogs, or drawers in your project, you will need to include JavaScript dependencies. If not, you may skip the JavaScript imports and hooks.
Option A: Adding dependencies using npm
Add npm libraryprimer-live
to your assets/package.json
. For a regular project, do:
{ "dependencies": { "primer-live": "file:../deps/primer_live" } }
primer-live
to an umbrella project, change the paths accordingly:
{ "dependencies": { "primer-live": "file:../../../deps/primer_live" } }
npm install --prefix assets
primer-live
and want to get the
latest JavaScript, then force an install with:
npm install --force primer-live --prefix assets
To ensure that the assets are installed before your application has started, and before it has been deployed, add "npm install" to the setup and deploy scripts in mix.exs
.
For example:
defp aliases do [ setup: ["deps.get", "cmd npm --prefix assets install"], "assets.deploy": [ "cmd npm --prefix assets install", "esbuild default --minify", "phx.digest" ] ] end
Run mix setup
to install the npm dependencies.
Add to assets/js/app.js
:
import "primer-live/primer-live.min.css"; import { Prompt, Session } from "primer-live";
Also in assets/js/app.js
, add Prompt
and Session
to the hooks:
let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken }, hooks: { Prompt, Session, // existing hooks ... }, });
Option B: Adding dependencies to the HTML file
Load the dependencies from a content delivery service such as unpkg.
CSS only
Add to root.html.heex
:
<link rel="stylesheet" href="https://unpkg.com/primer-live/priv/static/primer-live.min.css" media="all">
CSS and JavaScript
Add to root.html.heex
:
<link rel="stylesheet" href="https://unpkg.com/primer-live/priv/static/primer-live.min.css" media="all"> <script src="https://unpkg.com/primer-live/priv/static/primer-live.min.js"></script>
In assets/js/app.js
, add global Prompt
and Session
to the hooks:
let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken }, hooks: { Prompt, Session, // existing hooks ... }, });
Usage
To use components, use
module PrimerLive
:
defmodule MyAppWeb.MyLiveView do use MyAppWeb, :live_view use PrimerLive def render(assigns) do ~H""" <.button>Click me</.button> """ end end
-
Overview
- Introduction
- Installation and usage
- Try out
-
Components
- Action List
- Action menu
- Alert
- Avatars
- Blank slate
- Box
- Branch name
- Breadcrumbs
- Button
- Checkbox
- Counter
- Dialog
- Drawer
- Dropdown
- Filter list
- Form group
- Header
- Input validation message
- Label
- Layout
- Link
- Loaders
- Menu
- Octicon
- Pagination
- Progress
- Radio button
- Radio group
- Select
- Select menu
- Side nav
- State
- Styled HTML
- Subhead
- Subnav
- Tabnav
- Text input
- Textarea
- Theme
- Theme menu
- Theme menu options
- Timeline
- Truncate
- Underline nav