Ant-design: 蚂蚁@ 3.0

更新。

更新。

https://github.com/ant-design/ant-design/issues/5140可以是可编辑的游乐场。

遵循我们设计师的计划，也许更大的默认字体大小。

将cloneElement重构context ？

1. 菜单
2. 标签

重新打开＃1473吗？

我仍然希望获得更强大的内置i18n支持https://github.com/ant-design/ant-design/issues/5554#issuecomment -290372828

完善和完善组件定义的注释？

2-> 3甚至1-> 3的工具呢？

@yesmeck这个https://github.com/ant-design/ant-design/issues/5570#issuecomment -290622803意味着我们需要放弃Tabs.TabPane[key]和Menu.Item[key] ...

我仍然希望获得更强大的内置i18n支持＃5554（评论）

我正在评估@plandem ，让我们继续讨论这个问题。

完善和完善组件定义的注释？

@infeng这就是为什么我想用TypeScript重写演示，以便我们可以注意到定义中的问题https://github.com/ant-design/ant-design/issues/5390

2-> 3甚至1-> 3的工具呢？

是的，我们仍然需要提供https://github.com/ant-design/ant-design/issues/3759#issuecomment -272353773之类的工具，尽管它不是完美的解决方案

@sorrycc您如何看待webpack@2 ？

关于RTF编辑器有什么进展吗？ ＃1083

https://github.com/MicheleBertoli/css-in-js

编辑器可能暂时不在我们的近期计划中。

应该在https://github.com/ant-design/ant-design/issues/5656中讨论ThemeProvider

但是我不确定我们是否有时间将其引入[email protected] 。

为图表添加新功能
如派，组图等

为图表添加新功能
我反对。 这是另一类组件。

如果您需要同一团队的图表，则可以尝试以下一种方法：
https://antv.alipay.com/index.html

我发现自己在所有项目中都一次又一次地实现，而antd缺少的一个组件是屏幕外的侧边栏。

react-sidebar是一个不错的组件，但是它破坏了与页面滚动有关的所有内容，因此它毫无用处。 集成的侧边栏（最好在触摸设备上具有滑动支持）将是我对3.0的最大希望！

@JesperWe我认为您需要的是Layout.Sider

@benjycui实际上，我已经有几个月没有看过Sider了，我发现它从2.6开始就有一个自定义触发器，这使其比以前更有用。 但是，它仍会挤压内容列，使其在出现时变窄，因此不能用作侧边栏。

但是它可以扩展为像带有一些新道具的侧边栏一样工作：

• cover: true使其显示在页面内容的顶部，而不是挤压它。
• mask: true用于在Sider在顶部时在页面的未覆盖部分上显示遮罩。
• maskCloseable: true以使其在外部单击时折叠。

终于在梦中世界

• swipeable: true以更好地支持触摸设备（但由于您可能将antd视为桌面设备，因此也可以在antd之外实现）。

@benjycui @JesperWe在Layout.Sider演示中，当Sider在移动设备中打开时，内容受到挤压（不好）。

是否可以将内容也向右推送？ 还是将Sider放在内容之上？

我想在下一个主要版本中进行的又一个重大更改，并希望您提供建议： https :

@JesperWe所以，您需要的是Drawer之类的东西。

而且我们不应该在这里讨论功能的详细信息，而只是讨论一个新问题。

@benjycui好吧，我重新描述我的3.0梦想:-)：类似于Drawer集成到antd中的原因（因为添加antd-mobile / Drawer使捆绑包变得更大，并添加了许多不需要的react-native东西）

比较结果并将汇总视为库打包程序。

这里有一些想法：
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

比较结果并将汇总视为库打包程序。

我们可以在2.x中执行此操作，因为开发人员不会感到任何改变。

您可以打开一个新期刊来讨论这个想法@plandem

尝试用https://github.com/styled-components/styled-components代替

关于样式化组件，我也有问题：

• 与postcss https://github.com/styled-components/styled-components/blob/master/src/utils/autoprefix.js#L6相比，autoprefixer库可能不太可靠
• 为了兼容性，我们必须保留整个当前的CSS类名，而styled-components会为样式生成它自己的类名，这将是多余的并且难以维护吗？

这就是为什么try存在的原因，兼容性是我们必须考虑的一个大问题。

为了兼容性，我们必须保留整个当前的CSS类名，而styled-components会为样式生成它自己的类名，这将是多余的并且难以维护吗？

实际上，这不是问题。 当前的CSS类名不仅是为了兼容性，还包括我们可以在测试中使用的选择器（例如酶）。 因此，我们必须保留它们。

@paranoidjk @ afc163 @benjycui

Hiya，我是Styled-Components核心贡献者之一，由于我们的仓库中有未解决的问题（请参见上文），因此发现此线程，这使我知道此lib不支持SC。 然后我偶然发现了这个对话：眨眼：–好吧，现在上下文

autoprefixer库与postcss相比可能不是很可靠

我们已经精心选择了stylis ，并与开发它的@thysultan紧密合作。 如果不是PostCSS的替代品，并且它具有的一些问题（在v3中缺少几个前缀），我们将很快选择解决方案。 v2本身已经进行了几个月的制作，现在终于发布了。 我们绝对可以保证这一点。 如果您使用SC：smile：

您指向的文件尚未使用，并且现在已被删除，并且是使用inline-style-prefixer进行的旧自动前缀的一部分。 但这甚至是（对我们而言）@rofrischmann的整个css-in-js社区，这是一个非常非常非常值得信赖的解决方案。

或者我们可以说，一旦选择了css-in-js，我们将失去后css插件系统的便利性，例如px-to-rem？

由于在加标签的模板文字中进行插值时，您只能使用任何JS，因此简单的函数可以替换所有这些内容。 实际上，我们有一个单独的项目，称为“抛光”，就像CSS-in-JS的lodash一样，并附带了您希望从SASS / LESS等获得的所有混合（例如辅助函数）： https：// polished。 js.org

（我们确实不再如上所述使用PostCSS，也没有支持它的插件btw）

为了兼容性，我们必须保留整个当前的CSS类名，而styled-components会为样式生成它自己的类名，这将是多余的并且难以维护吗？

如果您需要附加自定义类名，则可以轻松使用我们的.attrs方法，该方法允许您将其他道具附加到组件。 例如：

const ButtonLink = styled.a.attrs({
  className: 'your-custom-extra-classname'
})`
   ... // css and stuff
`

其他一些优点和功能：

• 您只编写了CSS（您可能已经知道），并且唯一的附加项是＆符和嵌套
• 没有样式+组件映射
• 一切都是一个组成部分
• 您可以使用我们的css帮助程序来编写mixin /共享样式

如果您需要更多帮助，我在这里。 如果您需要更多信息，请访问我们的新网站：100： https ：

@philpl @benjycui

当前的CSS类名不仅是为了兼容性，还包括我们可以在测试中使用的选择器（例如酶）。 因此，我们必须保留它们。

测试中的大多数类选择器看起来都可以替换为显示名称选择器。 并非所有测试都如此，但这将使我们获得大部分帮助。 我不介意这样做。

样式化组件可以帮助自定义主题的一个地方。 似乎它将为我们提供比第一种方法更大的灵活性和比第二种方法更好的优化。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_variables

我第二个@philpl-请在Ant Design中styled-components很棒。

我认为，如果我们重构为styled-component ，我们可以同时解决此问题https://github.com/ant-design/ant-design/issues/4998 。

PS：这并不意味着styled-component可以解决此问题，只是因为我们可以同时执行此操作以减少工作量。

更新：

这就是我目前在React项目中设计Ant Design的方式。 它不是最大的，因为我们必须遍历_entire_ Ant Design库并对所有样式进行样式设置。 我不想在create-react-app使用LESS预处理器麻烦，因为这很痛苦。

// <strong i="7">@flow</strong>

import { injectGlobal } from 'styled-components';
import Color from 'color';

