Spaces:
Running
Running
File size: 1,876 Bytes
a7504c6 2e3498a a7504c6 2e3498a a7504c6 2e3498a a7504c6 2e3498a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<!-- livebook:{"app_settings":{"access_type":"public","auto_shutdown_ms":3600000,"output_type":"rich","show_source":true,"slug":"kino-widgets"}} -->
# Kino UI widgets
```elixir
Mix.install([
{:kino, "~> 0.12.3"}
])
```
## Kino.Input
````elixir
defmodule Helpers do
def display_widget_demo(function_name) when function_name == "select" do
code =
quote do
Kino.Input.select(unquote(function_name), en: "English", fr: "Français")
end
markdown = build_code_sample(function_name, code)
render_input_demo(markdown, code)
end
def display_widget_demo(function_name) when function_name == "image" do
code =
quote do
Kino.Input.image(unquote(function_name), format: :png, width: 500, height: 500)
end
markdown = build_code_sample(function_name, code)
render_input_demo(markdown, code)
end
def display_widget_demo(function_name) do
code =
quote do
Kino.Input.unquote(String.to_atom(function_name))(unquote(function_name))
end
markdown = build_code_sample(function_name, code)
render_input_demo(markdown, code)
end
defp build_code_sample(title, code) do
Kino.Markdown.new("""
### #{title}
```elixir
#{Macro.to_string(code)}
```
""")
end
defp render_input_demo(code_sample_markdown, code) do
{result, _bindings} = Code.eval_quoted(code)
Kino.render(
Kino.Layout.grid([code_sample_markdown, result, Kino.HTML.new("<br/>")], boxed: true)
)
Kino.render(Kino.HTML.new("<br/>"))
end
end
````
```elixir
import Helpers
```
```elixir
Kino.Markdown.new("## Kino.input")
```
```elixir
kino_input_functions = ~w(
audio
checkbox
color
file
image
number
password
range
select
text
textarea
url
utc_datetime
utc_time
)
Enum.each(kino_input_functions, fn function_name ->
display_widget_demo(function_name)
end)
```
|