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

구성 요소 TS 정의의 주석을 개선하고 완벽하게?

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 평가 중입니다. 그 문제에 대해 계속 논의합시다.

구성 요소 TS 정의의 주석을 개선하고 완벽하게?

@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 -Sider가 맨 위에있을 때 페이지의 덮지 않은 부분에 마스크를 표시합니다.
• maskCloseable: true 외부에서 클릭하면 접 히게합니다.

그리고 마침내 꿈의 세계에서

• 터치 장치를 더 잘 지원하기 위해 swipeable: true (하지만 antd를 데스크톱 용으로 생각하고 있으므로 antd 외부에서도 가능합니다).

@benjycui @JesperWe Layout.Sider 데모에서 Sider가 모바일에서 열릴 때 콘텐츠가 압착됩니다 (나쁜).

콘텐츠를 오른쪽으로 밀어 넣을 수 있습니까? 아니면 콘텐츠 위에 Sider를 배치 하시겠습니까?

또 다른 주요 변경 사항은 다음 메이저 버전에서 수행하고 조언을 제공하기를 바랍니다 .

@JesperWe 그래서, 필요한 것은 Drawer 와 같은 것입니다.

여기서 기능에 대한 자세한 내용을 논의하지 말고 새 문제를 열어 논의하십시오.

@benjycui Ok 그래서 나는 내 3.0 꿈을 다시 표현합니다. :-) : Drawer 와 같은 것들이 antd에 통합되었습니다.

결과를 비교하고 롤업 을 라이브러리 패커로 고려

다음은 몇 가지 생각입니다.
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

결과를 비교하고 롤업을 라이브러리 패커로 고려하십시오.

2.x에서이 작업을 수행 할 수 있습니다. 개발자는 변경 사항을 느끼지 않을 것입니다.

그리고이 아이디어를 논의하기 위해 새로운 이슈를 열 수 있습니다 @plandem

less를 https://github.com/styled-components/styled-components 로 바꾸십시오.

스타일 구성 요소에 대해 너무 문제가 있습니다.

• autoprefixer 라이브러리는 postcss https://github.com/styled-components/styled-components/blob/master/src/utils/autoprefix.js#L6 과 비교할 때 매우 안정적이지 않을 수
• 우리는 호환성을 위해 전체 현재 CSS 클래스 이름을 유지해야하지만 스타일 구성 요소는 스타일에 대한 자체 클래스 이름을 생성합니다. 중복성과 유지 관리가 어렵습니까?

그래서 try 존재했고 호환성은 우리가 고려해야 할 큰 문제입니다.

우리는 호환성을 위해 전체 현재 CSS 클래스 이름을 유지해야하지만 스타일 구성 요소는 스타일에 대한 자체 클래스 이름을 생성합니다. 중복성과 유지 관리가 어렵습니까?

사실 이것은 문제가 아닙니다. 현재 CSS 클래스 이름은 호환성을위한 것이 아니라 test (예 : 효소)에서 사용할 수있는 선택자입니다. 그래서 우리는 그들을 지켜야합니다.

트윗 담아 가기

Hiya, 저는 스타일 구성 요소의 핵심 기여자 중 한 명이며이 스레드는 리포지토리의 열린 문제 (위 참조)로 인해이 라이브러리가 SC를 지원하지 않는다는 사실을 알려주었습니다. 우연히이 대화를 찾았습니다. : wink : – 이제 컨텍스트를 제쳐두고

autoprefixer 라이브러리는 postcss에 비해 신뢰성이 떨어질 수 있습니다.

우리는 신중하게 stylis 를 선택 했으며이를 개발하는

가리키는 파일은 사용 중이 아니며 지금 btw로 삭제되었으며 inline-style-prefixer가있는 이전 자동 접두사의 일부입니다. 하지만 그것조차도 @rofrischmann의 css-in-js 커뮤니티를 통해 매우 신뢰할 수있는 솔루션입니다.

또는 일단 css-in-js를 선택하면 px-to-rem과 같은 post-css 플러그인 시스템의 편리함을 잃게 될 것입니다.

태그가 지정된 템플릿 리터럴의 보간에서는 아무 JS 나 사용할 수 있으므로 간단한 함수가 모든 것을 대체 할 수 있습니다. 실제로 CSS-in-JS의 lodash와 같은 "polished"라는 별도의 프로젝트가 있으며 SASS / LESS에서 기대할 수있는 모든 믹스 인 (예 : 도우미 함수)과 함께 제공됩니다. https : // polished. js.org

(실제로 위에서 언급했듯이 PostCSS를 더 이상 사용하지 않으며 플러그인 btw를 지원하지도 않습니다)

우리는 호환성을 위해 전체 현재 CSS 클래스 이름을 유지해야하지만 스타일 구성 요소는 스타일에 대한 자체 클래스 이름을 생성합니다. 중복성과 유지 관리가 어렵습니까?

사용자 정의 클래스 이름을 첨부해야하는 경우 .attrs 메서드를 사용하면 쉽게 구성 요소에 추가 소품을 연결할 수 있습니다. 예를 들면 :

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

더 많은 장점과 기능 :

• CSS 만 작성하고 (이미 알고있을 수도 있음) 유일한 추가는 앰퍼샌드와 중첩입니다.
• 스타일 + 구성 요소 매핑이 없습니다.
• 모든 것이 구성 요소
• css 도우미를 사용하여 믹스 인 / 공유 스타일을 작성할 수 있습니다.

도움이 더 필요하시면 여기에 있습니다. 더 많은 정보가 필요하면 새로운 웹 사이트를 확인하세요 : 100 : https://styled-components.com

트윗 담아 가기

현재 CSS 클래스 이름은 호환성을위한 것이 아니라 test (예 : 효소)에서 사용할 수있는 선택자입니다. 그래서 우리는 그들을 지켜야합니다.

테스트에있는 대부분의 클래스 선택기는 대신 표시 이름 선택기로 대체 될 수있는 것처럼 보입니다. 이것은 모든 테스트에 해당되는 것은 아니지만 대부분의 방법을 사용할 수 있습니다. 나는 이것을 받아들이는 것을 꺼리지 않을 것이다.

스타일 구성 요소가 도움이 될 수있는 한 곳 은 테마 를

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

나는 두 번째 @philpl -Ant Design에서 스타일링을 훨씬 쉽게 만드십시오. 현재는 정말 고통 스럽습니다. styled-components 대단합니다.

styled-component 리팩터링하면 https://github.com/ant-design/ant-design/issues/4998 이 문제를 동시에 해결할 수 있다고 생각합니다.

추신 : 이것은 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에 의해. 더 모듈화 되고 빠릅니다. 그것은 많은 기능 과 작은 설치 면적이 있습니다. 또한 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 추가?

API의 일부로 key 를 사용하는 일부 구성 요소의 경우 모든 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에서 계획된 바벨 타입 스크립트 내장 생성과 함께.
create-react-app으로 antd / typescript 사용을 크게 단순화 할 수 있습니다.

IE6-8, IE11 이하의 모든 버전에 대한 지원을 중단하는 것을 고려하십시오.

CSS 파일을 더 얇고 빠르게 다운로드 할 수 있습니다. React는 버전 9 이하의 IE도 지원하지 않으므로 .clearfix, -ms-filter 등을 안전하게 제거 할 수 있습니다.

ant는 이미 공식적으로 IE9 + 만 지원합니다.

2017 년 10 월 12 일 목요일 오전 7:58, Andreas Cederströ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 해킹이 포함되어 있는지 확인하십시오.

예:

  /* 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 만 제거하십시오. 감사합니다.

스타일 구성 요소와 개미 형식에 큰 문제가 있습니다. fieldDecorator로 장식 된 양식 구성 요소를 스타일 구성 요소로 스타일이 지정된 래퍼에 래핑하면 양식 필드가 작동을 멈 춥니 다. 이 문제를 정말 이해하지 못하지만 인라인 스타일로 <div> 로 래핑해야 작동합니다. 정말 짜증나 네요 ...

주 선택기 !!!

@malekjaroslav 는 잘못된 사용과 관련이있을 수 있습니다. styled-components repo에 대한 문제를 열어서 도와 드릴 수 있습니까?

@benjycui antd3.0 의 반응 형 도우미에 대해 어떻게 생각하십니까? 이와 같은 https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_display.scss in react

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 Design Specification을 따르는 UI 컴포넌트를 antd에 추가하기 만하면됩니다. 어쨌든 감사합니다 😄

예, ant-design-pro 저장소에서 봤습니다. antd에서 중단 점을 사용하여 래퍼를 만들 것입니다.

이 릴리스를 기대합니다!

안녕하세요 여러분, 방금 [email protected]을 출시 https://github.com/ant-design/ant-design/issues/8233 참조

antd pro 구성 요소가 나올 때만 사용할 수 있기 때문에 새 버전의 출시를 고대하고 있습니다. 아직 월말에 출시 할 계획입니까?

훌륭한 프런트 엔드 구성 요소를 제공해 주셔서 감사합니다. Google의 자료를 능가했습니다.

새로운 antd pro 구성 요소 사용을 시작하는 데 방해가되는이 릴리스에 대해 정말 흥분됩니다. 예상되는 릴리스 기간이 11 월 말입니까?

멋진 라이브러리를 제공 해주셔서 감사합니다. Google 머티리얼 UI를 떠날 것입니다.

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

Ant Design 3.0 출시! 🎉 🎉 🎉

향후 릴리스에서 스타일 구성 요소 / 감정 / 펠라 지원에 +1.