@spec card(assigns :: Socket.assigns()) :: Phoenix.LiveView.Rendered.t()

卡片组件。

您可以在主页和操作系统数据页面上看到它。

属性

• title (:string) - 卡片上方的标题。默认为 nil。
• hint (:string) - 显示在标题附近的文本提示。默认为 nil。
• inner_title (:string) - 卡片内部的标题。默认为 nil。
• inner_hint (:string) - 显示在内部标题附近的文本提示。默认为 nil。
• dom_id (:string) - HTML 主标签的 id 属性。默认为 nil。

插槽

• inner_block (必需) - 卡片将显示的值。

@spec card_title(assigns :: Socket.assigns()) :: Phoenix.LiveView.Rendered.t()

卡片标题组件。

属性

• title (:string) - 卡片上方的标题。默认为 nil。
• hint (:string) - 显示在标题附近的文本提示。默认为 nil。

字段卡片组件。

您可以在主页的环境部分看到它。

属性

• fields (:list) (必需) - 将在卡片内显示的键值元素列表。
• title (:string) - 卡片上方的标题。默认为 nil。
• hint (:string) - 显示在标题附近的文本提示。默认为 nil。
• inner_title (:string) - 卡片内部的标题。默认为 nil。
• inner_hint (:string) - 显示在内部标题附近的文本提示。默认为 nil。

@spec hint(assigns :: Socket.assigns()) :: Phoenix.LiveView.Rendered.t()

提示弹出文本组件

属性

• text (:string) (必需) - 在提示中显示的文本。

标签值列表。

您可以在端口或进程页面上的模态中看到它。

插槽

• elem (必需) - 列表中每个元素的值。接受属性
  • label (:string) (必需) - elem 的标签。

@spec live_layered_graph(assigns :: Socket.assigns()) :: Phoenix.LiveView.Rendered.t()

用于绘制分层图的组件。

这对于表示管道很有用，就像我们在 BroadwayDashboard 中一样，其中每层都指向下方层的节点。它从上到下绘制层。

层的计算和位置是根据选项自动完成的。

属性

• id (:any) (必需) - 因为是一个有状态的 Phoenix.LiveComponent，所以需要一个唯一的 id。

• title (:string) - 组件的标题。默认为 nil。

• hint (:string) - 显示在标题附近的文本提示。默认为 nil。

• layers (:list) (必需) - 一个带有节点的层图。它们代表我们的图结构（见示例）。每层都是节点列表，其中每个节点都具有以下字段

  • :id - 给定节点的 ID。
  • :children - 子节点的 ID。
  • :data - 字符串或映射。如果它是一个映射，则必需的字段是 detail 和 label。

• show_grid? (:boolean) - 启用或禁用网格显示。这对于开发很有用。默认为 false。

• y_label_offset (:integer) - 相对于其圆心，标签位置的“y”偏移量。默认为 5。

• y_detail_offset (:integer) - 相对于其圆心，详细信息位置的“y”偏移量。默认为 18。

• background (:any) - 一个函数，它根据节点的数据计算节点的背景。默认：fn _node_data -> "gray" end."

• format_label (:any) - 格式化标签的函数。默认为一个函数，该函数返回标签或数据（如果数据是二进制的）。

• format_detail (:any) - 格式化详细信息字段的函数。只有在数据是映射时才会调用此函数。默认：fn node_data -> node_data.detail end。

示例

iex> layers = [
...>   [
...>     %{
...>       id: "a1",
...>       data: "a1",
...>       children: ["b1"]
...>     }
...>   ],
...>   [
...>     %{
...>       id: "b1"
...>       data: %{
...>         detail: 0,
...>         label: "b1"
...>       },
...>       children: []
...>      }
...>    ]
...> ]

@spec live_nav_bar(assigns :: Socket.assigns()) :: Phoenix.LiveView.Rendered.t()

导航栏直播组件。

您可以在指标和 Ecto 信息页面上看到它。

属性

• id (:any) (必需) - 因为是一个有状态的 Phoenix.LiveComponent，所以需要一个唯一的 id。

• page (Phoenix.LiveDashboard.PageBuilder) (必需) - 仪表板页面。

• nav_param (:string) - 配置导航参数的原子。当同一个页面存在两个导航栏时，这很有用。

  默认为 "nav"。

• extra_params (:list) - 一个字符串列表，表示在点击选项卡时应该保留的参数。默认情况下，导航栏会忽略所有参数，除了当前节点（如果有）。

  默认为 []。

• style (:atom) - 导航栏的样式。必须是 :pills 或 :bar 之一。

插槽

• item (必需) - 选择选项卡时渲染的 HTML。接受属性
  • name (:string) (必需) - 选择选项卡时在 URL 中使用的值。
  • label (:string) - 选项卡的标题。如果它不存在，将从 name 计算得出。
  • method (:string) - 用于更新的方法。必须是 "patch"、"navigate"、"href" 或 "redirect" 之一。

