View Source Kino.Layout (Kino v0.8.1)

Layout utilities for arranging multiple kinos together.

Link to this section Summary

Functions

Arranges outputs into a grid.

Arranges outputs into separate tabs.

Link to this section Types

@opaque t()

Link to this section Functions

@spec grid([term()], keyword()) :: t()

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

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

Examples

images =
  for path <- paths do
    path |> File.read!() |> Kino.Image.new(:jpeg)
  end

Kino.Layout.grid(images, columns: 3)
@spec tabs([{String.t(), term()}]) :: t()

Arranges outputs into separate tabs.

examples

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
])