PrimerLive (Primer Live v0.1.0)
Primer Live is a collection of function components that implements GitHub's Primer Design System. It is intended for usage in Phoenix LiveView pages and regular (non-LiveView) views in Phoenix applications.
Since this implementation closely adheres to the Primer CSS documentation, extending components with Primer's utility classes should be simple.
versioning
Versioning
Included dependencies:
- primer-live:
0.1.11
- Includes:
- @primer/css:
20.5.1
- dialogic-js:
0.2.8
- @primer/css:
- Includes:
Included libraries:
- Octicons:
17.9.0
installation
Installation
install-dependencies
Install dependencies
- Edit
mix.exs
and add dependencyprimer_live
- Run
mix.deps get
set-up-javascript-css
Set up JavaScript / CSS
Install primer-live
Inside your assets folder, do:
npm install primer-live --save
Add to your app.js
:
import { Prompt } from "primer-live";
import "primer-live/primer-live.css";
In app.js
, add Prompt
to the hooks:
let liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken },
hooks: {
Prompt,
// existing hooks ...
},
});
usage-in-liveview-pages
Usage in LiveView pages
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
usage-in-regular-views
Usage in regular views
In view files, for example in page_view.ex
, use
module PrimerLive
:
defmodule MyAppWeb.PageView do
use MyAppWeb, :view
use PrimerLive
end
Then call the component on a page, for example in templates/page/index.html.heex
:
<.button>Click me</.button>