按钮组可以有标签吗?

时间:2020-05-13 作者:JohnRDOrazio

我正在开发一个古腾堡积木,并试图创建一些检查器控件。我想创建一个按钮组来控制块内特定元素的对齐方式(我要补充的是,我正在使用ServerSideRender来渲染块)。手册中关于按钮组的信息不多,似乎没有“标签”。我现在的javascript代码是:

    createElement(PanelRow, {},
        createElement(ButtonGroup, { title: __(\'N Element Alignment\',\'bibleget-io\') },
            createElement(IconButton, {
                icon: \'editor-alignleft\',
                isDefault: true
            }),
            createElement(IconButton, {
                icon: \'editor-aligncenter\',
                isDefault: true
            }),
            createElement(IconButton, {
                icon: \'editor-alignright\',
                isDefault: true
            })
        )
    ),
我还想知道ButtonGroup 具有onChange 事件,或仅单个Button组中有谁?或者可能是onClick 事件如何设置ButtonGroup? 是否必须根据属性的值设置每个按钮的状态?

UPDATE:我在chrome inspector工具中看到了关于“IconButton”(所以我现在只使用“Button”)和“isDefault”属性的“弃用”通知,所以我现在使用的是“isSecondary”。我发现我可以value 属性。到目前为止,我能找到的唯一方法是根据单个属性的值以有效的方式设置每个按钮的状态,即:

createElement(PanelRow, {},
    createElement(ButtonGroup, { title: __(\'N Element Alignment\',\'bibleget-io\') },
        createElement(Button, {
            icon: \'editor-alignleft\',
            value: \'left\',
            isPrimary: (attributes.nalignment === \'left\'),
            isSecondary: (attributes.nalignment !== \'left\'),
            onClick: changeNAlignmentValue
        }),
        createElement(Button, {
            icon: \'editor-aligncenter\',
            value: \'center\',
            isPrimary: (attributes.nalignment === \'center\'),
            isSecondary: (attributes.nalignment !== \'center\'),
            onClick: changeNAlignmentValue
        }),
        createElement(Button, {
            icon: \'editor-alignright\',
            value: \'right\',
            isPrimary: (attributes.nalignment === \'right\'),
            isSecondary: (attributes.nalignment !== \'right\'),
            onClick: changeNAlignmentValue
        })
    )
),
根据my的值,按钮状态现在以更重要的方式显示nalignment 属性当我单击组中的按钮时,我看到click事件正在传递给changeNAlignmentValue 作用我能够读取单击的按钮的值,如下所示:

function changNAlignmentValue(ev){
    let nalignment = ev.currentTarget.value;
    setAttributes({nalignment});
}
以这种方式,我看到nalignment 属性正在正确更新,并且正在中的按钮上设置状态ButtonGroup 基于nalignment 属性这是使用按钮组的正确方法吗?我本以为它会有更多的单选功能,因为文档中说一次只能切换一个按钮(当以类似独家单选的方式使用时:如何将按钮组设置为独家而不是多个,这更像是复选框按钮组?)我还有一个问题,那就是如何在ButtonGroup. 如果不可能,我甚至会创建一个Text 在创建ButtonGroup 组件,但我找不到有关如何创建Text javascript中的组件。我尝试了一些方法,但我遇到了一些错误,如“需要字符串并找到表达式”。。。

1 个回复
最合适的回答,由SO网友:JohnRDOrazio 整理而成

我发现了一种创建label 和ahelp 没有自己的组件的属性labelhelp 属性,方法是将该组件包装在BaseControl 组成部分以下是我的工作解决方案:

createElement(PanelRow, {}, 
    createElement(BaseControl, { 
            label: __(\'N element alignment\', \'my-textdomain\'), 
            help: __(\'Set the alignment for n element in this block\',\'my-textdomain\') 
        },
        createElement(ButtonGroup, {},
            createElement(Button, {
                icon: \'editor-alignleft\',
                value: \'left\',
                isPrimary: (attributes.nelementalign === \'left\'),
                isSecondary: (attributes.nelementalign !== \'left\'),
                onClick: changeNElementAlign,
                title: __(\'N element align left\', \'my-textdomain\')
            }),
            createElement(Button, {
                icon: \'editor-aligncenter\',
                value: \'center\',
                isPrimary: (attributes.nelementalign === \'center\'),
                isSecondary: (attributes.nelementalign !== \'center\'),
                onClick: changeNElementAlign,
                title: __(\'N element align center\', \'my-textdomain\')
            }),
            createElement(Button, {
                icon: \'editor-alignright\',
                value: \'right\',
                isPrimary: (attributes.nelementalign === \'right\'),
                isSecondary: (attributes.nelementalign !== \'right\'),
                onClick: changeNElementAlign,
                title: __(\'N element align right\', \'my-textdomain\')
            })
        )                               
    )
),