@spec live_table(assigns :: Socket.assigns()) :: Phoenix.LiveView.Rendered.t()

表格直播组件。

您可以在应用程序、进程、套接字页面以及许多其他页面上看到它。

属性

• id (:any) (必需) - 因为是一个有状态的 Phoenix.LiveComponent，所以需要一个唯一的 id。

• page (Phoenix.LiveDashboard.PageBuilder) (必需) - 仪表板页面。

• row_fetcher (:any) (必需) - 一个接收参数和节点并返回一个包含行和总数量的元组的函数：(params(), node() -> {list(), integer() | binary()})。如果该函数需要保持状态，可以选择将其定义为一个元组，其中第一个元素是函数，第二个元素是初始状态。在这种情况下，该函数将接收状态作为第三个参数，并且必须返回一个包含行、总数量和下一次调用的新状态的元组：{(params(), node(), term() -> {list(), integer() | binary(), term()}), term()}

• rows_name (:string) - 用于命名行表示的字符串。默认情况下，它将从当前页面计算得出。

• row_attrs (:any) - 一个列表，其中包含表格行的 HTML 属性。它也可以是一个接收行作为参数并返回一个包含 HTML 属性名称和值的 2 元素元组的列表的函数。

  默认为 nil。

• default_sort_by (:any) - 要排序的默认列。默认为第一个可排序列。默认为 nil。

• title (:string) (必填) - 表格的标题。

• limit (:any) - 可以设置为 false 来禁用 limit。默认值为 [50, 100, 500, 1000, 5000]。

• search (:boolean) - 一个布尔值，指示是否启用搜索功能。默认为 true。

• hint (:string) - 显示在标题附近的文本提示。默认为 nil。

• dom_id (:string) - HTML 主标签的 id 属性。默认为 nil。

插槽

• col (必填) - 表格的列。接受属性
  • field (:atom) (必填) - 列的标识符。
  • sortable (:atom) - 设置后，列标题可点击，它将重新获取按新顺序排列的行。至少需要一列。必须为以下之一：:asc 或 :desc。
  • header (:string) - 在当前列中显示的标签。默认值根据 :field 计算得出。
  • text_align (:string) - 列中文本的文本对齐方式。默认值：nil。必须为以下之一："left"、"center"、"right" 或 "justify"。

@spec row(assigns :: Socket.assigns()) :: Phoenix.LiveView.Rendered.t()

行组件。

您可以在主页和操作系统数据页面中看到它。

插槽

• col (必填) - 组件列表。它可以接收最多 3 个组件。每个元素将是一列。

@spec shared_usage_card(assigns :: Socket.assigns()) :: Phoenix.LiveView.Rendered.t()

共享使用卡片组件。

您可以在主页和操作系统数据页面中看到它。

属性

• usages (:list) (必填) - 一个 Map 列表，具有以下键

  • :data - 一个包含 4 个元素的元组列表，其中包含以下数据：{usage_name, usage_percent, color, hint}
  • :dom_id - 必填。用法标识符。
  • :title- 条形图标题。

• total_data (:any) (必填) - 一个包含 4 个元素的元组列表，其中包含以下数据：{usage_name, usage_value, color, hint}。

• total_legend (:string) (必填) - 总使用量的图例。

• total_usage (:string) (必填) - 总使用量的值。

• dom_id (:string) - HTML 主标签的 id 属性。默认为 nil。

• csp_nonces (:any) (必填) - CSP nonce 的副本 (@csp_nonces)，用于安全地渲染页面。

• title (:string) - 卡片上方的标题。默认为 nil。

• hint (:string) - 显示在标题附近的文本提示。默认为 nil。

• inner_title (:string) - 卡片内部的标题。默认为 nil。

• inner_hint (:string) - 显示在内部标题附近的文本提示。默认为 nil。

• total_formatter (:any) - 用于格式化 total_usage 的函数。默认值：&("#{&1} %")。默认为 nil。

@spec usage_card(assigns :: Socket.assigns()) :: Phoenix.LiveView.Rendered.t()

使用卡片组件。

您可以在主页和操作系统数据页面中看到它。

属性

• title (:string) - 卡片上方的标题。默认为 nil。
• hint (:string) - 显示在标题附近的文本提示。默认为 nil。
• dom_id (:string) (必填) - 此卡片中所有用法的唯一标识符。
• csp_nonces (:any) (必填) - CSP nonce 的副本 (@csp_nonces)，用于安全地渲染页面。

插槽

• usage (必填) - 要显示的用法列表。接受属性
  • current (:integer) (必填) - 用法的当前值。
  • limit (:integer) (必填) - 用法的最大值。
  • dom_id (:string) (必填) - 用法的唯一标识符，将与 dom_id 拼接。
  • percent (:string) - 用法的使用百分比。
  • title (:string) - 用法的标题。
  • hint (:string) - 在用法标题旁边显示的文本提示。