Ant-design: [email protected]

Обновлено.

Обновлено.

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 ?

Есть ли прогресс в редакторе форматированного текста? # 1083

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

Редактора может пока не быть в нашем недавнем плане.

ThemeProvider следует обсудить в https://github.com/ant-design/ant-design/issues/5656.

Но я не уверен, успеем ли мы ввести его в [email protected] .

Добавить новую функцию для диаграммы
Такие как пирог, гистограмма и т. Д.

Добавить новую функцию для диаграммы
Я против этого. Это другой класс компонентов.

Если вам нужны графики от одной команды, вы можете попробовать следующее:
https://antv.alipay.com/index.html

Единственный компонент, отсутствующий в antd, который я реализую снова и снова во всех проектах, - это боковая панель за пределами экрана.

react-sidebar - хороший компонент, но он нарушает все, что связано с прокруткой страницы, поэтому бесполезен. Интегрированная боковая панель, желательно с поддержкой смахивания на сенсорных устройствах, было бы моим самым большим желанием для 3.0!

@JesperWe, я думаю, вам нужен Layout.Sider

@benjycui На самом деле я не смотрел на Sider несколько месяцев, я вижу, что у него есть настраиваемый триггер, начиная с версии 2.6, что делает его более полезным, чем раньше. Однако он по-прежнему сжимает столбец содержимого, чтобы стать узким, когда он появляется, поэтому его нельзя использовать в качестве боковой панели.

Но его можно расширить, чтобы он работал как боковая панель с некоторыми новыми реквизитами:

• cover: true чтобы он отображался поверх содержимого страницы, а не сжимал его.
• mask: true чтобы показать маску над непокрытой частью страницы, когда Сидер находится сверху.
• maskCloseable: true чтобы он рухнул при нажатии снаружи.

и, наконец, в мире грез

• swipeable: true для лучшей поддержки сенсорных устройств (но, поскольку вы, вероятно, думаете о antd как о настольном компьютере, этого можно достичь и за пределами antd).

@benjycui @JesperWe В демонстрации Layout.Sider содержимое сжимается (что плохо), когда Sider открывается на мобильном устройстве.

Можно ли также сдвинуть контент вправо? Или положить сайдер поверх контента?

Еще одно критическое изменение, которое я хочу сделать в следующей основной версии и хочу, чтобы вы дали совет: https://github.com/ant-design/ant-design/issues/6139

@Jesper: Итак, тебе нужно что-нибудь вроде Ящика .

И мы не должны здесь обсуждать детали функций, просто откройте для обсуждения новый вопрос.

@benjycui Хорошо, поэтому я перефразирую свою мечту о 3.0 :-): Что-то вроде Drawer, интегрированного в antd (потому что добавление antd-mobile / Drawer делает пакет намного больше и добавляет много нежелательных вещей, связанных с реакцией)

Сравните результаты и рассмотрите свертку как упаковщик библиотеки.

Вот некоторые мысли:
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

Сравните результаты и рассмотрите свертку как упаковщик библиотеки.

Мы можем сделать это в 2.x, чтобы разработчики не почувствовали никаких изменений.

И вы можете открыть новый выпуск, чтобы обсудить эту идею @plandem

Попробуйте заменить меньше на https://github.com/styled-components/styled-components

По поводу стилизованных компонентов у меня тоже проблемы:

• библиотека autoprefixer может быть не очень надежной по сравнению с postcss https://github.com/styled-components/styled-components/blob/master/src/utils/autoprefix.js#L6. Или мы можем сказать, выбрав css-in-js, мы потеряем удобство системы плагинов post-css, такой как px-to-rem?
• мы должны оставить все текущее имя класса css для совместимости, в то время как стилизованные компоненты будут генерировать собственное имя класса для стиля, это будет избыточным и сложным в обслуживании?

Вот почему существует try , совместимость - большая проблема, которую мы должны учитывать.

мы должны оставить все текущее имя класса css для совместимости, в то время как стилизованные компоненты будут генерировать собственное имя класса для стиля, это будет избыточным и сложным в обслуживании?

Собственно, это не проблема. Текущие имена классов CSS предназначены не только для совместимости, но и для селекторов, которые мы можем использовать в тестах (например, фермент). Значит, мы должны их сохранить.

