Ant Design 3.0.0 официально выпущен с множеством исправлений и улучшений

внешний интерфейс внешний фреймворк Ant Design
Ant Design 3.0.0 официально выпущен с множеством исправлений и улучшений

Церемония открытия юаня 2017, скидка 20% в течение ограниченного времени! >>>  

Ant Design 3.0.0 официально выпущен. Design Ant Design - это набор языка дизайна ui на уровне предприятия и реагирующая реакция, разработанная и использованная Final Finance.

Большие перемены

  • совершенно новыйцветовая система#108EE9"К"#1890FF

  • Базовый размер шрифта задается12pxувеличить до14px.

  • Язык по умолчанию изменен с китайского на английский.

  • Полная поддержка React 16.

  • Более дружественная поддержка TypeScript.

  • новый Listкомпонент.

  • новый Dividerкомпонент.

  • добавить 30значок.

Несовместимые изменения

  • КартыnoHoveringсобственность переименована вhoverable, а значение по умолчанию изменено наtrue.

  • 调整了 Grid 的响应式断点值。 Видеть#7230

  • Form getFieldDecorator из exclusive

  • НовыйForm.createFormFieldmapPropsToFields

    import { Form } from 'antd';

Form.create({
  mapPropsToFields() {
    return {
-     name: { value: 'antd' },
+     name: Form.createFormField({ value: 'antd' }),
    };
  },
})

  • Оптимизирован глобальный стиль сброса.Если возникнут проблемы с вашим глобальным стилем после обновления, вы можете ввести предоставленный нами стиль, совместимый с 2.x.

    import 'antd/style/v2-compatible-reset';

    Или ввести меньше

    @import '~antd/style/v2-compatible-reset.css';

  • Поскольку язык по умолчанию изменен на английский, если вам нужно отображать китайский язык, теперь вам нужно настроитьLocalProvider.

    import { LocaleProvider } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';

ReactDOM.render(
  <LocaleProvider locale={zhCN}><YourApp /></LocaleProvider>,
  document.getElementById('root')
);

  • Элементы управления формы в форме больше не имеют размер по умолчанию = "большой".

Следующие функции, устаревшие в версии 2.x, были удалены.

  • Удален DatePicker.Calendar, используйте компонент Календарь напрямую.

  • Удалены DatePickertoggleOpenсобственность, пожалуйста, используйтеonOpenChange заменять.

  • Удаление формыinline,horizontal,verticalсобственность, пожалуйста, используйтеlayout заменять.

  • Удален выборmultiple,tags,comboboxсобственность, пожалуйста, используйтеmode заменять.

  • Удалена пара вводаtype='textarea'Input.TextAreaкомпонент.

  • toEditorStatetoContentState заменять.

Новые функции и улучшения

  • Вкладки новыеsize="large".

  • рядgutterСвойство добавляет поддержку реактивных точек останова, которые можно использовать, напримерgutter={{ sm: 16, lg: 32 }} параметр.

  • Новое вращениеindicatorсвойство для установки пользовательского индикатора загрузки. #7977 @kossel

  • Добавлен ввод.ПоискenterButtonИспользуется для установки пользовательского значка поиска.#7596

  • Упоминание новогоplacement

  • next(),prev(),goTo(slideNumber)

  • Кнопка добавляет поддержку ссылки, если она предоставленаhrefбудет автоматически отображаться как<a>.#8343

  • Шаги были переработаны, чтобы больше не мерцать при первом рендеринге. #6010

  • Переключить новоеloadingАтрибут, используемый для представления состояния загрузки.

  • Menu

    • ДобавитьsubMenuOpenDelay а также subMenuCloseDelay, который устанавливает задержку открытия и закрытия подменю.

    • ДобавитьforceSubMenuRender, чтобы принудительно отображать подменю.#5586

  • Form

    • Добавлен эффект анимации при отображении информации для аутентификации.

    • Добавлена ​​поддержка условного рендеринга элементов формы.#react-component/117

  • Message

    •  durationразрешить необязательный#7857 @monkindey

  • Badge

    • ДобавитьoffsetАтрибут для установки смещения положения точки состояния.

    • statusразрешено сchildrenиспользовать одновременно.#8164

  • Card

  • DatePicker

    • Добавитьmode а также onPanelChangeПоказать режим пользовательской панели управления.пример.

    • ДобавитьWeekPickerПодсаживать.пример

    • ДобавитьdateRenderАтрибут для настройки отображения ячеек даты.

  • TimePicker

    • ДобавитьhourStep,minuteStep,secondStep, который используется для установки временного шага.пример

    • ДобавитьfocusOnOpen, который используется для установки того, следует ли фокусировать поле ввода при открытии панели.

  • Table

    • Добавитьcomponents

      // 支持覆盖的元素
