FlexLayout
FlexLayout copied to clipboard
Button In Factory Title & Accessibility Support
- First of all its an awesome project really .
- Does FlexLayout supports which level of conformance accessibility .
- I wanted to added a Button In Factory Title event listener like that
titleFactory = (node: TabNode) => { if (node.getId() === 'custom-tab') { return <> <div> <span> Data </span> <button onClick={(e)=>alert("a")}> YYYX </button> </div> </> } return; }and I tried to add e.stopPropagation(); .. but It doesn't work . is there a way without changing the library from inside ? - can I prevent tab to be drag-able outside its owner/tabset to be dragable to this tabset only .. like re-arrange of tabs only.
to prevent tab to be drag-able outside its owner/tabset
from the readme:
To control where nodes can be dropped you can add a callback function to the model:
model.setOnAllowDrop(this.allowDrop); example:
allowDrop(dragNode, dropInfo) {
let dropNode = dropInfo.node;
// prevent non-border tabs dropping into borders
if (dropNode.getType() == "border" && (dragNode.getParent() == null || dragNode.getParent().getType() != "border"))
return false;
// prevent border tabs dropping into main layout
if (dropNode.getType() != "border" && (dragNode.getParent() != null && dragNode.getParent().getType() == "border"))
return false;
return true;
}
Thanks @nealus but what about
- Accessibility
- not working event listener on a Button in Factory Title
There is currently no accessibility support in flexlayout, PR's to add support would be welcome.
Ref the button question, you can add an onAction callback to the layout and prevent the SELECT_TAB action