@paranoidjk @ afc163 @benjycui

Привет, я являюсь одним из основных участников разработки стилизованных компонентов и нашел эту ветку из-за открытой проблемы в нашем репозитории (см. Выше), которая сообщила мне, что эта библиотека не поддерживает SC. Случайно я тогда нашел этот разговор: wink: - Хорошо, теперь контекст в сторону

библиотека autoprefixer может быть не очень надежной по сравнению с postcss

Мы тщательно выбрали stylis и тесно сотрудничаем с @thysultan , который его разрабатывает. Мы бы не выбрали его, если бы он не был достойной заменой PostCSS, и те немногие проблемы, которые у него были (пара отсутствующих префиксов в v3), были решены очень быстро. Сама версия 2 находилась в разработке в течение нескольких месяцев, кстати, и теперь, наконец, вышла. В этом отношении мы определенно можем поручиться. Пусть эта деталь реализации станет нашим беспокойством, если вы выберете SC: smile:

Файл, на который вы указываете, не используется и был удален, кстати, и является частью старого автоматического префикса с inline-style-prefixer. Но даже это (и было для нас) очень, очень и очень надежное решение от @rofrischmann в сообществе css-in-js.

Или мы можем сказать, выбрав css-in-js, мы потеряем удобство системы плагинов post-css, такой как px-to-rem?

Поскольку в интерполяциях в наших тегированных шаблонных литералах вы можете просто использовать любой JS, простые функции могут заменить все это. На самом деле у нас есть отдельный проект под названием «polished», который похож на lodash для CSS-in-JS и поставляется со всеми миксинами (т.е. вспомогательными функциями), которые можно ожидать от SASS / LESS и подобных: https: // polished. js.org

(Мы действительно больше не используем PostCSS, как упоминалось выше, и не поддерживаем его плагины, кстати)

мы должны оставить все текущее имя класса css для совместимости, в то время как стилизованные компоненты будут генерировать собственное имя класса для стиля, это будет избыточным и сложным в обслуживании?

Если вам нужно прикрепить собственные имена классов, вы можете легко использовать наш метод .attrs , который позволяет вам прикреплять дополнительные свойства к компоненту. Например:

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

Еще несколько вкусностей и возможностей:

• Вы пишете только CSS (как вы, возможно, уже знаете), и единственные дополнения - это амперсанды и вложенность.
• Нет стилей + сопоставление компонентов
• Все компоненты
• Вы можете писать миксины / общие стили с помощью нашего помощника css

Я здесь, если тебе нужна дополнительная помощь. Если вам нужна дополнительная информация, посетите наш новый веб-сайт: 100: https://styled-components.com

@philpl @benjycui

Текущие имена классов CSS предназначены не только для совместимости, но и для селекторов, которые мы можем использовать в тестах (например, фермент). Значит, мы должны их сохранить.

Большинство селекторов классов в тестах выглядит так, как будто их можно заменить селекторами отображаемых имен . Это верно не для всех тестов, но это поможет нам в большинстве случаев. Я бы не прочь взяться за это.

Одно место, где могут помочь стилизованные компоненты, - это настройка темы . Похоже, это даст нам больше гибкости, чем первый подход, и лучшую оптимизацию, чем второй подход.

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

Второй @philpl - ПОЖАЛУЙСТА, упростите стилизацию в Ant Design. В настоящее время это настоящая боль. styled-components потрясающе.

Думаю, мы сможем решить эту проблему одновременно https://github.com/ant-design/ant-design/issues/4998 , если проведем рефакторинг до styled-component .

PS Это не означает, что styled-component может решить эту проблему, просто потому, что мы можем сделать это одновременно, чтобы сократить объем работы.

Обновлено:

Вот как я сейчас оформляю Ant Design в проекте React. Это не самое лучшее, потому что мы должны пройти через всю библиотеку Ant Design и стилизовать все. Я не хочу возиться с препроцессором LESS в create-react-app , потому что это своего рода боль.

// <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}> и оно было бы оформлено соответствующим образом.

