Inconsistency with flex gap and grid gap usage

[tqwewe]

The Flex component uses a FlexGap enum to specify the gap prop, whilst the Grid component uses u16 pixels for specifying the gap. This inconsistency caused a bit of confusion for me, and might be better off using one of the two approaches for both components.

Also, it is a little unintuative that FlexGap variants have different sizes based on if the flex component is horizontal or vertical. I'm trying to make a kind of two column layout with one parent flex component, and two children:

view! {
    <Flex gap=FlexGap::Medium>
        <Flex class="flex-1" gap=FlexGap::Medium vertical=true>
            // Children in column A
        </Flex>
        <Flex class="flex-1" gap=FlexGap::Medium vertical=true>
            // Children in column B
        </Flex>
    </Flex>
}

However, despite me using FlexGap::Medium on all these components, the grid layout has 12px horizontally, and 8px vertically, which is not what I had expected.

[luoxiaozero]

The Flex and Grid components are designed with reference to the components of Naive UI, so I don’t plan to modify them at present.

However, despite me using FlexGap::Medium on all these components, the grid layout has 12px horizontally, and 8px vertically, which is not what I had expected.

You can customize it via FlexGap::WH(12, 12) or FlexGap::Size(12).