Question

我正在尝试制作一个切换开关，其标签位于切换器的每一侧和顶部标签上。

E.g。我正在尝试进行左/右切换。

Out put看起来像这样。

侧
左[切换]右

这是切换代码：

 <Toggle
                                                floatingLabelText="Side"
                                                label="Side"
                                                labelPosition="right"
                                                style={styles.toggle}
                                            />

Answer 1

材质UI仅支持左或右侧标签。您必须使用HTML和CSS将标签定位到其他两个位置。

在这种情况下，我建议根本不使用label属性，只需将Toggle包含在带有一些跨度的div中以显示相应的文本。

Answer 2

没有选项可以在Toggle组件中同时设置两个标签（右和左）。

我所做的是解决这个问题的方法是做这种代码：

<div>
    <label>Option 1</label>
    <Toggle 
        label="Option 2" 
        labelPosition="right"
        style={{margin : '-20px 0px 0px 60px'}} 
        defaultToggled={false} 
        onToggle={function(event: object, isInputChecked: bool)}
    />
</div>

请注意：您可以根据所需的位置更改此'style = {{margin：' - 20px 0px 0px 60px'}}'。

Material-ui切换标签，我如何拥有左，右和上标签？

2 个答案: