Vaadin 树 Right-To-Left 对齐

Question

默认情况下，Vaadin Tree 组件左对齐：根在左边，children 向右移动。

+ root
|---child
|-----grandchild
|-----grandchild

是否可以将对齐设置为right-to-left：根在右边，children在向左移动？ expand/collapse 三角形也应该在右边。

           root+
       child---|
grandchild-----|
grandchild-----|

Answer 1

是的，这是可能的。你可以用样式来做到这一点。我为 Valo 主题编写了简单的解决方案（另一个主题可能有其他样式）。希望我没有忘记任何事情。

.v-tree.rtl-tree {
  direction: rtl;
  .v-tree-node-caption {
    span {
      padding-left: 28px;
      text-align: right;
    }
    .v-icon {
      padding-left: 0;
    }
  }
  .v-icon + span {
    margin-right: 7px;
  }
  .v-tree-node::before {
    right: 19px;
  }
  .v-tree-node.v-tree-node-root::before {
    right: 0; // special for root node
  }
  .v-tree-node-children {
    padding-right: 19px;
  }
}

Vaadin 树 Right-To-Left 对齐

Vaadin Tree Right-To-Left Alignment

vaadin

vaadin7