如何在 Laravel Nova 仪表板上自定义卡片高度？

Question

cards 有一个 ->width() 选项。身高怎么定义？

Answer 1

虽然 Nova 不提供 ->height() 方法，但当您生成 Nova 卡片时，它会自动创建 resources/js/components/Card.vue (see Nova card documentation)

Card.vue 文件允许您修改卡片元素的 Vue 模板。由于 Nova uses the Tailwind CSS framework, you should be able to use the Height classes of Tailwind CSS 在 Card.vue.

内

Answer 2

截至目前，您只能使用 ->width() 方法从 Card 的 php 文件中调整 Card 的宽度。

当您将卡片宽度设置为 1/2 时，卡片中的内容似乎会溢出。我通过将 class h-auto 添加到 Card.vue 内的 <card> 解决了这个问题。

Answer 3

我通过将其添加到我的 nova 主题中解决了这个问题：

.card-panel {
    height: auto !important;
    min-height: 150px;
}

最初发布在这里的解决方案：

How to customise height of card on Laravel Nova dashboard?