Packages
kino
0.9.1
0.19.0
0.18.0
0.17.0
0.16.1
0.16.0
0.15.3
0.15.2
0.15.1
0.15.0
0.14.2
0.14.1
0.14.0
0.13.2
0.13.1
0.13.0
0.12.3
0.12.2
0.12.1
0.12.0
0.11.3
0.11.2
0.11.1
0.11.0
0.10.0
0.9.4
0.9.3
0.9.2
0.9.1
0.9.0
0.8.1
0.8.0
0.7.0
0.6.2
0.6.1
0.6.0
retired
0.5.2
0.5.1
0.5.0
0.4.1
0.4.0
0.3.1
0.3.0
0.2.3
0.2.2
0.2.1
0.2.0
0.1.3
0.1.2
0.1.1
0.1.0
Interactive widgets for Livebook
Current section
Files
Jump to
Current section
Files
lib/kino/layout.ex
defmodule Kino.Layout do
@moduledoc """
Layout utilities for arranging multiple kinos together.
"""
defstruct [:type, :outputs, :info]
@opaque t :: %__MODULE__{
type: :tabs | :grid,
outputs: list(Kino.Output.t()),
info: map()
}
@doc """
Arranges outputs into separate tabs.
## Examples
data = [
%{id: 1, name: "Elixir", website: "https://elixir-lang.org"},
%{id: 2, name: "Erlang", website: "https://www.erlang.org"}
]
Kino.Layout.tabs([
Table: Kino.DataTable.new(data),
Raw: data
])
"""
@spec tabs(list({String.t() | atom(), term()})) :: t()
def tabs(tabs) do
{labels, terms} = Enum.unzip(tabs)
labels = Enum.map(labels, &to_string/1)
outputs = Enum.map(terms, &Kino.Render.to_livebook/1)
info = %{labels: labels}
%Kino.Layout{type: :tabs, outputs: outputs, info: info}
end
@doc """
Arranges outputs into a grid.
Note that the grid does not support scrolling, it always squeezes
the content, such that it does not exceed the page width.
## Options
* `:columns` - the number of columns in the grid. Defaults to `1`
* `:boxed` - whether the grid should be wrapped in a bordered box.
Defaults to `false`
* `:gap` - the amount of spacing between grid items in pixels.
Defaults to `8`
## Examples
images =
for path <- paths do
path |> File.read!() |> Kino.Image.new(:jpeg)
end
Kino.Layout.grid(images, columns: 3)
"""
@spec grid(list(term()), keyword()) :: t()
def grid(terms, opts \\ []) do
opts = Keyword.validate!(opts, columns: 1, boxed: false, gap: 8)
outputs = Enum.map(terms, &Kino.Render.to_livebook/1)
info = %{
columns: opts[:columns],
boxed: opts[:boxed],
gap: opts[:gap]
}
%Kino.Layout{type: :grid, outputs: outputs, info: info}
end
end