首页 > 解决方案 > ActiveAdmin:将默认主题样式应用于自定义面板的自定义部分

问题描述

我正在为我的项目使用 Active Admin。我想要一个索引页面的自定义面板。问题是我不知道如何应用默认的 ActiveAdmin 样式我的自定义部分。目前它的风格被打破

损坏的活动管理 UI

我希望统计/摘要部分位于Summary面板内并具有更好的格式,如简单表格

下面是我的代码

ActiveAdmin.register UserAnswer do
  config.per_page = 1

  index do
    panel "Summary" do
      render partial: "summary"
    end

    column :answer do |u_answer|
      link_to u_answer.answer.content, [ :admin, u_answer.answer]
    end

    actions
  end
end

我只想在summary面板内添加基本表

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><h3>Total Attempts</h3></td>
      <td><h3>100</h3></td>
    </tr>

    <tr>
      <td><h3>Answers</h3></td>
      <td>
        <h3>Answer 1: Chosen 1000 times</h3>
        <h3>Answer 2: Chosen 1000 times</h3>
        <h3>Answer 3: Chosen 1000 times</h3>
        <h3>Answer 4: Chosen 1000 times</h3>
        <h3>Answer 5: Chosen 1000 times</h3>
      </td>
    </tr>
  </tbody>
</table>

标签: ruby-on-railsactiveadmin

解决方案


我不知道为什么尝试将表格添加到面板中会使 UI 混乱。我提出了一个解决方案,只需将表单独放置并合并其表头以使其成为普通面板标题并将类添加index_table到表中

最终代码将是

<table class="index_table" style="margin-top: 100px">
  <thead>
    <tr>
      <th colspan="2">Summary</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><h3>Total Attempts</h3></td>
      <td><h3><%= UserAnswer.count %> </h3></td>
    </tr>
    ...
  </tbody>
</table>

而且,不再使用panel

ActiveAdmin.register UserAnswer do
  config.per_page = 1

  index do
    render partial: "summary"

    column :answer do |u_answer|
      link_to u_answer.answer.content, [ :admin, u_answer.answer]
    end

    actions
  end
end

推荐阅读