const components = {
  table: MyTable,
  header: {
    wrapper: HeaderWrapper,
    row: HeaderRow,
    cell: HeaderCell,
  },
  body: {
    wrapper: BodyWrapper,
    row: BodyRow,
    cell: BodyCell,
  },
};

<Table components={components} columns={columns data={data}}  />

    • ДобавитьonRow

    • ДобавитьonHeaderRow, пользователь задает свойства столбца заголовка таблицы.

    • Добавитьcolumn[onCell], пользователь задает свойства ячейки.

    • Добавитьcolumn[onHeaderCell], который используется для установки свойств ячейки заголовка.

    • Добавитьcolumn[align], который используется для установки выравнивания текста в столбце.

    • Добавитьcolumn[defaultSortOrder], который устанавливает сортировку по умолчанию для столбца.#8111 @megawac

    • ДобавитьrowSelection[fixed], для фиксированного выбора столбцов.

    • заброшенныйgetBodyWrapper,пожалуйста, используйте componentsвместо этого собственность.

    • Отменить следующие свойстваonRowClick,onRowDoubleClick,onRowContextMenu,onRowMouseEnter,onRowMouseLeave,пожалуйста, используйте onRow заменять.

      <Table onRow={(record) => ({
  onClick: () => {},
  onDoubleClick: () => {},
  onContextMenu: () => {},
  onMouseEnter: () => {},
  onMouseLeave: () => {},
})} />

  • Select

    • Значение Option по умолчанию и в режиме множественного выбора позволяет использовать число.

    • ДобавитьmaxTagCount 和maxTagPlaceholder`, используемый для установки максимального количества выбранных элементов, которые могут отображаться.

    • ДобавитьshowActionДля установки раскрывающегося коробка начального события открыты.

    • ДобавитьonMouseEnter а также onMouseLeave

  • LocaleProvider

Исправлена ​​ошибка

  • Form

    • Исправлена ​​ошибка, из-за которой значок поля ввода закрывался значком проверки.

    • Устранена проблема, из-за которой значок проверки не располагался по центру при использовании поля ввода большого размера.

  • Исправьте ошибку при исправлению кнопки меню.#8089

разное

  • Не нужно настраивать при использовании в TypeScriptallowSyntheticDefaultImports.

  • от peerDependenciesудалено изreact@0.14 а также react@15Хотя ANTD 3.0.0 может по-прежнему использовать на старой версии React, у нас есть новая особенность реагирования 16 в будущем, поэтому настоятельно рекомендуется обновить, чтобы отреагировать 16, см.Обновление документации.

  • Полная поддержка модуля ES, antd и зависимых от него базовых компонентов реакции-компонента предоставляет сборочную версию модуля ES. Если вы используете webpack 3, вы можете поставитьbabel-import-plugin из libraryDirectoryУстановить какes, чтобы получить эффект оптимизации Tree Shake.

  • Наконец, мы продолжим поддерживать ветку 2.x до июня следующего года.

Узнать большеОбъявление о выпуске Ant Design 3.0!

Категории