如何在 Hilla 前端框架中右移导航栏中的元素

Question

我正在使用 Hilla 构建我的应用程序的前端。我有一个 AppLayout 组件，它有一个包含元素的嵌套 HorizontalLayout 组件。但它们全部都是左对齐的。

我希望其中一些左对齐，一些右对齐。我检查了 HorizontalLayout 组件的文档并实施了建议。我尝试过但没成功。

Answer 1

我希望其中一些左对齐，一些右对齐。

有不同的方法可以让 HorizontalLayout 的一些子组件粘在左边（或开始），一些粘在右边（结束）。

如果我正确理解您的要求，您可以这样做：

<VerticalLayout theme="padding spacing">
    <h3>Hilla View</h3>
    <HorizontalLayout className="w-full">
        <HorizontalLayout theme="spacing">
            <Button>A</Button>
            <Button>B</Button>
        </HorizontalLayout>
        <div className="flex-grow" />
        <HorizontalLayout theme="spacing">
            <Button>C</Button>
            <Button>D</Button>
        </HorizontalLayout>
        <div className="flex-grow" />
        <HorizontalLayout theme="spacing">
            <Button>E</Button>
            <Button>F</Button>
        </HorizontalLayout>
    </HorizontalLayout>
<VerticalLayout />

输出：

间隔符

<div ... />

占用了额外的空间，因为

className="flex-grow"

这相当于在样式中设置

flex-grow: 1

。