radio-group 放在form cell 里面的显示高度问题

liniu commented 3 weeks ago

Wot Design Uni 版本号

1.3.10

平台

h5

复现Demo地址（如不提供，issue将被直接关闭）

暂时没有

重现步骤

<wd-form ref="form" :model="model">
            <wd-cell-group border>
                <wd-input v-model="m.patName" prop="patName" label="姓名" label-width="100px" clearable
                    placeholder="请填写姓名" :rules="[{ required: true }]" />

                <wd-cell title="性别" required prop="sex" :rules="[{ required: true }]" center>

                    <wd-radio-group v-model="m.sex" shape="dot" cell inline >
                        <wd-radio :value="1">男</wd-radio>
                        <wd-radio :value="2">女</wd-radio>
                    </wd-radio-group>

                </wd-cell>
                               ......

期望的结果是什么？

radio-group 放在form cell 里面,能和其他组件一样，保持同样的高度。

实际的结果是什么？

radio-group 放在form cell 里面，高度和其他组件不一致，有点不协调。

环境信息

H5平台

其他补充信息

No response

Moonofweisheng commented 3 weeks ago

先尝试修改样式，这个问题我们后面看看

------------------ 原始邮件 ------------------ 发件人: "Moonofweisheng/wot-design-uni" @.>; 发送时间: 2024年9月24日(星期二) 晚上6:06 @.>; @.***>; 主题: [Moonofweisheng/wot-design-uni] radio-group 放在form cell 里面的显示高度问题 (Issue #628)

Wot Design Uni 版本号

1.3.10

平台

h5

复现Demo地址（如不提供，issue将被直接关闭）

暂时没有

重现步骤

image.png (view on web) <wd-form ref="form" :model="model"><wd-cell-group border><wd-input v-model="m.patName" prop="patName" label="姓名" label-width="100px" clearableplaceholder="请填写姓名" :rules="[{ required: true }]" /><wd-cell title="性别" required prop="sex" :rules="[{ required: true }]" center><wd-radio-group v-model="m.sex" shape="dot" cell inline ><wd-radio :value="1">男</wd-radio><wd-radio :value="2">女</wd-radio></wd-radio-group></wd-cell> ...... 期望的结果是什么？

radio-group 放在form cell 里面,能和其他组件一样，保持同样的高度。

实际的结果是什么？

radio-group 放在form cell 里面，高度和其他组件不一致，有点不协调。

环境信息

H5平台

其他补充信息

No response

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

RYGRIT commented 3 weeks ago

先尝试修改样式，这个问题我们后面看看 … ------------------ 原始邮件 ------------------ 发件人: "Moonofweisheng/wot-design-uni" @.>; 发送时间: 2024年9月24日(星期二) 晚上6:06 @.>; @.>; 主题: [Moonofweisheng/wot-design-uni] radio-group 放在form cell 里面的显示高度问题 (Issue #628) Wot Design Uni 版本号 1.3.10 平台 h5 复现Demo地址（如不提供，issue将被直接关闭）暂时没有重现步骤 image.png (view on web) <wd-form ref="form" :model="model"><wd-cell-group border><wd-input v-model="m.patName" prop="patName" label="姓名" label-width="100px" clearableplaceholder="请填写姓名" :rules="[{ required: true }]" /><wd-cell title="性别" required prop="sex" :rules="[{ required: true }]" center><wd-radio-group v-model="m.sex" shape="dot" cell inline ><wd-radio :value="1">男</wd-radio><wd-radio :value="2">女</wd-radio></wd-radio-group></wd-cell> ...... 期望的结果是什么？ radio-group 放在form cell 里面,能和其他组件一样，保持同样的高度。实际的结果是什么？ radio-group 放在form cell 里面，高度和其他组件不一致，有点不协调。环境信息 H5平台其他补充信息 No response — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.>

我检查了一下，发现有两个因素影响了

给 RadioGroup 设置 cell 属性之后，会增加一个上下 padding，导致变高了
RadioGroup 原本的样式 font-size: 0;

form

Moonofweisheng commented 2 weeks ago

wt-switch 的高度也是有问题的，详见demo的“开启折扣”高度跟其他行就不一致，

wt-form的设计感觉怪怪的，其他ui基本都有一个form-item包裹。

form-item已经有了，只不过目前没办法在不存在破坏性改动的情况下使用，在1.x版本你遇到的不存在cell的组件最好直接自行通过修改样式的方式适应cell的行高，等待form改动的话，应该会在2.x版本，这将是一个破坏性的改动，会存在大量的组件被调整，这是我的设想，目前还没有启动2.x版本的开发。

liniu commented 2 weeks ago

情况

wt-switch 的高度也是有问题的，详见demo的“开启折扣”高度跟其他行就不一致， wt-form的设计感觉怪怪的，其他ui基本都有一个form-item包裹。

form-item已经有了，只不过目前没办法在不存在破坏性改动的情况下使用，在1.x版本你遇到的不存在cell的组件最好直接自行通过修改样式的方式适应cell的行高，等待form改动的话，应该会在2.x版本，这将是一个破坏性的改动，会存在大量的组件被调整，这是我的设想，目前还没有启动2.x版本的开发。

谢谢，from是个UI组件的灵魂，希望尽早启动，或者先引入from2，让大家先使用起来提早发现问题，到新版本再换名称。

liniu commented 4 days ago

from2 什么时候先搞起来

liniu commented 4 days ago

高度问题依然还在，版本 "wot-design-uni": "^1.3.12"

  <wd-cell title="分享标记" titleWidth="120px" center>
                    <wd-radio-group v-model="m.shared" shape="dot" inline cell>
                        <wd-radio :value="1" custom-class="mx-1">公开</wd-radio>                      
                        <wd-radio :value="3" custom-class="mx-1">团队</wd-radio>
                    </wd-radio-group>
                </wd-cell>

如果去掉 wd-radio-group 的cell,则radio-group 显示上下非居中，如下图

  <wd-cell title="分享标记" titleWidth="120px" center>
                    <wd-radio-group v-model="m.shared" shape="dot" inline >
                        <wd-radio :value="1" custom-class="mx-1">公开</wd-radio>                      
                        <wd-radio :value="3" custom-class="mx-1">团队</wd-radio>
                    </wd-radio-group>
                </wd-cell>

目前临时解决方法：

::v-deep .wd-radio.is-cell-radio{
    padding: 3px 5px
}
::v-deep .wd-radio-group{
    display: flex;
}

Moonofweisheng / wot-design-uni