@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) (必填) - 要在提示中顯示的文字。

標籤值清單。

您可以在 Ports 或 Processes 頁面中的模態對話框中看到實際應用。

插槽

• elem (必填) - 清單中每個元素的值。接受屬性
  • label (:string) (必填) - 元素標籤。

@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()

表格即時組件。

可以在應用程式、處理程序、Socket 頁面或其他多個頁面中看到使用方法。

屬性

• 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()

列組件。

您可以在首頁和 OS 資料頁面上看到其用途。

插槽

• col (必須) - 元件清單。它最多可以接收 3 個元件。每個元素都會是一個欄位。

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

共用使用量卡片組件。

您可以在首頁和 OS 資料頁面上看到其用途。

屬性

• 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 非隨機數 (@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()

使用量卡片組件。

您可以在首頁和 OS 資料頁面上看到其用途。

屬性

• title (:string) - 卡片上方的標題。預設為 nil。
• hint (:string) - 靠近標題顯示的文字提示。預設為 nil。
• dom_id (:string)（必填） - 此卡片中所有用量的唯一識別碼。
• csp_nonces (:any)（必填） - 複製的 CSP 非隨機數 (@csp_nonces)，用於安全地呈現頁面。

插槽

• usage（必填） - 要顯示的用量清單。接受屬性
  • current (:integer)（必填） - 使用量的目前值。
  • limit (:integer)（必填） - 用量的最大值。
  • dom_id (:string)（必填） - 使用量的唯一識別碼，會串接至 dom_id。
  • percent (:string) - 使用量的已用百分比。
  • title (:string) - 用量的標題。
  • hint (:string) - 靠近用量標題顯示的文字提示。