Я просто хотел бы добавить fela от @rofrischmann в качестве альтернативы styled-components. Он более модульный и быстрый. Он имеет множество функций и мало места . Кроме того, cloudflare решили использовать его в пользовательском интерфейсе вместо styled-components.

Что бы вы ни решили, я был бы очень рад, если бы antd использовал какое-нибудь решение css-in-js вместо меньшего.

styled-components - лучший выбор для создания современных модульных масштабируемых компонентов пользовательского интерфейса.
самое главное, он может сделать рендеринг компонентов независимо без какого-либо внешнего файла 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
....

Это будет критическое изменение, но такое исправить с помощью

Мы можем продолжить обсуждение в # 4853

Перепишите демонстрацию на TypeScript

Будет ли демо-версия только Typescript или одновременно JS и Typescript? Я надеюсь сохранить и то, и другое.

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

Убедитесь, что rc-trigger работает с React 16.

Можно ли по-прежнему использовать styled-components или решение css-in-js по выбору сопровождающих / соавторов?
Мне бы это понравилось, и я бы хотел помочь с рефакторингом :)

Слишком много работы по переносу наших файлов less в стилизованные компоненты, я боюсь, что мы не будем вводить стилизованные компоненты в antd 3. Но, поскольку стилизованные компоненты могут применять стили к компоненту antd, не вторгаясь в код antd, поэтому, если кому-то интересно при использовании стилизованных компонентов с antd вот пример https://github.com/yesmeck/styled-antd

@codepunkt @yesmeck хотел бы увидеть примеры antd с гламурным

@yesmeck @ afc163 как насчет перехода на JSS для CSS-in-JS?
Как вы думаете, перечисленные здесь преимущества могут сделать его более осуществимым, чем стилизованные компоненты ?

Возможно, это больше связано с экосистемой инструментов, но было бы неплохо убедиться, что antd 3.0 отлично работает с babel 7.
Особенно со встроенной генерацией babel typescript, запланированной в 7.0.
Это может значительно упростить использование antd / typescript с помощью create-react-app.

Рассмотрите возможность отказа от поддержки IE6-8, возможно, даже всех версий ниже IE11.

Это сделает файл css тоньше и ускорит загрузку. React даже не поддерживает IE ниже версии 9, поэтому .clearfix, -ms-filter и т. Д. Можно безопасно удалить.

муравей уже официально поддерживает только IE9 +

Чт, 12 октября 2017 г., 7:58, Андреас Седерстрём <
[email protected]> написал:

Рассмотрите возможность отказа от поддержки IE6-8, возможно, даже всех версий ниже IE11.

Это сделает файл css тоньше и ускорит загрузку. React не
даже поддерживает IE ниже версии 9, поэтому .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, которые затем следует удалить.

Пример:

  /* 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, в оболочку, стилизованную с помощью styled-components, поля формы перестают работать. Я действительно не понимаю эту проблему, но мне нужно обернуть ее в <div> со встроенными стилями, чтобы она работала. Это действительно раздражает ...

Выбор недели !!!

@malekjaroslav, что может быть связано с неправильным использованием. Не могли бы вы открыть вопрос с репозиторием styled-components, чтобы я мог вам помочь?

@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-responsive . Мы просто добавляем компонент пользовательского интерфейса, соответствующий спецификации дизайна Ant, в antd. В любом случае спасибо 😄

Да, видел в репозитории ant-design-pro. Сделаю обертку с точками останова от antd.

С нетерпением жду этого релиза!

Всем привет, я только что выпустил [email protected] , см. Https://github.com/ant-design/ant-design/issues/8233

Я с нетерпением жду выхода новой версии, потому что я смогу начать использовать компоненты antd pro только тогда, когда она выйдет. Планируете ли вы выпустить его в конце месяца?

Спасибо за предоставление таких хороших интерфейсных компонентов, что вы превзошли материалы Google

Очень рад этому выпуску, так как он препятствует началу использования новых компонентов antd pro. Ожидаемые сроки выпуска все еще конец ноября?

Спасибо за такую ​​замечательную библиотеку. Вы, ребята, покидаете материальный интерфейс Google в пыли.

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

Выпущен Ant Design 3.0! 🎉 🎉 🎉

+1 за поддержку styled-components / Emotion / fela в будущем выпуске.