/*
 * We'll start with just one theme for now. Define colors and other styles here.
 * More themes can be easily added later. Look in ./App.js to see where this
 * theme is actually used.
 */

const mainTheme = {
  primaryColor: Color('#fd3d57'),
  primaryTextColor: Color('#fff'),
};

const defaultTheme = mainTheme;

// Inject global styles - seems to be the only way to customize Ant Design
// PLEASE ADD STYLES IN ALPHABETICAL ORDER for everyone's sanity. Thanks.
injectGlobal`
  .ant-btn {
    &:hover {
      border-color: ${defaultTheme.primaryColor
        .lighten(0.2)
        .toString()} !important;
      color: ${defaultTheme.primaryColor.lighten(0.2).toString()} !important;
    }

    &:active {
      border-color: ${defaultTheme.primaryColor
        .darken(0.2)
        .toString()} !important;
      color: ${defaultTheme.primaryColor.darken(0.2).toString()} !important;
    }
  }

  .ant-btn-primary {
    background-color: ${defaultTheme.primaryColor.toString()} !important;
    border-color: ${defaultTheme.primaryColor.toString()} !important;
    color: ${defaultTheme.primaryTextColor.toString()} !important;

    &:hover {
      background-color: ${defaultTheme.primaryColor
        .lighten(0.2)
        .toString()} !important;
      border-color: ${defaultTheme.primaryColor
        .lighten(0.2)
        .toString()} !important;
      color: ${defaultTheme.primaryTextColor.toString()} !important;
    }

    &:active {
      background-color: ${defaultTheme.primaryColor
        .darken(0.2)
        .toString()} !important;
      border-color: ${defaultTheme.primaryColor
        .darken(0.2)
        .toString()} !important;
      color: ${defaultTheme.primaryTextColor.toString()} !important;
    }
  }

  .ant-btn-clicked:after {
    border: 0 solid ${defaultTheme.primaryColor.toString()} !important;
  }

  .ant-switch-checked {
    background-color: ${defaultTheme.primaryColor.toString()} !important;
    border-color: ${defaultTheme.primaryColor.toString()} !important;
  }
`;

export default defaultTheme;

如果使Ant Design与styled-components兼容，那么我们可以仅用<ThemeProvider theme={primaryTheme}>包装应用程序，然后对其进行相应样式设置。

我只想将@rofrischmann的fela用作样式组件的替代。 它更加模块化，速度更快。 它具有很多功能，而且占地面积很小。 另外， cloudflare决定使用它而不是样式组件来构建其ui。

无论你们决定什么，我都非常高兴看到antd使用一些css-in-js解决方案，而不是更少。

styled-components是构建现代，模块化，可扩展的UI组件的更好选择。
最重要的是，它可以使组件独立呈现，而无需任何外部css文件。
这样就可以使用最少的必需样式来部分导入组件。
希望[email protected]将使用它。

https://github.com/ant-design/ant-design/tree/antd-3.0

@benjycui @yesmeck @ ddcat1115 @RaoHai

cc @nikogu

添加＃4853吗？

添加＃4853吗？

这很困难，因为某些组件将key作为API的一部分，在重命名所有API名称之前，我们无法修复此问题。 例如

key => id
expandedKeys => expandedIds
selectedKeys => selectedIds
....

这将是一个重大更改，但是这种重大更改可以通过antd-codemod解决。

我们可以继续在＃4853中进行讨论

用TypeScript重写演示

演示仅是Typescript还是JS和Typescript都可以？ 我希望两者都保留。

https://github.com/react-bootstrap/react-overlays/issues/188

确保rc-trigger可与React 16一起使用。

是否仍可以选择由维护者/协作者选择的styled-components或CSS-in-js解决方案？
我很乐意，并希望为您提供帮助：)

太多的工作将我们较少的文件迁移到样式化组件，恐怕我们不会在antd 3中引入样式化组件。但是，由于样式化组件可以将样式应用于antd的组件而不会干扰antd的代码，因此如果有人感兴趣在与antd一起使用样式组件时，这是一个示例https://github.com/yesmeck/styled-antd

