Enterprise: 支持配置顶级元素

创建于 2018-11-09 · 17评论 · 资料来源: infor-design/enterprise

您的功能请求是否与问题有关？
我们对 IDS 的使用仅限于页面的一部分，而不是整个正文。因此，为了使用它，我们对做出这个假设的许多组件进行了分叉，用我们指定的选择器替换对主体选择器的引用。
例如，在 tabs 组件中，我们替换了这一行：
menuHtml = $(``<ul id="tab-container-popupmenu" class="tab-list-spillover${shouldBeSelectable}">``).appendTo('body');
有了这个：
menuHtml = $(``<ul id="tab-container-popupmenu" class="tab-list-spillover${shouldBeSelectable}">``).appendTo(window.$FEF_TOP_LEVEL_ELEMENT_SELECTOR);

描述您想要的解决方案
一种配置将引用 IDS/Soho 的顶级元素的方法。

描述你考虑过的替代方案
除了继续分叉之外，我们没有任何分叉。另一种选择是为所有组件添加前缀，例如 ids-grid、ids-dropdown 等。这可能需要更多的工作，但可能更灵活

附加上下文
这是来自 GT Nexus 前端框架团队的请求。

[5] refactor status type type

资料来源

tfavorite

👍3

最有用的评论

你可以关注这个项目 https://github.com/infor-design/enterprise-wc -> 它还有很长的路要走，但明年的某个时候应该会发布一些东西

tmcconechy 于 2020-12-22

👍2

所有17条评论

我认为我们在其他情况下确实需要这个，所以诀窍是添加一个 ids-enterprise 顶级类，然后让它级联。这将是一个我们可以轻松缓解的重大变化。当您调用它时，也可以将它添加到 initialize() 中（如果人们使用它）。

tmcconechy 于 2019-10-04

👍1

是否可以添加对 soho 的支持以添加对忽略元素的支持？
在我们的用例中，我们希望应用程序根据 Soho 设计样式，但我们需要一种方法来告诉 Soho css 忽略某些元素及其后代

例如带有类的元素将被忽略

.soho-ignore

也许:not() 选择器会有所帮助？

Fruko 于 2019-10-07

👍2

我不确定这会很容易@Fruko我想我们必须添加一个完整的第二个样式表，我们 :not() 每一个 css 规则？例如，如果您在其中使用树类或下拉列表或其他任何内容，它仍然可能会导致问题。

我认为这样做的另一种方法就是不在该顶级元素上放置ids-enterprise规则，这将作为一个不。

<div class='ids-enterprise'>
   <!-- Soho / IDS stuff -->
</div>
<div class='anything-else-but-ids-enterprise'>
   <!-- Not Soho / IDS stuff -->
</div>

tmcconechy 于 2019-10-07

感谢您调查@tmcconechy ！这个问题和其他一些问题（我将记录）正在阻止 Infor Nexus 迁移到 IDS（我们在 Soho 的一个多年以前的分叉版本上），所以这将是一个很大的帮助。

tfavorite 于 2019-10-07

👍1

酷是足够的用例来添加这个。很快就会研究它。我认为只需要顶级元素，但可能意味着 5.0 版本只是为了遵循语义版本控制并进行少量破坏性更改。

tmcconechy 于 2019-10-07

👍1

@tmcconechy但是这样的场景呢

    <div class="accordion ids-enterprise" data-demo-set-links="true" data-options="{'allowOnePane': false}">
      <div class="accordion-header">
        <a href="#"><span>Warehouse Location</span></a>
      </div>
      <div class="accordion-pane">
        <div class="accordion-content">
          <some-component-with-own-styles></some-component-with-own-styles>
        </div>
      </div>

给定上面的代码，我们如何确保 ids-enteprise css 不会弄乱“some-component-with-own-styles？

从我的角度来看，将根元素添加到级联 css 是一个好主意，但我相信为了使企业 css 可用，必须有一种方法可以使它不与应用程序的其他部分混淆，如果：不是选择器不是一个选项，用 ids-enterprise 为所有 ids-enterprise 类添加前缀怎么样？

Fruko 于 2019-10-07

是的，我想过用ids-为所有选项添加前缀，但这是一个更具破坏性的变化。如果我们只是将它称为ids-accordion-content也不确定它会解决这个确切的情况。

对于这个确切的情况，我认为我们可以想出一些东西来否定手风琴内容中的任何样式，但我认为这将是一个单独的问题。并且必须逐个组件地执行此组件。

我只是怀疑有什么好的方法可以制作一个not-ids类，无论你把它放在哪里，它都适用于每个单独的组件。因此，这将更多地视具体情况而定。

tmcconechy 于 2019-10-07

想知道更简单的重置是否会有所帮助？外汇... ids-reset

会设置字体、填充、边距和更多的东西回到文档根目录吗？

某种反向重置？在某些情况下可能会有所帮助，但绝对不是全部？

tmcconechy 于 2019-10-07

👍2

这可能会奏效

Fruko 于 2019-10-07

好的，将与此一起看一看。那并不像我最初预期的那么糟糕。

tmcconechy 于 2019-10-07

我喜欢带有 id 前缀的想法。实际上它被称为“品牌”概念。这绝对是一个突破性的变化，但它应该是未来 ids-enterprisd css 结构的方式。

ahnpnl 于 2019-10-07

👍2

我同意必须权衡重大变化的价值。

tmcconechy 于 2019-10-07

进一步检查了这一点。如果不向根添加前缀，就无法完成。希望我能找到办法。
在下一代项目中，所有内容都有前缀并且是自包含的，因此这不会成为问题。暂时搁置它但不关闭，因为我们可能需要在主要版本上执行此操作

tmcconechy 于 2020-09-22

我们在 5.0 下一个版本中有一个解决方案，其中每个组件都是一个带有封装 css 的 web 组件，并且所有 css 都是命名空间的。这将满足这个问题所以关闭

tmcconechy 于 2020-12-22

@tmcconechy这是个好消息！是否有一种很好的方法来跟踪何时普遍可用？

tfavorite 于 2020-12-22

👍1

你可以关注这个项目 https://github.com/infor-design/enterprise-wc -> 它还有很长的路要走，但明年的某个时候应该会发布一些东西

tmcconechy 于 2020-12-22

👍2

看起来真的很有前途！

tfavorite 于 2020-12-22

👍1

此页面是否有帮助？

0 / 5 - 0 等级

Enterprise: 支持配置顶级元素

最有用的评论

所有17条评论

相关问题