@codepunkt @yesmeck很想看看有魅力的antd的例子

@yesmeck @ afc163如何在CSS-in-JS中使用JSS？
您是否认为这里列出的样式化的组件更可行？

也许它与工具生态系统更相关，但是确保antd 3.0与babel 7正常工作可能是一个好主意。
特别是在7.0中计划内置的babel typescript。
通过create-react-app可以大大简化antd / typescript的使用

考虑放弃对IE6-8（甚至包括IE11以下的所有版本）的支持。

这将使css文件更苗条，下载速度更快。 React甚至不支持版本9以下的IE，因此.clearfix，-ms-filter等可以安全删除。

蚂蚁已经只正式支持IE9 +

在2017年10月12日，星期四，上午7：58，AndreasCederström<
[email protected]>写道：

考虑放弃对IE6-8（甚至包括IE11以下的所有版本）的支持。

这将使css文件更苗条，下载速度更快。 反应不
甚至支持版本9以下的IE，因此.clearfix，-ms-filter等都可以安全使用
删除。

-
您收到此消息是因为您已订阅此线程。
直接回复此电子邮件，在GitHub上查看
https://github.com/ant-design/ant-design/issues/5570#issuecomment-336107229 ，
或使线程静音
https://github.com/notifications/unsubscribe-auth/ADUIEIQi6tXJB0336SQrtMrMCIHfvjNuks5srf7pgaJpZM4MuJYf
。

好。 检查antd.css（https://cdnjs.cloudflare.com/ajax/libs/antd/2.13.6/antd.css）包含一些应删除的IE6-8 hack。

例：

  /* IE6-IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
  zoom: 1;

.clearfix {
  zoom: 1;
}

@andriijas我认为它已在antd-3.0删除，如果您仍然看到任何破解，只需PR即可将其删除，谢谢。

我对样式化组件和antd表单有很大的疑问。 当我将用fieldDecorator装饰的表单组件包装到使用样式组件样式化的包装器时，表单字段停止工作。 我不是很了解这个问题，但是我必须使用内联样式将其包装到<div>才能使其正常工作。 这真是令人讨厌...

周选择器！！！

@malekjaroslav可能与使用不正确有关。 您可以在样式化组件存储库中打开一个问题，以便我为您提供帮助吗？

@benjycui您如何看待antd3.0中的响应式助手？ 像这样的东西https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_display.scss在反应

import { Utils } from "antd";
const { Display } = Utils;

const Foo = props => (
  <h1>
    My idiotic example header
    <Display xs="block" sm="inline" print="inline-block">my subheader is fantastic</Display>
  </h1>
);

const Zoo = props => (
  <h1>
    My idiotic example header
    <Display xs={{display: "block", className: ..}} sm="inline" print="hidden">my subheader is fantastic</Display>
  </h1>
);

如果您需要帮助，可以将PR用作姓名的缩写，但在翻译文档等方面需要帮助。

@andriijas只需使用https://github.com/contra/react-sensitive即可。 我们只添加遵循Ant设计规范的UI组件即可。 无论如何，谢谢😄

是的，我在ant-design-pro存储库中看到了它。 我将使用来自antd的断点进行包装。

期待这个版本！

大家好，我刚刚发布了[email protected] ，请参见https://github.com/ant-design/ant-design/issues/8233

很期待新版本的发布，因为出来了才能开始用antd pro的组件。你们还打算月底出炉吗?

多谢你们提供了这么好的前端组件，你们已经超越谷歌的material

Really excited for this release as it is the blocker for starting to use the new antd pro components. Is expected release timeframe still end of November?

Thanks for providing such an awesome library. You guys are leaving Google's Material UI is the dust.

https://medium.com/ant-design/announcing-ant-design-3-0-70e3e65eca0c

Ant Design 3.0现已发布！ 🎉

+1为将来的版本中的样式组件/情感/ fela支持。