Ant-design: 💥 Ant Design 4.0 está em andamento!

Criado em 31 mai. 2019  ·  182Comentários  ·  Fonte: ant-design/ant-design

Pré-visualizar o site

next.ant.design


Recapitular

Já se passaram 16 meses desde dezembro de 2017, quando Ant Design 3.0 foi lançado. Corrigimos muitos bugs e adicionamos muitos novos recursos ( changelog ) em 4289 commits, 138 lançamentos, 7675 questões e PRs, que nos trouxeram 25375 estrelas no GitHub. Também lançamos o Ant Design Pro 4.0 . Suporte para TypeScript, blocos e abstração de layouts. Queremos agradecer a todos os contribuidores e sua contribuição torna o Ant Design cada vez melhor.

Ao mesmo tempo, lançamos o Ant Design Pro 4.0. Suporte ao componente TypeScript, Block e Provides Layout.

Neste momento, estamos pensando: Ok então, o que vem a seguir? O que podemos fazer para que o Ant Design vá mais longe? É hora de planejar o Ant Design 4.0! 🍻

A seguir está o plano de detalhes sobre 4.0. Podemos ajustar alguns deles, pois ainda está em planejamento.

🌓 Sobre compatibilidade

Removeremos acessórios obsoletos na versão 4.0, o que significa que acessórios obsoletos não serão mais suportados. Se você não estiver recebendo nenhum aviso da versão 3.x mais recente, será fácil atualizar. Caso contrário, haverá uma fase de manutenção de meio ano para o 3.0 após o lançamento do 4.0.

Sabemos que é difícil fazer atualizações. Estamos planejando fornecer um pacote compatível para lidar com isso:

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

Este pacote estará disponível até o final da fase de manutenção 3.x.

Use a API React mais recente

Há muito tempo fornecemos suporte ao React 15. Mas parece não ser necessário a partir do feedback social (há quase 0% dos problemas sobre o React 15), já que o React tem forte compatibilidade. Para dar suporte ao React 15, usamos a nova API com muito cuidado. Isso não será mais um problema depois do 4.0:

  • Fornece API de ganchos para componentes relacionados
  • Suporte ao modo simultâneo (ainda em preparação, continuará o ajuste em 4.0)
  • Abrace React 17 (uau! ~)

Pare o suporte do IE9 / 10

O Ant Design 3.0 despende muito esforço para suportar o IE antigo . Mas de acordo com as estatísticas da indústria, o uso do IE9 / 10 fica cada vez menor com a atualização do Windows. Deixaremos de oferecer suporte ao IE 9/10 no 4.0 (mas ainda ofereceremos suporte ao IE 11), o que significa que o suporte a recursos do navegador mais recentes será possível.

Outra atualização compatível

  • Atualização do Less 2.x para o Less 3.x
  • Ajuste de ícone
  • Menção obsoleta

📦 Reduza o tamanho

Otimize o tamanho do ícone

Usamos o ícone svg ( por que svg? ) Após [email protected] . Usamos o nome da string para mapear o ícone, que não pode ser carregado sob demanda. Importamos todo o arquivo de ícone para o antd, o que torna o pacote grande . Trataremos disso no 4.0.

A forma antiga de uso do ícone será * descontinuada *:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Usará a importação de ícone único em vez do 4.0:

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

Você ainda pode usar a maneira compatível da maneira antiga.

Remover Draft.js

Usamos Draft.js no componente Mention para confirmar a localização do pop-up, mas apenas uma pequena parte da funcionalidade dele é usada. Parece acima do custo. Planejamos remover o Draft.js no 4.0 e usar outra solução leve. Ao mesmo tempo, para distinguir com o componente Menção de origem no 3.0, um novo componente Menções será introduzido para evitar conflito de API. Além disso, ele suporta forma compatível :

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

🧭 Otimização de desempenho

Temos poucos problemas de desempenho para grandes conjuntos de dados da comunidade. Vamos garantir que alguma otimização seja feita aqui.

Rolagem virtual

A rolagem virtual é uma maneira comum de otimizar o desempenho. Estamos planejando oferecer suporte nativo em componentes. Pode não terminar imediatamente na versão 4.0. Irá integrar passo a passo.

Refatorar Animação

Fizemos alguns hack com animação no passado. Funciona bem na maioria dos casos. Planejamos usar a maneira mais pura do React em vez de hackear um. Esta atualização será em silêncio, nada afetará você.

🧩 Otimização de componentes

Adicionamos muitos componentes no 3.0 e continuaremos no 4.0. Esses componentes virão do cenário de negócios, Ant Design Pro e requisitos sociais. O processo de novos componentes será o mesmo do Ant Design 3.0, colocaremos o arquivo de design relacionado no PR e coletaremos no site oficial. Lançamento em cada versão secundária.

Além disso, planejamos refatorar alguns componentes-chave para torná-los mais fáceis de usar. Inclui, mas não só:

Formato

O formulário é um dos componentes mais usados. Percebemos que o social tem muitos comentários sobre o design da API.
Queremos simplificar a API em 4.0:

  • O formulário incluirá armazenamento de dados. Não há necessidade de usar Form.create() mais.
  • Fom.Item incluirá vinculação de campo. Não há necessidade de usar getFieldDecorator mais.
  • Form.Item manterá o valor, mas o validador será desabilitado quando o campo for removido.
const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

No mundo real, encontramos muita comunicação entre formulários (geralmente na configuração de detalhes). Queremos tornar isso mais fácil:

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

Se quiser acompanhar o progresso do formulário, você pode ver aqui .

Mesa

No passado, recebíamos muitos comentários da Mesa . Sabemos que expandir e rolar adereços não funcionam bem juntos. Desta vez, vamos nos concentrar em corrigi-lo. Além disso, faremos muito na otimização da Tabela. E uma maneira fácil de fazer o layout:

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

antd4-table

Também planejamos adicionar o rodapé de resumo para oferecer suporte à linha de resumo.

Novo DatePicker

DatePicker atual satisfaz a maioria dos requisitos. Mas, a partir da discussão da discutir ). Além disso, atualizaremos o estilo de design DatePicker para aprimorar a experiência do usuário.

🚀 Continue atualizando

Além do conteúdo acima, também planejamos fazer algumas atualizações contínuas. Eles continuarão sendo atualizados na versão 4.0 para aprimorar o desenvolvimento e a experiência do usuário.

🧶 Melhorar a acessibilidade

Ant Design 3.0 tem suporte limitado para acessibilidade, planejamos ajustar a estrutura do dom e adicionar mais marcas de ária para aprimorar a experiência do leitor de tela. Além disso, também nos preparamos para otimizar a interação do teclado.

🎯 Padrão API do desenvolvedor

Descobrimos que alguns estilos de nomenclatura de API são um pouco diferentes de outros. Não é um problema para o desenvolvedor do Typescript, mas é difícil lembrar o contrário.
Portanto, criaremos um documento padrão de nomenclatura que inclui APIs atuais e regras de nomenclatura relacionadas. No novo recurso, seguirá a regra de nomenclatura para evitar conflito de nomenclatura da API. Além disso, agradecemos as opiniões da comunidade sobre isso no PR.

💼 Modo React Strict

Se você tentou envolver o componente antd com <React.StrictMode> , você receberá um aviso. Já substituímos alguns componentes por um novo método de ciclo de vida. Este trabalho continuará no 4.0.

💡 Melhore a experiência do desenvolvedor

No passado, descobrimos que alguns problemas ocorrem repetidamente. De alguma forma, esses problemas são questões de uso. Achamos que podemos fazer algo sobre isso (na verdade, já começamos no 3.0). No ambiente de desenvolvimento, avisaremos o status inesperado (como invalidar objeto Moment, ajuste de prefixo / afixo causar alteração na estrutura dom, etc.). Acreditamos que o console é o primeiro lugar para focar ao encontrar o problema. Fornece dicas adequadas que podem ajudar a encontrar o problema. Ao mesmo tempo, iremos resumir outras questões em FAQ de cada documento de componente. Do lado da manutenção, não podemos ajudar em cada questão de uso, mas elas existem, principalmente com novos desenvolvedores. As perguntas frequentes podem ajudar a economizar muito tempo de pesquisa. Se você tiver interesse nisso, seja bem-vindo para ajudar a aprimorar a experiência do desenvolvedor conosco.

🐱 Recurso de Design

Ant Design não é apenas uma biblioteca de componentes. Design é o poder de suporte. Vamos sincronizar a atualização do recurso de design (pacote de componentes Sketch, ferramentas de cozinha, Design Token, etc.) Também ajustaremos o estilo do componente atual para aprimorar a experiência do usuário.

Milestones

Aqui está o nosso plano de marcos. Criaremos um problema relacionado no Github. E também contribuidor social bem-vindo:

2º trimestre

  • Marque a API relacionada como Obsoleta e remova-a do documento.
  • Atualização de aviso de componente de baixo nível.

3º T

  • Crie um branch antd 4.0 e atualize o documento.
  • Desenvolvimento de componentes.

Q4

  • Versão Ant Design 4.0.

Bem vindo a bordo

Manteremos você informado durante o processo de desenvolvimento. O conteúdo acima pode não ser definitivo. Pensamentos / conselhos da comunidade serão mais do que bem-vindos! Vamos tornar o Ant Design 4.0 melhor!


introdução

Já se passaram 16 meses desde o lançamento do Ant Design 3.0 em dezembro de 2017. Durante este período, corrigimos um grande número de bugs e adicionamos um grande número de novos recursos ( log de atualização ). Enviou 4289 commits, lançou 138 versões, fechou 7675 edições e PRs e adicionou 25375 estrelas. Também lançamos o Ant Design Pro 4.0 . Suporta TypeScript, bloqueia e abstrai o layout. Gostaríamos de agradecer a todos os voluntários da comunidade por sua dedicação em tornar o Ant Design mais utilizável.

Ao mesmo tempo, também estamos pensando em qual é o próximo passo e como fazer o Ant Design ir mais longe. Esperamos lançar a versão do Ant Design 4.0 no quarto trimestre deste ano . 🍻

A seguir está um plano detalhado para 4.0, claro que isso ainda está sendo planejado. Pode haver ajustes durante o lançamento oficial.

🌓 Ajuste de compatibilidade

Removeremos os atributos marcados como obsoletos no 4.0. Nesse momento, você não poderá mais usar o método abandonado. Se você atualizar seu projeto para a versão 3.x mais recente e não vir a mensagem de aviso do antd no console, a atualização para a versão 4.0 também será perfeita. Para a versão 3.x, ainda faremos mais seis meses de trabalho de manutenção após o lançamento 4.0.

Sabemos que a versão de atualização tem muita energia para abandonar a API obsoleta. Pretendemos fornecer um pacote compatível para auxiliar na transição do projeto ao lançar o 4.0 (a API relacionada ainda está em desenvolvimento e pode ser diferente quando for lançada oficialmente):

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

O pacote de compatibilidade também permanecerá atualizado até que o trabalho de manutenção 3.0 pare.

Use a versão mais recente da API React

Há muito tempo que apoiamos a versão do React 15, mas, a partir do feedback da comunidade, isso não é importante (o número do problema do React 15 está se aproximando de 0%). Porque o próprio React tem uma compatibilidade muito robusta. Para oferecer suporte ao React 15, somos muito cuidadosos quanto ao uso de novas APIs durante o processo de desenvolvimento. Após a versão 4.0, usaremos a versão mais recente do React como referência para o desenvolvimento:

  • Fornece a versão Hooks de componentes relacionados
  • Suporte ao modo simultâneo (é claro, há mais coisas a serem preparadas e continuarão a ser ajustados na versão 4.0).
  • Abraço React 17 (uau! ~)

Pare o suporte do IE9 / 10

Ant Design 3.0 fez muitos esforços para ser compatível com a versão antiga do IE . No entanto, de acordo com estatísticas da indústria, a participação global e doméstica do navegador IE9 / 10 está diminuindo com a atualização do sistema Windows. Na versão 4.0, deixaremos de oferecer suporte ao IE 9/10 (mas ainda ofereceremos suporte ao IE 11). Isso também significa que é possível oferecer suporte a novos recursos do navegador.

Outros ajustes de compatibilidade

  • Atualize de Less 2.x para Less 3.x
  • Mudança de uso de ícone
  • Mencione obsoleto

📦 Reduza o volume

Otimize o tamanho do ícone

Em [email protected] , introduzimos o ícone svg ( por que usar o ícone svg? ). A API para definir ícones com nomenclatura de string é usada. Com este design, não podemos carregar sob demanda. Portanto, introduzimos todos os arquivos de ícone svg, o que aumenta muito o tamanho do produto embalado. No 4.0, vamos ajustar isso para otimizar o volume.

A versão antiga do uso do ícone ficará obsoleta :

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Na versão 4.0, um método de introdução sob demanda será adotado:

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

Você ainda poderá continuar usando o método compatível acima.

Remover Draft.js

Introduzimos Draft.js no componente Mention para implementar a função de posicionamento de prompt suspenso, mas usamos apenas uma pequena parte de sua função. Considerando o desempenho de custo, parece um desperdício. Planejamos remover a dependência dele no 4.0 e mudar para uma solução mais leve. Ao mesmo tempo, a fim de distinguir os componentes Mention no 3.0, iremos fornecer um novo componente Mentions para evitar conflitos de API. Da mesma forma, também suporta o uso contínuo dos métodos compatíveis acima:

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

🧭 Otimização de desempenho

Durante o processo de manutenção, recebemos muitas discussões de

Pergaminho virtual

A rolagem virtual é um método de otimização comum, mas devido aos efeitos de animação no Ant Design, não é tão fácil personalizar a rolagem virtual. Agora, planejamos oferecer suporte nativo à rolagem virtual em componentes com rolagem. Obviamente, não garantimos que todos os componentes foram atualizados quando o 4.0 for lançado e continuarão a ser atualizados.

Melhorias de animação

No passado, usamos alguns hacks para processar animações. Na maioria dos cenários, funciona muito bem. No 4.0, planejamos ajustar isso e abandonar a abordagem de hack para um caminho mais React. O ajuste será atualizado silenciosamente, você não precisa fazer nenhuma alteração nele.

🧩 Sobre componentes

No 3.0, continuamos a adicionar muitos componentes. No 4.0, continuaremos. Esses componentes serão refinados a partir de nossos cenários de negócios, do Ant Design Pro e das necessidades da comunidade. Este é um processo contínuo. O processo de adição de novos componentes é o mesmo do Ant Design 3.0. Vamos precipitar os rascunhos de design dos componentes relacionados e exibi-los no PR e atualizá-los com o site oficial. Após a conclusão do desenvolvimento, eles serão lançados na versão secundária mensal.

Além disso, também estamos nos preparando para refatorar alguns componentes-chave para melhorar a facilidade de desenvolvimento e interação. Inclui, mas não está limitado a:

Componente de formulário

O público de componentes de formulário é muito grande. Também notamos as reclamações da comunidade sobre a API complicada de formulários. Na versão 4.0, esperamos explorar formulários de API melhores para simplificar os custos de desenvolvimento:

  • O formulário agregará campos de dados do formulário por padrão, e você não precisa mais criar contexto por meio de Form.create() .
  • O Fom.Item agregará os campos do formulário por padrão, você não precisa vincular o campo via getFieldDecorator .
  • O valor de Form.Item sempre será retido, mas sua função de validação só terá efeito quando o item de formulário estiver visível.
const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

Na cena real, encontramos a cena de ligação multiforma (comum na configuração detalhada). Sabemos que não é conveniente usar isso, então também forneceremos a função de ligação entre os formulários:

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

Se você deseja acompanhar o andamento do Formulário, seja bem-vindo para verificar o andamento .

Componente de mesa

Na versão anterior, recebemos muitos comentários sobre o componente Tabela . Sabemos que as propriedades de expansão e rolagem da Tabela não funcionaram bem no passado. Desta vez, vamos nos concentrar na resolução de conflitos nessa área. Além disso, otimizaremos ainda mais o desempenho do componente Tabela. E explore alguns métodos de layout de tabela mais simples:

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

antd4-table

Além disso, também planejamos adicionar o rodapé de resumo para atender aos requisitos de resumo.

DatePicker refeito

O DatePicker existente atendeu à maioria das necessidades, mas a partir da discussão da discussão ). Além disso, ajustaremos o estilo dos seletores de data e hora relacionados para reduzir ainda mais o custo cognitivo dos usuários.

🚀 Atualizar continuamente

Além do conteúdo acima, também planejamos continuar atualizando parte do conteúdo. Isso será seguido no 4.0 para melhorar melhor o desenvolvimento e a experiência do usuário.

🧶 Melhorar a experiência de acessibilidade

O Ant Design 3.0 carece de suporte para experiência de acessibilidade. Por esse motivo, planejamos ajustar a estrutura do componente e adicionar mais tags aria para melhorar a experiência de leitura de tela. Além disso, também estamos nos preparando para otimizar os métodos existentes de interação com o teclado do componente para garantir uma melhor experiência completa de interação com o teclado.

🎯 Especificação da API do desenvolvedor

No decorrer da evolução, descobrimos que alguns estilos de API pareceriam incompatíveis com outros componentes. Para usuários do TypeScript, isso não é um problema, mas para outros usuários, pode causar problemas de memória.

Portanto, iremos compilar um documento de nomenclatura padrão. O documento conterá uma lista de APIs existentes e convenções de nomenclatura apropriadas. Ao adicionar novos recursos, eles também serão nomeados de acordo com esta especificação. Para evitar possíveis diferenças de API no futuro. Claro, também damos as boas-vindas aos alunos da comunidade para dar feedback em RP.

💼 Modo estrito de reação

Se você tentar envolver <React.StrictMode> fora do componente antd, obterá muitas mensagens de aviso do componente antd. Atualizamos os métodos de ciclo de vida de alguns componentes no 3.0. No 4.0, continuaremos.

💡 Melhore a experiência do desenvolvedor

No processo de manutenção anterior, descobrimos que certos problemas apareciam alternadamente. Esses problemas são comuns em algumas especificações de uso ou cenários de aplicativo. Para isso, decidimos fazer melhorias aqui (na verdade, desde o 3.0, estamos melhorando). No ambiente de desenvolvimento, solicitaremos no console algumas situações inesperadas (como objetos Moment inválidos, alterações na estrutura Dom causadas pelo ajuste dinâmico do prefixo / afixo de entrada, etc.). Estamos convencidos de que o console é o primeiro lugar ao qual os desenvolvedores prestarão atenção ao encontrar um problema e fornecer dicas apropriadas aqui pode ajudar a localizar o problema rapidamente. Ao mesmo tempo, para alguns usos ou cenários especiais. Forneceremos perguntas frequentes na documentação do componente correspondente. Do ponto de vista da manutenção do projeto, nossa energia não é capaz de fornecer respostas detalhadas para a questão do uso. Mas essas perguntas são reais, especialmente para desenvolvedores iniciantes, um FAQ pode ajudar a economizar muito tempo de pesquisa. Se você estiver interessado, os voluntários da comunidade também são bem-vindos para ajudar a melhorar a experiência do desenvolvedor.

🐱 Gerenciamento de ativos de design

O Ant Design não é apenas um conjunto de bibliotecas de componentes, mas também um poderoso sistema de design por trás dele. No 4.0, iremos atualizar os ativos mais recentes relacionados ao design (pacote de componentes Sketch, conjunto de ferramentas de cozinha, Design Token, etc.) para facilitar os designers e alunos interessados ​​no design como referência. Os estilos de design de componentes existentes também serão ajustados para melhorar os efeitos visuais e a experiência do usuário.

Plano de tempo

A seguir está nossa programação, na qual algumas atualizações de componentes estão em andamento. Criaremos questões relacionadas no github e daremos as boas-vindas a voluntários da comunidade para participar:

2º trimestre

  • Marque a API obsoleta necessária como obsoleta e limpe-a no documento.
  • Os componentes subjacentes são pré-aquecidos.

3º T

  • Estabeleça um branch antd 4.0 e atualize a documentação.
  • Desenvolvimento de componentes de baixo nível.

Q4

  • Versão 4.0 de lançamento.

Bem vindo a participar

Durante o processo de desenvolvimento 4.0, o conteúdo acima pode ser ajustado. Bem-vindos, estudantes da comunidade, para fornecer idéias e sugestões valiosas, vamos tornar o Ant Design 4.0 mais conveniente e fácil de usar!

4.x ✨ Announcement 🕙 Plan 🗣 Discussion

Comentários muito úteis

15311

Vamos substituir o Moment.js na versão 4?

Todos 182 comentários

15311

Vamos substituir o Moment.js na versão 4?

Ótimo, mal posso esperar para fazer upgrade

Preparação alfa V4

Principalmente Alvo

  • [x] ramo v4
  • [x] Pacote compatível
  • [x] Remover conteúdo obsoleto

    • [x] Componente de menção

    • [x] Novo componente de menções # 16532

    • [x] Form.create

    • [x] Ícone com type # 12011

    • [x] Outro com adereços de aviso obsoletos

  • [x] Menos v3
  • [x] Performance

    • [x] rc-animate upgrade

    • [x] suporte de modo simultâneo

    • [x] Suporte para animação de rolagem virtual

    • [x] Pergaminho Virtual

    • [x] componente rc

    • [x] Árvore

    • [x] Selecione

    • [x] TreeSelect

    • [x] Formulário: https://github.com/react-component/form/pull/292

    • [x] Fornece a versão Hooks

    • [x] Mesa

    • [] templateAreas

    • [x] Apoie expand & scroll co-work

  • [x] DatePicker com novo design

    • [x] Seletor de ano

    • [x] RangePicker.YearPicker

    • [x] RangePicker.MonthPicker

    • [x] RangePicker.YearMonthPicker

    • [x] RangePicker.WeekPicker

    • [x] TimePicker.RangePicker

Continuar Alvo

  • [] Acessibilidade
  • [x] padrão API
  • [] React.StrictMode

Aqui estão algumas sugestões sobre o Ant 4

Sobre templateAreas

templateArea analisa string em tempo de execução, isso causará erros de análise inesperados ou erros lentos quando a string for digitada. A análise em tempo de execução também não é amigável para o TypeScript. O Ant Team considera a proposta abaixo:

const columnTemplate = [
  ['name', 'address', 'adress'],
  ['name', 'building', 'no']
]

Sobre dependência

O Ant Team consideraria remover a dependência de moment ?

Moment é muito grande para o projeto de front-end, existem muitas alternativas, mas TimePicker e DatePicker props retransmitem no Moment. Isso nos leva a não poder substituir moment por date-fns ou outra biblioteca menor do que Moment.

Sobre o ícone

Eu acho que a maneira que os Ant Icons usados ​​agora não devem ser descontinuados, a nova maneira que o ícone de importação pode causar uma mudança comum no pacote quando eu adicionar ou remover um ícone.

O Ant Team pode fornecer duas maneiras de usar ícones do Ant:

  1. Empacote todos os ícones em um jsfile, os desenvolvedores podem importar o arquivo inteiro usando a tag <script> e definir externals no webpack.
  2. A nova forma que apresentamos acima.

这 是 我 对 Ant4 的 一些 建议

关于templateAreas

templateAreas在 运行 时 对 字符串 进行 解析, 当 字符串 出现 拼写 错误 的 时候, 可能 会 导致 解析 失败 或者 或者 错误。 运行 时 解析 对 TypeScript 也不 友好 。Ant 团队 是否 考虑 如下 方案.

const columnTemplate = [
  ['name', 'address', 'adress'],
  ['name', 'building', 'no']
]

关于 依赖

是否 考虑 移除 对 Momento 的 依赖?

Momento 对于 前端 项目 来 时 实在 是 太大 了, 市面上 有 许多 可供 替代 的 库 , 但是TimePickerDatePicker的 参数 依赖 于 Momento 对象 , 这 导致 了 我们 没 办法. date-fns或者 一些 比 Momento 更 小 的 库 来 替代 Momento。

关于 图标

我 认为 当前 使用 Ant 图标 的 方式 不 应该 被废弃。 新 的 使用 方式 在 我 新增 或者 删除 一个 一个 图标 引用 的 时候, 可能 会 导致 公共 chunk 反复 变更.

Formiga 团队 可以 提供 如下 两种 方案 来 使用 Formiga 图标:

  1. 打包 所有 图标 到 一个 js 文件 中, 开发 者 通过<script>标签 引用 全部 图标 , 并且 在 Webpack 中 设置 为externals
  2. 4.0 新 介绍 的 图标 使用 方式

Algum plano para oferecer suporte a rolagem virtual para mesa? A tabela infinita é preferida em alguns casos, em vez da paginação.
E como 'Comentário' está incluído no 3.11, talvez ChatBox e ChatMessage?

Algum plano para oferecer suporte a rolagem virtual para mesa? A tabela infinita é preferida em alguns casos, em vez da paginação.
E como 'Comentário' está incluído no 3.11, talvez ChatBox e ChatMessage?

UserInfo talvez prioridades.

cerca de templateAreas

Eu também suporte a sintaxe de matrizes bidimensionais
Também suporte a sintaxe de matrizes bidimensionais.

Com relação ao templateAreas, aqui está um exemplo de verificação estática
Este é um exemplo de verificação estática de tipo usando ts para templateAreas

interface Cell<T extends string = string> {
  key: T;
  title: string;
}

interface Config<K extends string = string> {
  header: {
    templateAreas: ReadonlyArray<ReadonlyArray<K>>;
    cells: ReadonlyArray<Cell<K>>
  };
}


declare function check<T extends string>(config: Config<T>): void;

const config = {
  header: {
    templateAreas: [
      ['name', 'address', 'address'],
      ['name', 'building', 'error'],
    ],
    cells: [
      { key: "name", title: "Name" },
      { key: "address", title: "Address" },
      { key: "building", title: "Building" },
      { key: "no", title: "No" }
    ]
  }
} as const;

check(config);

Parque infantil

image

impressionante

15311

Vamos substituir o Moment.js na versão 4?

Acho que o principal problema para sair de moment é interromper a mudança em torno de locale s. https://github.com/ant-design/ant-design/issues/15311#issuecomment -471383811

Espero que o suporte para texto digitado possa ser melhor

Ótimo, visto que 4.0 está em andamento! Tenho algumas sugestões abaixo para consideração, não tenho certeza se elas se encaixam no padrão de design, mas para personalizabilidade, seriam ótimas na minha opinião.

  • Ser capaz de controlar a cor de fundo de uma linha em <Table> . Por exemplo, colorir uma linha como laranja para destacar o aviso para essa linha.
  • Cores dos botões, não foram encontradas discussões anteriores sobre isso. Mas seria ótimo poder ter uma API semelhante a <Tag color="red">RED<Tag /> para botões, exemplo <Button color="red">Red Button<Button/> .
  • Suporte para ícones Font-Awesome 5.x nos diferentes componentes, ou certifique-se de que eles funcionarão com o outro trabalho de Ícone em andamento. Tenho notado alguns problemas de alinhamento ao usar FA em vez do componente nativo <Icon> .
  • O componente <Pagination> não suporta o fornecimento direto da quantidade de páginas, o caso de uso é que eu tenho apenas a quantidade de páginas e a página atual disponível para mim, por exemplo, mas não quantos itens em cada página. Ainda não encontrei uma boa maneira de lidar com isso.

@orecus

Por exemplo, colorindo uma linha como laranja para destacar o aviso para essa linha

Eu tendo a usar rowClassName para anexar uma classe a esta linha e então substituir o estilo padrão com css.

ocomponente não suporta o fornecimento da quantidade de páginas diretamente

Pode passar um total falso. Por exemplo, se você quiser 50 páginas, pode passar total = pageSize * 50 .

Essa é realmente uma boa notícia 🚀 O foco no desempenho é visível e isso é ótimo, porque alguns componentes não podem ser usados ​​com grandes quantidades de dados.

Como você deseja implementar a rolagem virtual? Usando react-window ?

Existem prioridades para recursos de destino Principalmente?
Eu gostaria de experimentar a seleção virtual no estágio alfa e acho que não estou sozinha com relação a isso.

Obrigado.

Por que o nome da string não pode ser carregado sob demanda? não reage preguiçoso () resolve o problema?

@faradaytrs
Sim, mas depende das características de webpack , operações específicas

Dois problemas são mais proeminentes

  • /* webpackChunkName: "icons/icon-" */ escrito por webpack Magic Comments
  • Como dizia o original, "Cada ícone contém informações adicionais do módulo Webpack, além do conteúdo do ícone"

Alguma ideia sobre a poluição de estilo global? # 4331 # 9363

Alguma ideia sobre a poluição de estilo global? # 4331 # 9363

IMHO seria ótimo para o 4.0 permitir que os usuários definissem estilos antdesign sob um nome global (veja meu comentário https://github.com/ant-design/ant-design/issues/4331#issuecomment-396047487)

Ótimo saber sobre o próximo marco!

Meu 2 Ct. em relação a documentos e simplificação:

Freqüentemente, há props passados ​​para os elementos DOM subjacentes, que não são documentados (IIRC em alguns casos, todos os props que não são selecionados pela implementação do componente são passados). Seria muito útil tê-los documentados, agrupados por elemento de destino (pode haver mais de um): "Os seguintes adereços são passados ​​para o contêiner

"ou" Os seguintes adereços são passados ​​pelo elemento ... "ou" Todos os outros adereços são passados ​​para ... ". Para esses adereços, não há necessidade de explicação detalhada, links para MDN podem ser suficientes.

Essa mudança também seria ótima para nós, desenvolvedores de TypeScript; atualmente, é um trabalho muito tedioso manter a definição de TS atualizada a esse respeito.

No "padrão API do desenvolvedor", isso deve ser documentado e deve haver uma decisão sobre quais props sempre devem ser passados ​​(className, id,?)

Outra pergunta:

Você está planejando trocar mais arquivos (ou mesmo componentes rc) de JavaScript com definições de TypeScript para TypeScript nativo?

Considere substituir o rc-form por algo mais flexível, como Formik.

Pergunta para os mantenedores:

Minha equipe está interessada em experimentar o Ant, mas https://github.com/ant-design/ant-design/issues/11097 (Antd Less cria vazamentos globais de JavaScript) está nos bloqueando. O roteiro acima diz que o Ant será movido para a versão 3 do LESS, e eu li que o recurso JavaScript embutido inseguro e obsoleto em questão está desabilitado por padrão. Isso significa que o Ant versão 4 não terá mais o problema MENOS?

Não apenas o IE9 / 10, mas pare o suporte do IE,

Nossa, seria muito útil não poluir estilos globais ( html , body , *::before , ...)

Carrossel baseado em react-slick apresenta muitos problemas ao usá-lo. Recomenda-se que a nova versão possa ser substituída por outra biblioteca
react-pannable é muito bom de usar

A descrição dos commits desta biblioteca @cztflove é toda no message 😃, e a atenção da comunidade é muito baixa, eu não deveria considerar isso.

@ yoyo837 Principalmente este componente é novo, então a atenção é relativamente baixa, mas ele suporta virtual list e 仿ios边缘弹性 , e algumas funções 拖拽 podem ser realizadas com base neste componente.🤔 Há mais espaço para expansão no futuro

Não deveríamos migrar para um idioma universal?

Eu concordo e respeito totalmente os idiomas regionais, mesmo não sendo um falante nativo de inglês. Existem centenas de tarefas repetitivas, ou melhor, duplicadas, com linguagem dupla, acima de tudo o fator mais importante é o tempo, traduzindo strings discutidas, aprendendo com a documentação ou tuts. demos etc.

Devo admitir, não faltam colaboradores devido a conflitos de idioma, ainda centenas de nós com medo de se envolver. Já existem muitos sprints, problemas em andamento para tradução, mas o que eu peço é, migrar completamente para um idioma universal com este grande lançamento para reduzir a lacuna de comunicação entre todos nós.

Não deveríamos migrar para um idioma universal?

Eu concordo e respeito totalmente os idiomas regionais, mesmo não sendo um falante nativo de inglês. Existem centenas de tarefas repetitivas, ou melhor, duplicadas, com linguagem dupla, acima de tudo o fator mais importante é o tempo, traduzindo strings discutidas, aprendendo com a documentação ou tuts. demos etc.

Devo admitir, não faltam colaboradores devido a conflitos de idioma, ainda centenas de nós com medo de se envolver. Já existem muitos sprints, problemas em andamento para tradução, mas o que eu peço é, migrar completamente para um idioma universal com este grande lançamento para _reduzir a lacuna de comunicação_ entre todos nós.

说得 对 , 专心 说 中文 吧

Pergunta para os mantenedores: há planos de usar vars CSS para alterar a cor e os temas de estilo durante o voo?

Aprendi na prática que alterar estilos de componentes por meio de variáveis ​​é uma maneira muito confortável. Tentei reescrever as variáveis ​​Less com var(--css-vars) , mas encontrei muitos erros nas compilações de estilo, porque muitos estilos usam funções e operações com vars, não apenas valores. Suponho que seja uma grande tarefa e, desta forma, criar alterações interruptivas, mas as versões principais foram criadas para alterações interruptivas :) E o uso de vars CSS pode dar muitas oportunidades para personalização de estilos de componentes.

O que você acha disso? Eu planejei desenvolver o tema com o uso de vars CSS como solicitação de pull de qualquer maneira, pois esse recurso (alterar o tema durante o voo) é necessário em meu projeto.

Desculpe, se essa sugestão é duplicada, mas não encontrei nada sobre isso em outras edições e PRs.

@ Z3SA https://caniuse.com/#search = CSS% 20Variables. Isso precisa parar todo o suporte do IE, parar o suporte do IE11 é muito radical, embora eu também apoie isso.

@ yoyo837 , concordo que é uma causa muito radical de problemas de suporte do IE. Mas também o Ant Design tem suporte oficial (conforme informado no ant.design) do Electron (como plataforma separada, não web). Pode ser que neste caso haja uma maneira de criar dois temas: um com Less vars, outro com CSS vars. Mas parece muito difícil de suportar.

Então, outra estratégia possível que eu suponho - criar Less vars para todos os atributos personalizáveis ​​em Less, ou remover o uso de quaisquer funções e operações em Less vars que qualquer desenvolvedor pode usar como entrada para seus vars CSS. Ou se for mais simples - use Less vars apenas como contêiner de valor, não para funções e operações.

Se apenas suportar os principais navegadores, acredito que o tamanho do código será menor e o código será mais fácil de manter.

Não apenas o IE9 / 10, mas pare o suporte do IE,

@wanliyunyan Muito quebrando. Alguns desenvolvedores podem manter o antd @ 3 e isso não é bom para nós.

@ Z3SA Será um trabalho enorme.

@dancerphil Felizmente, considero apenas a versão mais recente do Chrome para o meu projeto. 😃 Portanto, espero que quanto menor o tamanho, melhor.

@ yoyo837 Eu sei disso. E eu mesmo farei isso, se essa ideia não chamar a atenção o suficiente.

Somos uma empresa que adoraria migrar gradualmente para o Antd usando componentes individuais; No entanto, o uso de estilos globais pelas formigas realmente complica esse problema. Por favor, pare de poluir estilos globais.

O formulário é um dos componentes mais usados. Percebemos que o social tem muitos comentários sobre o design da API. Queremos simplificar a API em 4.0:

Fom.Item incluirá vinculação de campo.

Essas mudanças ainda nos permitirão usar Form.Item como um componente estritamente de apresentação? Eu amo os componentes do Antd, mas prefiro a forma final de reação para gerenciamento de estado. Eu quero o estilo de Form.Item e nada da lógica de gerenciamento de estado.

branch 4.0 é criado. Quando posso visualizar

o novo componente de formulário é incrível!

Substitua momentjs por dayjs, pois momentjs é enorme e o tamanho do pacote também aumentou.

Há alguma armadilha em assumir o controle do editor de rich text?

Qual é a data de lançamento?

@rafaelodassi Não há data confirmada ainda, mas provavelmente no quarto trimestre.

Atualizar para @babel/runtime@7 e core-js@3 também seria nossa prioridade.

Não é v3? Há alguma notícia para core-js@4 ?

Todo mundo falando sobre a remoção do suporte ao IE porque as estatísticas mostram que ele quase não é usado. Que tal os milhões de usuários corporativos por trás da intranet que não entram nas estatísticas de forma alguma? Eles estão presos ao IE10 e ao IE11 por causa das políticas corporativas.

Vou ficar com o antd @ 3 se o suporte ao IE11 for

Eu sugeriria a introdução de uma API para permitir o uso de objetos como valores <Select/> .
para obter detalhes, consulte https://github.com/ant-design/ant-design/issues/13485

cc @zombieJ

Recomenda-se que cada componente tenha seu próprio log de atualização. Não importa se você o mantiver escondido, sugestão pessoal ~

Quando o Release ou RC pode ser possível?

Recomenda-se que cada componente tenha seu próprio log de atualização. Não importa se você o mantiver escondido, sugestão pessoal ~

Combine se a documentação de cada componente pode ser adicionada por qual versão. Caso contrário, você pode ver a documentação e ver se a versão atual pode ser usada e se deseja atualizar as dependências.

Enviado com GitHawk

@ fwh1990 @ jas0ncn @redclown
em inglês, por favor)

Mantenha-o como um canal em inglês, obrigado ~

4.0 alpha foi publicado. Isso é incrível. Vamos irmão.

Vou refatorar meu projeto assim que publicar a versão

O tema padrão de antd é lindo, mas também pode ser melhor.
Para facilitar a leitura, considere aumentar o contraste e usar um texto maior.

Existem tantos artigos e ferramentas.
https://www.google.com/search?q=web+readability

É melhor fornecer um script para migrar antd v3 para v4.

No projeto de negócios, existem muitos componentes de formulário. Migrar antd v3 para v4 terá um custo muito alto.

A equipe react-relay fez algo semelhante.
Se você deseja migrar react-relay v3 para o react-relay v4 Realease , você precisa modificar muitos arquivos.
Portanto, eles usam jscodeshift para escrever um script de migração, de modo que o usuário de react-relay possa facilmente migrar react-relay v3 para v4.

Eu sinto que é difícil modificar alguns estilos. Então, se houver um plano para melhorar isso?

Eu pessoalmente prefiro usar CSS-in-JS, é muito flexível e incrivelmente bem ajustado ao React.

Ao usar o componente de classe em 4.0 alpha, a entidade do formulário não pode ser obtida, https://5d403395cd145c0008eea971--ant-design.netlify.com/components/form/v3-cn O código de amostra neste link não pode ser implementado e não há entidade no formRef método

Resolvido em

@ Kwei9 , você pode abrir um problema e anexá-lo para reproduzir?Deixe-me ver

@ Kwei9 , você pode abrir um problema e anexá-lo para reproduzir?Deixe-me ver

A redação do ref foi alterada para esta solução

Acho que agora é a hora de abordar a poluição de estilo global! Isso faz com que seja muito necessário usar o antd ao lado de outros aplicativos!

O momento é muito grande para o projeto de front-end, há muitas alternativas, mas os adereços do TimePicker e DatePicker retransmitem no Moment. Nos leva não pode substituir o momento ...

@ jas0ncn Olá, considere substituir momentjs por dayjs (uma alternativa de 2kb). Este já é um problema testado de Replace Moment.js no Ant Design (Antd) com Day.js https://github.com/iamkun/dayjs/issues/529 e funciona muito bem.

Como mantenedor principal do dayjs, estamos dispostos a oferecer qualquer ajuda com essa substituição.

Obrigado.

请 考虑 使用 轻 量 的 Dayjs 来 替换 moment.js , 在 这里 已经 充分 测试 过 替换 的 可行性https://github.com/iamkun/dayjs/issues/529

A forma antiga de uso do ícone será * descontinuada *:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Usará a importação de ícone único no 4.0:

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

Tenho uma ideia sobre a nova referência de ícone. Devido ao novo texto acima, cada ícone é equivalente a um componente separado. Por exemplo, a introdução de um ícone de carregamento pode ser assim:

import Loading from 'antd/icons/Loading';

<Loading />

Mas geralmente você mesmo pode encapsular um componente de carregamento real. No passado, <Icon /> sabia que era um ícone à primeira vista. Agora ele ocupa muitos nomes e eu quero saber se o ícone deve subir para encontrar o local de importação.
tal como:

<Title />
<Loading />
<Sun />  

À primeira vista, parece que os dois seguintes não podem ser vistos como ícones (claro, não tem efeito no código em execução ~)
Se você mudar para o seguinte texto:

 import {Icon} from 'antd';
 import {Loading, Sun} from '@antd/icons';  

<Icon spec={Loading}  {...otherProps}/>
<Icon spec={Sun} />

Através da camada externa do pão, ela se parece muito com a anterior, e também pode ser usada sob demanda, nada mais que a introdução de um componente Icon.
E se certas convenções forem atendidas, o ícone definido pelo usuário pode ser passado por meio do atributo spec? É equivalente a antd ajudar a definir muitos ícones antecipadamente, mas os definidos pelo usuário são exatamente os mesmos ~~~ (Basta dizer ~)

ps: Ou será que esse tipo de escrita já foi pensado há muito tempo ou não pensei nisso porque esse tipo de escrita tem alguns problemas? . . 😂
Eu apenas pensei sobre isso. . .

@ppbl é semelhante ao seguinte de acordo com a sua ideia:

import Icon from '@antd/icons'; 
imoort { LoadingOutline } from '@antd/icons-svg';

<Icon component={LoadingOutline}  {...otherProps}/>

O novo ícone também é gerado de forma semelhante, consulte https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/icons/AccountBook.tsx

Podemos evitar essa situação adicionando o prefixo / sufixo do ícone ao nome do ícone?

imoort { LoadingOutlineIcon } from '@antd/icons';

<LoadingOutlineIcon  {...otherProps}/>

Por favor, trabalhe para reduzir o tamanho do pacote
https://github.com/ant-design/ant-design/issues/9419
Ao importar Button adiciona 95kb ao projeto - isso é simplesmente inaceitável em 2019. 👎

@vagusX Talvez eu apenas ache que o nome seja um pouco longo? Eu sempre acho que o nome é conciso e parece um componente pequeno ou relativamente único.O nome é muito longo e deveria ser um componente grande (claro que isso é um sentimento errado ~ eu sei). . ~

Claro, se eu soubesse que era um ícone só porque queria ver <Icon /> , também poderia fazer um componente <Icon /> sozinho e, em seguida, embrulhar o ícone antd ao usá-lo. O efeito é quase o mesmo. ~ Sinto que são todos ícones e são na verdade um monte de nomes espalhados. Parece um pouco estranho. A diferença é que eu sabia que era um ícone primeiro, e então eu sabia que tipo era. Agora eu sei o tipo primeiro, então eu sei, oh, é um ícone ~

@ avalanche1 você pode dar uma olhada no resultado da análise do pacote deste pr https://github.com/ant-design/ant-design/pull/18217#issuecomment -520683838, e o tamanho do componente Button declina claramente

Bom saber. Mas nas suas capturas de tela não há indicação do tamanho real, então não posso confirmar nem contestar.

Vou migrar o Form para novas APIs, mas descobri que a versão do field-form é instável, então gostaria de saber se haveria mudanças significativas com essas interfaces agora no futuro.

@orzyyyy ,
e liberar a versão 4.0-alpha.x para voluntários sociais e internos testá-la. Se não houver feedback negativo da versão alfa, esta API será a final no lançamento.

@ avalanche1 @ant-design/icons v4-alpha versão suporta a agitação de árvores, então o tamanho do pacote depende de quantos ícones você usou em seu próprio projeto, se você usa um componente antd que importa ícones internamente ou você usa @ant-design/icons diretamente, então talvez eu não consiga entender sua preocupação sobre esse ponto.

Por que estamos falando de ícones quando minha postagem inicial era sobre Botão, Calendário e outros componentes? https://github.com/ant-design/ant-design/issues/9419

O valor DatePicker deve ser o momento, pode ser removido o momento? Se eu atualizar o de, devo converter para o momento

Para moment , aqui está minha consideração. DatePicker ainda usa moment por padrão desde o requisito de compatibilidade, mas fornece a função de fábrica para criar com outra biblioteca de data:

import DatePicker, { createPicker } from 'antd/lib/date-picker';

import dayjs from 'dayjs';

const basicDemo = <DatePicker />

const MyDatePicker = createPicker(dayjs, {
  // Some proxy function, maybe can provided by default...
  format(dayObj, formatStr) {
    return ...;
  },
  parse(str, formatStr) {
    return ...;
  },
});

const dayDemo = <MyDatePicker />;

Apenas pensei, discussão bem-vinda.

Agora é a hora de se livrar do moment.js !

  1. Moment.js nunca será abalado por complexa . (Eles precisariam reescrever do zero). É uma grande sobrecarga para antd e usuários.

  2. Ant Design v4 é um grande lançamento com mudanças significativas. Agora é a hora!

  3. Eu sugiro não substituí-lo por outra biblioteca. Antd pode usar algo pequeno como dayjs ou date-fns internamente, mas deve aceitar objetos ou strings nativos Date para seus componentes.

Cada vez que você chama moment() , um cachorrinho morre ..

:cachorro:

@zombieJ gostaria de saber como o componente Tabela está progredindo. Existe uma versão de visualização como o Form disponível? Quase vomitei sangue no total😂

A versão alfa já inclui a nova Tabela? Em caso afirmativo, o site de visualização deve conter um exemplo disso?

A mesa está na fila, atualmente estou trabalhando na lista virtual.

E quanto ao suporte de componentes estilizados?

O formulário initialValues ​​não define moment . https://github.com/react-component/field-form/blob/master/src/interface.ts#L7

Espero que o Form possa fornecer uma versão não controlada para resolver os problemas de desempenho de formulários grandes como o Excel

Alguma chance de a documentação do alpha ser movida para o site de documentação regular do Ant?

Meu empregador bloqueia domínios do Netlify e suponho que outros também podem.

Algum plano concreto para oferecer suporte à operação do teclado no menu e no menu suspenso?

Alguma chance de a documentação do alpha ser movida para o site de documentação regular do Ant?

Meu empregador bloqueia domínios do Netlify e suponho que outros também podem.

porque? ri muito

Espera-se que o componente Tabela se pareça com o componente Tabela do elemento. Cada coluna definirá automaticamente uma largura primeiro. É sugerido que o caractere do cabeçalho da tabela seja alterado para largura mínima em vez de mudança de linha. Espera-se que a dobra e funções de rolagem podem ser usadas simultaneamente. Espera-se que a tabela em formato de árvore se pareça com TreeSelect quando várias escolhas forem feitas.

Espero que o componente Tabela possa ser como o componente Tabela do Elemento. Cada coluna definirá automaticamente uma largura primeiro. Recomenda-se alterar o caractere do cabeçalho da tabela para largura mínima sem agrupamento. Espero que a função de dobramento e a função de rolagem possam ser usadas ao mesmo tempo. Espero que a tabela em árvore seja usada quando houver várias seleções , Pode ser semelhante a TreeSelect

Alguma chance de que com a v4 ou talvez v5 você faça algo sobre personalização? O MaterialUI é muito mais fácil de personalizar, o que o torna uma escolha para o projeto em que estou trabalhando, mesmo se eu realmente gostaria de usar o AntD, pois é muito mais completo etc.
Por favor, deixe cair menos para algo melhor para personalização.

Depois de deixar uma agência testar nosso aplicativo antd web, eles identificaram sérias falhas de acessibilidade e nós obtivemos a pior nota possível. Ao investigar as principais razões, tudo se resume aos seguintes componentes rc:

  • rc-select (tivemos que substituir por Downshift e aplicar estilos antd no topo)
  • rc-tabs (consulte # 18798)
  • e talvez outros que não usamos até agora

Quão grande de governança o antd tem sobre componentes rc e a equipe seria capaz de consertar isso em tempo hábil para a versão 4.0? A acessibilidade sempre será relativamente despriorizada, mas a verdade é que é cada vez mais difícil ignorá-la à medida que as empresas se tornam legalmente obrigadas a fornecer aplicativos acessíveis aos funcionários / clientes.

Você pode contar comigo em alguns testes pesados ​​com leitores de tela e comparações com as práticas recomendadas.

MaterialUI é muito mais fácil de personalizar

@murbanowicz você poderia explicar? Estou curioso para saber por que você acha isso.

@abenhamdine Sem problemas!
No MUI, há um ThemeProvider qual você envolve seu aplicativo e configura o tema inteiro apenas pelo objeto JS que é digitado em TypeScript, então é tão bom trabalhar com ele.

No AntD para personalizar você tem que mexer com LESS ou SASS (com alguns plug-ins), então você tem que manter outras dependências etc, você tem que ir até a fonte de componentes para encontrar a variável que você deseja alterar para um componente específico etc.
Além disso, não há uma boa maneira de alterar o tema em tempo de execução, que é tão fácil com o MUI, apenas alternando o objeto JS, que pode ser facilmente obtido do servidor, etc.

Basicamente, quando você procura por customização de AntD e MUI, você encontra exemplos fáceis no MUI porque não há nada para falar, pois é direto, mas quando você procura no Google por customização AntD, você encontra muitas soluções hacky, etc.

Eu amo o AntD por sua completude e tantos componentes excelentes, mas a customização é muito ruim e com base na minha experiência e conversando com outros desenvolvedores, deve ser um dos pontos-chave no roteiro

@abenhamdine Sem problemas!
No MUI, há um ThemeProvider qual você envolve seu aplicativo e configura o tema inteiro apenas pelo objeto JS que é digitado em TypeScript, então é tão bom trabalhar com ele.

No AntD para personalizar você tem que mexer com LESS ou SASS (com alguns plug-ins), então você tem que manter outras dependências etc, você tem que ir até a fonte de componentes para encontrar a variável que você deseja alterar para um componente específico etc.
Além disso, não há uma boa maneira de alterar o tema em tempo de execução, que é tão fácil com o MUI, apenas alternando o objeto JS, que pode ser facilmente obtido do servidor, etc.

Basicamente, quando você procura por customização de AntD e MUI, você encontra exemplos fáceis no MUI porque não há nada para falar, pois é direto, mas quando você procura no Google por customização AntD, você encontra muitas soluções hacky, etc.

Eu amo o AntD por sua completude e tantos componentes excelentes, mas a customização é muito ruim e com base na minha experiência e conversando com outros desenvolvedores, deve ser um dos pontos-chave no roteiro

explicação clara e precisa, obrigado!

@abenhamdine Sem problemas!
No MUI, há um ThemeProvider qual você envolve seu aplicativo e configura o tema inteiro apenas pelo objeto JS que é digitado em TypeScript, então é tão bom trabalhar com ele.

No AntD para personalizar você tem que mexer com LESS ou SASS (com alguns plug-ins), então você tem que manter outras dependências etc, você tem que ir até a fonte de componentes para encontrar a variável que você deseja alterar para um componente específico etc.
Além disso, não há uma boa maneira de alterar o tema em tempo de execução, que é tão fácil com o MUI, apenas alternando o objeto JS, que pode ser facilmente obtido do servidor, etc.

Basicamente, quando você procura por customização de AntD e MUI, você encontra exemplos fáceis no MUI porque não há nada para falar, pois é direto, mas quando você procura no Google por customização AntD, você encontra muitas soluções hacky, etc.

Eu amo o AntD por sua completude e tantos componentes excelentes, mas a customização é muito ruim e com base na minha experiência e conversando com outros desenvolvedores, deve ser um dos pontos-chave no roteiro

Eu concordo com @murbanowicz que a personalização com Antd pode ficar um pouco confusa (vazamento de estilo global, maneira hacky de usar Sass, conflitos de prioridade entre substituições de estilo, muitas dependências externas como moment levando a um enorme tamanho ), mas tendo usado o MUI por um longo tempo, acho o Antd muito mais personalizável.

Não estou atualizado sobre os novos lançamentos do MUI, mas da última vez que verifiquei, havia parte de componentes que você não conseguiu personalizar, pois o MUI usa styled-components , se os desenvolvedores não adicionaram classNames todos os lugares, você não poderia simplesmente selecionar o className exato do componente e substituí-lo por seu próprio estilo.
O tema é legal para o uso direto de uma biblioteca, mas se você quiser adaptar o estilo ao seu sistema de design, é muito complicado com o MUI, às vezes até impossível;)

Mesmo assim, antd realmente precisa de algum trabalho para tornar a experiência de personalização mais fácil;)

@filipjnc ,
rc-select lançou a versão alfa que melhora a acessibilidade. Você pode ajudar a testar isso. E o v4 prepare branch o usou, você pode ver uma prévia no topo.
Para rc-tabs , uma vez que não é a prioridade, irei aprimorá-lo também, mas mais tarde.

@zombieJ tudo bem, vou dar uma olhada em rc-select alpha.

Mesmo que rc-tabs não seja uma prioridade, você pode dar uma olhada em minha solicitação de pull, onde eu corrijo os pontos mais críticos de nossos resultados de teste de acessibilidade?

Estou com um problema aqui. De acordo com o método atual de reforma de ícone, se houver um ícone e forma de componente
Quando o formulário é introduzido ao mesmo tempo, só pode ser fornecido um dos apelidos?

@zkwolf Sim, estamos renomeando o ícone: https://github.com/ant-design/ant-design-icons/pull/118

cc @vagusX

Eu gostaria muito que o problema com a re-renderização

Observe que em https://next.ant.design os componentes não são classificados em ordem alfabética na barra lateral de componentes
Schermata 2019-09-30 alle 18 01 03

Como você deve saber, o design de formigas não está indo muito bem em termos de acessibilidade. Isso não é muito visível na superfície para a maioria das pessoas, mas é um grande problema quando você mergulha mais fundo. Veja como o ant-design está tendo uma pontuação muito ruim aqui: https://darekkay.com/blog/accessible-ui-frameworks/

A boa notícia é que, como eu amo muito o design de formigas e pretendo usá-lo mais para projetos corporativos, meu objetivo é colocá-lo no topo da lista.

Deixei uma agência testar um dos meus aplicativos corporativos para um cliente na Alemanha (onde a acessibilidade é um grande tópico em grandes empresas). As coisas mais críticas foram:

  1. Acessibilidade do leitor de tela para componentes básicos, mas cruciais, como Select, Autocomplete e Tabs
  2. Contrastes de cores em muitos lugares
  3. Navegação pelo teclado em alguns lugares

Eu escolhi rc-tabs primeiro como uma vitória rápida para corrigir todos os seus problemas de acessibilidade - deve ser lançado em breve (https://github.com/react-component/tabs/pull/218). Mas o que mais me preocupa é rc-select , especialmente a parte combobox (autocomplete) dele. Comboboxes são um dos aspectos mais complicados da acessibilidade do leitor de tela e é fácil errar. Para corrigir todos os problemas, são necessários não apenas alguns ajustes nas propriedades da ária, mas uma grande reformulação.

Para consertar rapidamente em meu aplicativo antes de entrar em operação, substituí o Select and AutoComplete ( rc-select ) do ant-design por meus próprios componentes baseados em https://github.com/downshift-js/downshift. Acabei de replicar as melhores práticas ARIA e aplicar estilos antd no topo - parece quase exatamente o mesmo e é perfeitamente acessível.

Portanto, a pergunta provocante é: você consideraria não fazer o trabalho duplo e desaprovar rc-select em favor da biblioteca downshift mais popular e completa? Você pode economizar algum tempo da equipe e se concentrar no aperfeiçoamento dos outros componentes principais, que não têm boas alternativas no mercado de código aberto.

Esta ideia me parece fantástica @filipjnc . Além disso, reduzir a marcha é 1/4 do tamanho de rc-select. Espero que a equipe antd possa fazer isso.

Eu adoraria ver mais melhorias nas cores na versão 4.0. Especificamente, os documentos mencionam uma “Paleta de cores de visualização de dados (em breve)” que seria muito útil em painéis e outros aplicativos de dados pesados. Cinzas quentes e frios ajudariam a construir paletas de cores mais coesas também. Além disso, é uma boa oportunidade para corrigir o contraste de cores para acessibilidade (conforme mencionado por @filipjnc). Continue o bom trabalho 👍

Como você deve saber, o design de formigas não está indo muito bem em termos de acessibilidade. Isso não é muito visível na superfície para a maioria das pessoas, mas é um grande problema quando você mergulha mais fundo. Veja como o ant-design está tendo uma pontuação muito ruim aqui: https://darekkay.com/blog/accessible-ui-frameworks/

A boa notícia é que, como eu amo muito o design de formigas e pretendo usá-lo mais para projetos corporativos, meu objetivo é colocá-lo no topo da lista.

Deixei uma agência testar um dos meus aplicativos corporativos para um cliente na Alemanha (onde a acessibilidade é um grande tópico em grandes empresas). As coisas mais críticas foram:

1. Screen reader accessibility for basic but crucial components like Select, Autocomplete and Tabs

2. Color contrasts in many places

3. Keyboard navigation in some places

Eu escolhi rc-tabs primeiro como uma vitória rápida para corrigir todos os seus problemas de acessibilidade - deve ser lançado em breve ( react-component / tabs # 218 ). Mas o que mais me preocupa é rc-select , especialmente a parte combobox (autocomplete) dele. Comboboxes são um dos aspectos mais complicados da acessibilidade do leitor de tela e é fácil errar. Para corrigir todos os problemas, são necessários não apenas alguns ajustes nas propriedades da ária, mas uma grande reformulação.

Para consertar rapidamente em meu aplicativo antes de entrar em operação, substituí o Select and AutoComplete ( rc-select ) do ant-design por meus próprios componentes baseados em https://github.com/downshift-js/downshift. Acabei de replicar as melhores práticas ARIA e aplicar estilos antd no topo - parece quase exatamente o mesmo e é perfeitamente acessível.

Portanto, a pergunta provocante é: você consideraria não fazer o trabalho duplo e desaprovar rc-select em favor da biblioteca downshift mais popular e completa? Você pode economizar algum tempo da equipe e se concentrar no aperfeiçoamento dos outros componentes principais, que não têm boas alternativas no mercado de código aberto.

Eu não ficaria tão entusiasmado com a redução de marcha, consulte https://github.com/downshift-js/downshift/issues/730
A acessibilidade é importante para alguns usuários, mas o desempenho é importante para ainda mais usuários.

A mesa está na fila, atualmente estou trabalhando na lista virtual.

oi @zombieJ
Há algum progresso no rodapé de resumo?

@ alexchen1875 ,
Pendente na nova atualização do código do ciclo de vida. A tabela é a próxima depois de concluída:)

4.0 Alguns parâmetros de adereços podem ser alterados para caixa de camelo? Por exemplo, Input.TextArea em autosize alterado para autoSize ?
Os adereços das tags HTML nativas no React são todos estúpidos, como <input autoComplete /> , este autosize sempre parece discordante. . .

Pode ser alterado no 3.x, compatível e descartar o uso original. @ jinliming2 Você está interessado em um RP?

  • 4.0 Por que marcar o props.children de Tree como api desatualizado e recomendar o método de dados puros de treeData. Acho que props.children é muito útil e muito jogável
  • ComponentWillReceiveProps foi marcado como obsoleto na última api do react. No momento, descobriu-se que o componente da tabela e o componente do Animate ainda existem durante o teste.

1 para acessibilidade. Por favor!

Falando sobre o problema do tamanho do ícone transparente, parece que o ícone de outros componentes tem 12px e o selecionador de data é 14px. Há alguma consideração sobre a diferença entre o tamanho dos ícones transparentes e de sufixo de outros componentes ou é porque o selecionador de data é a chave do ícone e tem 14px?Você tem planos para unificar o tamanho

@zombieJ planeja adicionar função de classificação de várias colunas à tabela

por favor escreva em inglês

O problema de tamanho de momento muito grande será corrigido?

O problema de tamanho de momento muito grande será corrigido?

Tente usar o dayjs primeiro

Pode ser em inglês? Considerando os sentimentos dos estrangeiros, eu sempre traduzo no google. Não é importante que a gramática não seja padrão, as palavras podem ser entendidas por eles

@ afc163
Você já considerou que estrangeiros estão acompanhando este repo? Infelizmente, o Google Translate não é uma boa ferramenta para entender o que você está dizendo. Eu sei que a maioria dos desenvolvedores e usuários do Ant-Design são chineses, mas você considera os não chineses também?
Portanto, exorto você a usar a linguagem internacional para respeitar a todos nós.

Oi,
Eu queria experimentar o Ant Design 4.0 com create-react-app e Typescript.
Eu segui as instruções em https://next.ant.design/docs/react/introduce, mas não consigo obter um aplicativo funcional.
A instrução básica seguida ( import Button from 'antd/es/button'; ) para criar-reagir-app causa erro:

não consigo encontrar o módulo antd / es / botão

Depois de adicionar react-app-rewired, customize-cra, babel-plugin-import e alterar a importação para import {Button} from 'antd' , recebo a mensagem de erro:

Não foi possível encontrar um arquivo de declaração para o módulo 'antd'

Você pode me dar conselhos sobre como fazer o antd4 funcionar com crea-react-app e typescript, por favor?

@gynekolog ,
Verifique se node_modules instalado corretamente.

ref https://codesandbox.io/s/cool-paper-4y1u7

@lvlohammadi Infelizmente, alguns chineses como eu não são bons o suficiente em inglês, mas vou tentar o meu melhor para usar a língua internacional para participar da comunicação da comunidade.

@gynekolog ,
Verifique se node_modules instalado corretamente.

ref https://codesandbox.io/s/cool-paper-4y1u7

Você está certo. eu corro

yarn add "https://github.com/ant-design/ant-design.git#4.0-prepare"

em vez de

yarn add "[email protected]"

Vergonha...
Obrigado.

dropdownMatchSelectWidth em Selecionar quebra de componente na versão alfa, efetivo na versão anterior

Se eu for iniciar um novo projeto usando o antd, você escolheria a versão 3 ou 4 alfa? Quão "pronta para a produção" está a versão 4? Você ainda deseja uma liberação no quarto trimestre?

Se eu for iniciar um novo projeto usando o antd, você escolheria a versão 3 ou 4 alfa? Quão "pronta para a produção" está a versão 4? Você ainda deseja uma liberação no quarto trimestre?

O Antd 4 ainda não está pronto para produção. Você deve começar com antd 3, a transição deve ser fácil (principalmente se codemods forem fornecidos conforme o esperado).

Espero ver uma separação completa entre lógica e exibição, ou seja, além de manipular nomes de classes, js não faz nada mais para a visualização. A aparência visual deve ser controlada por CSS (LESS). Além disso, em vez de React Components, talvez use Web Components para que desenvolvedores não-React possam usá-lo mais facilmente.

Espero ver uma separação completa entre lógica e exibição, ou seja, além de manipular nomes de classes, js não faz nada mais para a visualização. A aparência visual deve ser controlada por CSS (LESS). Além disso, em vez de React Components, talvez use Web Components para que desenvolvedores não-React possam usá-lo mais facilmente.

Acho que essa ideia de purificar tudo é inútil. É melhor se concentrar em algo mais importante.

Algum plano para seleção múltipla no AutoCompletar, como https://react-select.com?

Espero ver uma separação completa entre lógica e exibição, ou seja, além de manipular nomes de classes, js não faz nada mais para a visualização. A aparência visual deve ser controlada por CSS (LESS). Além disso, em vez de React Components, talvez use Web Components para que desenvolvedores não-React possam usá-lo mais facilmente.

Acho que essa ideia de purificar tudo é inútil. É melhor se concentrar em algo mais importante.

Não acho que haja assunto mais urgente do que a separação. Em uma equipe, CSS geralmente é manipulado por designers, enquanto JS geralmente é feito por programadores. Permitir que ambos manipulem o estilo levará ao caos e à perda desnecessária de tempo de desenvolvimento.

Tome o Menu, por exemplo, largura e altura padrão são definidas por JS, o problema é que, quando alguém deseja alterar a largura ou altura do invólucro externo, o menu pode ficar para fora ou ter lacunas ao redor. Isso exigiria que o designer e o codificador consertassem, o que significa tempo de inatividade.

Além disso, como componentes, o código não é excessivamente complexo, a separação não deve exigir muito esforço, mas o resultado tornaria a vida muito mais fácil para os usuários e para a própria equipe ant.design.

Outro pequeno problema, o ícone precisa ter como padrão 16px, não 14px, que é o tamanho de fonte padrão global. Isso significa que o Icon deve usar variáveis ​​como @ default-icon-size, @ icon-size-lg, etc., separadas do texto. Este não é realmente um bug, mas um recurso perdido.

@ afc163
Você já considerou que estrangeiros estão acompanhando este repo? Infelizmente, o Google Translate não é uma boa ferramenta para entender o que você está dizendo. Eu sei que a maioria dos desenvolvedores e usuários do Ant-Design são chineses, mas você considera os não chineses também?
Portanto, exorto você a usar a linguagem internacional para respeitar a todos nós.

As pessoas têm o direito de usar seu próprio idioma e devem se sentir confortáveis ​​para fazê-lo, e por mais que eu respeite o esforço de envolver o maior público possível fornecendo traduções, ninguém deve receber uma palestra apenas por usar o idioma com o qual está mais confortável e que o mantenedor entende comunicar. A ideia de que os principais colaboradores deste projeto não devam usar sua língua nativa para se comunicar, pois alguma outra língua é superior, é absurda. Não há problema em pedir traduções, mas com respeito. Reduzir as respostas porque estão em chinês é contraproducente e infantil.

Caras, And Design versão 4.0 tem JSS em vez de _Less_ para gerar CSS?

Caras, And Design versão 4.0 tem JSS em vez de _Less_ para gerar CSS?

AFAIK, não. Mas você pode tentar usar componentes estilizados (por exemplo), além de menos.

Obrigado, querido @ tomgao365 , crio o problema ao qual você fez referência. Quero fazer um ótimo PR para remover o Less completamente e usar o JSS em seu lugar. Trabalhar na versão 3 não é uma boa ideia, porque muitos projetos foram feitos usando a versão 3, então decidi trabalhar na implementação do JSS na versão 4.

Além disso, tenho uma pequena dúvida, querido @abenhamdine , qual é sua ideia sobre usar JSS em vez de usar Less?

Além disso, tenho uma pequena dúvida, querido @abenhamdine , qual é a sua ideia sobre usar JSS em vez de usar Less?

Principais benefícios para mim:

  • estilo dinâmico (dor com menos)
  • preenchimento automático (não tenho certeza para esse, depende de qual ferramenta / biblioteca JSS você usa)
  • herança de estilos

Vale a pena tentar.
Mas não é uma bala de prata.

Caro @abenhamdine , deixo um problema que tem o emblema Discussion . É # 19181.

E eu quero começar a implementar JSS e omitir Less, mas uma nova versão está chegando e temo que todos os meus esforços serão perdidos.

Fico feliz em ver uma discussão sobre a substituição de moment.js por alguma alternativa como Day.js ou Date Object nativo aqui https://github.com/ant-design/ant-design/issues/19738

Haverá uma maneira mais fácil de alterar os temas de cores usando criar-reagir-app na versão 4?

Eu concordo com @flashtheman que substituir o tema sem a necessidade de trabalhar com menos variáveis ​​seria bom - ou seja, algo como ThemeProvider da emoção: https://emotion.sh/docs/theming

Na era jQuery, as configurações de tema são muito populares e os usuários gostam de usá-las.
Esperei por uma maneira fácil de modificar o tema no ambiente de produção por mais de 2 anos.

Na nova versão do componente de ícone, se o ícone for determinado dinamicamente, como ele deve ser tratado na nova versão? Por enquanto, só posso pensar em usar strings de require + variable. Acontece que apenas o atributo type precisa ser preenchido com variáveis. Existe alguma outra maneira de lidar com isso?
google tradutor: na nova versão do componente ícone, se o ícone é determinado dinamicamente, então como lidar com ele na nova versão, por enquanto só posso pensar na string de variável require +, o original só precisa preencher o atributo type com variáveis, que outros métodos de processamento?

Na nova versão do componente de ícone, se o ícone for determinado dinamicamente, como ele deve ser tratado na nova versão? Por enquanto, só posso pensar em usar strings de require + variable. Acontece que apenas o atributo type precisa ser preenchido com variáveis. Existe alguma outra maneira de lidar com isso?
google tradutor: na nova versão do componente ícone, se o ícone é determinado dinamicamente, então como lidar com ele na nova versão, por enquanto só posso pensar na string de variável require +, o original só precisa preencher o atributo type com variáveis, que outros métodos de processamento?

Tente usar https://github.com/smooth-code/loadable-components recomendado na documentação do React

Quando a versão oficial será lançada?

4.0 A tabela suporta a função Pivot?

@ afc163 - Parece que a poluição do estilo global é o problema número 1 que as pessoas querem com um novo lançamento. Você tem alguém para trabalhar nisso? Eu ficaria feliz em fazer este trabalho e ajudar. Não deve ser difícil, apenas exigirá algum esforço. Eu também sofro desse problema com o Ant Design. Eu gostaria de resolver isso.

Há algum trabalho sendo feito para reduzir o tamanho do componente?
Por uma vez: por que se eu quiser um Button simples - eu tenho que importar todo o arquivo antd.css ??

Há algum trabalho sendo feito para reduzir o tamanho do componente?
Por uma vez: por que se eu quiser um Button simples - eu tenho que importar todo o arquivo antd.css ??

@ avalanche1 Consulte https://ant.design/docs/react/introduce#Usage

Use antd modularizado

Para mim, um componente de upload não é suficiente para oferecer suporte à renderização de lista personalizada.
Além disso, o progresso do upload é apenas uma porcentagem e não é conveniente expandir para suportar a exibição de velocidade em tempo real.

@ banxi1988

https://github.com/ant-design/ant-design/blob/c824569ea0810e2cf11bc2953b333eb0e404fd1c/components/upload/interface.tsx#L47 -L52

Se quiser uma exibição rápida, onChange retornou a porcentagem do arquivo que foi carregado. Você pode calcular a velocidade de upload.

@ Z3SA https://caniuse.com/#search = CSS% 20Variables. Isso precisa parar todo o suporte do IE, parar o suporte do IE11 é muito radical, embora eu também apoie isso.

Você ainda pode fazer isso com suporte de fallback. Ex: color: var(--red, @red); Um simples localizar / substituir global para todas as variáveis ​​atuais resolveria isso.

Está descartando MENOS em favor de SASS ou outra solução de estilo melhor sendo considerado para v4 ou não?

@murbanowicz , Olá, obrigado pelo seu comentário, deixo um problema sobre o uso de JSS vez de Less e aqui, mostro minha prontidão sobre esta migração, mas ninguém mostra nenhuma ação.

Olá @zombieJ , obrigado pelo seu excelente trabalho no Ant Design? Há algum plano para fornecer uma maneira pronta para usar para alternar o tema escuro no aplicativo?

Uma sugestão sobre o componente do formulário:
Estou muito feliz em ver que na nova versão 4.0, o componente de formulário será mais amigável para os desenvolvedores. Eu vi um novo exemplo, o componente Form.Item abaixo do componente Form não precisará mais usar getFieldDecorator. Esta é uma melhoria muito boa, mas tenho uma sugestão mais radical: remova o componente Form.Item, otimize ainda mais a experiência de escrita de código e torne a codificação mais refrescante. As funções originais do componente Form.Item são transferidas diretamente para componentes de entrada específicos (como Input, DataPick, etc.).
Isso é para levar em conta que, na maioria dos casos, os formulários desenvolvidos usam os componentes de entrada integrados do antd e têm as condições de realizar a função do componente Form.Item, aprimorando os recursos dos componentes de entrada; e para alguns casos especiais (como o próprio usuário Definir componentes, certos componentes de entrada não querem ser vinculados ao Form), você pode fornecer componentes de embalagem especiais para obter instruções.
A pesquisa sobre antd não é aprofundada e apenas propõe sugestões de apelo da perspectiva do usuário comum. Se houver algo errado, por favor, Haihan.

Uma sugestão sobre o componente do formulário:
Estou muito feliz em ver que na nova versão 4.0, o componente de formulário será mais amigável para os desenvolvedores. Eu vi um novo exemplo, o componente Form.Item abaixo do componente Form não precisará mais usar getFieldDecorator. Esta é uma melhoria muito boa, mas tenho uma sugestão mais radical: remova o componente Form.Item, otimize ainda mais a experiência de escrita de código e torne a codificação mais refrescante. As funções originais do componente Form.Item são transferidas diretamente para componentes de entrada específicos (como Input, DataPick, etc.).
Isso é para levar em conta que, na maioria dos casos, os formulários desenvolvidos usam os componentes de entrada integrados do antd e têm as condições de realizar a função do componente Form.Item, aprimorando os recursos dos componentes de entrada; e para alguns casos especiais (como o próprio usuário Definir componentes, certos componentes de entrada não querem ser vinculados ao Form), você pode fornecer componentes de embalagem especiais para obter instruções.
A pesquisa sobre antd não é aprofundada e apenas propõe sugestões de apelo da perspectiva do usuário comum. Se houver algo errado, por favor, Haihan.

@shengliangli acha que o acoplamento é muito forte. . .

Uma sugestão sobre o componente do formulário:
Estou muito feliz em ver que na nova versão 4.0, o componente de formulário será mais amigável para os desenvolvedores. Eu vi um novo exemplo, o componente Form.Item abaixo do componente Form não precisará mais usar getFieldDecorator. Esta é uma melhoria muito boa, mas tenho uma sugestão mais radical: remova o componente Form.Item, otimize ainda mais a experiência de escrita de código e torne a codificação mais refrescante. As funções originais do componente Form.Item são transferidas diretamente para componentes de entrada específicos (como Input, DataPick, etc.).
Isso é para levar em conta que, na maioria dos casos, os formulários desenvolvidos usam os componentes de entrada integrados do antd e têm as condições de realizar a função do componente Form.Item, aprimorando os recursos dos componentes de entrada; e para alguns casos especiais (como o próprio usuário Definir componentes, certos componentes de entrada não querem ser vinculados ao Form), você pode fornecer componentes de embalagem especiais para obter instruções.
A pesquisa sobre antd não é aprofundada e apenas propõe sugestões de apelo da perspectiva do usuário comum. Se houver algo errado, por favor, Haihan.

@shengliangli acha que o acoplamento é muito forte. . .

Eu acho que Form.Item é um componente "extra" adicionado pelo antd para realizar a função de vinculação de dados do componente Form. Existem razões para esta implementação, mas afinal, uma coisa extra foi adicionada. Assim como todo mundo critica o problema de muito código modular no redux, os desenvolvedores podem não gostar dessa forma de escrever. Se a função de vinculação de dados implementada por form.item pode ser entendida como as características dos componentes de entrada, como Entrada, de modo a aumentar a capacidade dos componentes de entrada, isso parece mais natural?

Também pensei no problema do acoplamento.A raiz do problema pode estar em como definimos as capacidades e as características de comportamento dos componentes de entrada.

Uma sugestão sobre o componente do formulário:
Estou muito feliz em ver que na nova versão 4.0, o componente de formulário será mais amigável para os desenvolvedores. Eu vi um novo exemplo, o componente Form.Item abaixo do componente Form não precisará mais usar getFieldDecorator. Esta é uma melhoria muito boa, mas tenho uma sugestão mais radical: remova o componente Form.Item, otimize ainda mais a experiência de escrita de código e torne a codificação mais refrescante. As funções originais do componente Form.Item são transferidas diretamente para componentes de entrada específicos (como Input, DataPick, etc.).
Isso é para levar em conta que, na maioria dos casos, os formulários desenvolvidos usam os componentes de entrada integrados do antd e têm as condições de realizar a função do componente Form.Item, aprimorando os recursos dos componentes de entrada; e para alguns casos especiais (como o próprio usuário Definir componentes, certos componentes de entrada não querem ser vinculados ao Form), você pode fornecer componentes de embalagem especiais para obter instruções.
A pesquisa sobre antd não é aprofundada e apenas propõe sugestões de apelo da perspectiva do usuário comum. Se houver algo errado, por favor, Haihan.

@shengliangli acha que o acoplamento é muito forte. . .

Eu acho que Form.Item é um componente "extra" adicionado pelo antd para realizar a função de vinculação de dados do componente Form. Existem razões para esta implementação, mas afinal, uma coisa extra foi adicionada. Assim como todo mundo critica o problema de muito código modular no redux, os desenvolvedores podem não gostar dessa forma de escrever. Se a função de vinculação de dados implementada por form.item pode ser entendida como as características dos componentes de entrada, como Entrada, de modo a aumentar a capacidade dos componentes de entrada, isso parece mais natural?

Também pensei no problema do acoplamento.A raiz do problema pode estar em como definimos as capacidades e as características de comportamento dos componentes de entrada.

Não concordo em particular. Acho que Form.Item é principalmente um pacote externo de um componente, como atributos como rótulo e coluna, que realmente não são adequados para componentes embutidos.

Olá @zombieJ
Interessado em saber quando a versão 4 será lançada?
Ansioso por ouvir de volta

Como posso contribuir com o design também.
Procurando ouvir de alguém

A versão beta.0 está disponível, isso significa que pode ser usada?

Uma sugestão sobre o componente do formulário:
Estou muito feliz em ver que na nova versão 4.0, o componente de formulário será mais amigável para os desenvolvedores. Eu vi um novo exemplo, o componente Form.Item abaixo do componente Form não precisará mais usar getFieldDecorator. Esta é uma melhoria muito boa, mas tenho uma sugestão mais radical: remova o componente Form.Item, otimize ainda mais a experiência de escrita de código e torne a codificação mais refrescante. As funções originais do componente Form.Item são transferidas diretamente para componentes de entrada específicos (como Input, DataPick, etc.).
Isso é para levar em conta que, na maioria dos casos, os formulários desenvolvidos usam os componentes de entrada integrados do antd e têm as condições de realizar a função do componente Form.Item, aprimorando os recursos dos componentes de entrada; e para alguns casos especiais (como o próprio usuário Definir componentes, certos componentes de entrada não querem ser vinculados ao Form), você pode fornecer componentes de embalagem especiais para obter instruções.
A pesquisa sobre antd não é aprofundada e apenas propõe sugestões de apelo da perspectiva do usuário comum. Se houver algo errado, por favor, Haihan.

Em primeiro lugar, você deve saber que não tem nada a ver com o fato de ser embutido ou não. Usar os chamados componentes embutidos pode ser considerado um acidente
getFieldDecorator é a ponte que conecta o componente de formulário e o componente de entrada. Form.item é passado nos dois atributos value e onChange , e então o componente empacotado passa value e onChange Esses dois métodos de interface interagem com o mundo exterior. Em outras palavras, qualquer componente pode se tornar um parâmetro de getFieldDecorator , desde que value e onChange sejam implementados.Esta é a ideia típica de program to interface

PS: Eu não li o código-fonte, todos os itens acima são meu palpite depois de ler o documento

A razão pela qual Form.Item pode interagir com o Component subjacente não tem nada a ver com algum mecanismo 'embutido' como alguém espera. É apenas um truque comum no mundo da programação chamado program to interface

Basicamente, o Componente Form e o Componente subjacente concordam em algo como value e onChange . Eles servem como interface entre os dois mundos para se comunicarem. É um bom design para o propósito de desacoplamento

@dancerphil Talvez você possa esclarecer a ideia mais explicitamente na documentação oficial

Olá a todos, a versão 4 da versão beta foi lançada. A API está estável agora, o que significa nenhuma alteração significativa na API, a menos que um problema crítico aconteça. Durante a versão beta, os designers ajudarão a continuar o ajuste do design visual da IU e nos concentraremos na correção de bugs. Sinta-se à vontade para tentar e nos ajude em caso de bug de incêndio ou feedback.

Obrigado por todos participarem da codificação e tentativa. Sua ajuda significa muito :)


Olá a todos, a versão beta foi lançada. Se a API não tiver grandes problemas de design, nenhuma alteração adicional será feita. Na versão beta, os designers ajudarão a ajustar o estilo da interface do usuário da v4 e nos concentraremos nas correções de bugs. Bem-vindo para nos ajudar a encontrar bugs ou ter qualquer outro feedback.

Obrigado por participar do trabalho de desenvolvimento e teste. Sua ajuda é muito significativa :)


ref: http://new-issue.ant.design/

Como posso contribuir com o design também.
Procurando ouvir de alguém

@ ekeminimarkk001 talvez consulte: https://ant.design/docs/react/contributing

@zombieJ Todas as alterações listadas no problema foram implementadas na versão beta?

Uma sugestão sobre o componente do formulário:
Estou muito feliz em ver que na nova versão 4.0, o componente de formulário será mais amigável para os desenvolvedores. Eu vi um novo exemplo, o componente Form.Item abaixo do componente Form não precisará mais usar getFieldDecorator. Esta é uma melhoria muito boa, mas tenho uma sugestão mais radical: remova o componente Form.Item, otimize ainda mais a experiência de escrita de código e torne a codificação mais refrescante. As funções originais do componente Form.Item são transferidas diretamente para componentes de entrada específicos (como Input, DataPick, etc.).
Isso é para levar em conta que, na maioria dos casos, os formulários desenvolvidos usam os componentes de entrada integrados do antd e têm as condições de realizar a função do componente Form.Item, aprimorando os recursos dos componentes de entrada; e para alguns casos especiais (como o próprio usuário Definir componentes, certos componentes de entrada não querem ser vinculados ao Form), você pode fornecer componentes de embalagem especiais para obter instruções.
A pesquisa sobre antd não é aprofundada e apenas propõe sugestões de apelo da perspectiva do usuário comum. Se houver algo errado, por favor, Haihan.

Em primeiro lugar, você deve saber que não tem nada a ver com o fato de ser embutido ou não. Usar os chamados componentes embutidos pode ser considerado um acidente
getFieldDecorator é a ponte que conecta o componente de formulário e o componente de entrada. Form.item é passado nos dois atributos value e onChange , e então o componente empacotado passa value e onChange Esses dois métodos de interface interagem com o mundo exterior. Em outras palavras, qualquer componente pode se tornar um parâmetro de getFieldDecorator , desde que value e onChange sejam implementados.Esta é a ideia típica de program to interface

PS: Eu não li o código-fonte, todos os itens acima são meu palpite depois de ler o documento

Depois de ler suas respostas, devo dizer que minha sugestão para o componente de formulário do antd não é muito madura, mas por outro lado, fazer essa sugestão é pensar completamente no problema da perspectiva de um usuário comum. Para um componente com uma intensidade de uso tão alta, como pode ser mais conveniente desenvolver e usar, escrever menos código e usar uma expressão mais clara e natural, é minha ardente expectativa da antd.

Do ponto de vista do usuário, o antd já é muito bom, a maioria dos componentes podem ser usados ​​assim que forem usados, esqueça-os quando acabarem e use-os na próxima vez que quiserem. A razão para alcançar esse efeito é inseparável do bom design e empacotamento da API dos componentes, mas ainda existem cenários de uso para alguns componentes (como de, tabela) e há espaço para melhorias melhores.

O Antd é apenas um componente da ferramenta no projeto. É melhor não expor seu próprio mecanismo de implementação ou ocultar e assimilar inteligentemente o mecanismo de implementação na API externa. Os usuários querem apenas usar este componente, querem usá-lo da forma mais conveniente e natural e não querem ser especialistas em um componente de ferramenta.

De volta ao componente de formulário, na API 3.x atual, estou realmente mais disposto a usar o uform de Ali. Comparado com o formulário antd, o uform precisa escrever menos código e é mais produtivo. Obviamente, uform parece mais uma forma declarativa de escrita, que é muito diferente da forma de antd, e pode não ter muito valor para referência.

Como um antd party, é um pouco constrangedor pedir tantos requisitos, mas por amor, espero que seja melhor, espero que a equipe do projeto entenda e espero otimizar ainda mais a experiência de desenvolvimento e uso do componente na versão apropriada .

Muito estranho. Eu não usei o Icon, mas coloquei todos os icons-svg nele.
webpack-bundle-analyzer.png
Número da versão: 4.0.0-beta.0. Babel-plugin-import e tree-shake são usados, mas são inúteis.

Muito estranho. Eu não usei o Icon, mas coloquei todos os icons-svg nele.
webpack-bundle-analyzer.png
Número da versão: 4.0.0-beta.0. Babel-plugin-import e tree-shake são usados, mas são inúteis.

Use esta configuração

{
                    test: /\.js?$/,
                    include: [/node_modules[\\\\/]antd/],
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    '@babel/plugin-syntax-dynamic-import',
                                    [
                                        'import',
                                        {
                                            libraryName: 'antd',
                                            style: true,
                                            libraryDirectory: 'es',
                                        },
                                        'ant',
                                    ],
                                    [
                                        'import',
                                        {
                                            libraryName: '@ant-design/icons',
                                            customName: name => {
    const formatName = name.split('-').reduce((acum, value) => acum + value[0].toUpperCase() + value.slice(1), '');

    return `@ant-design/icons/lib/icons/${formatName}`;
};
                                        },
                                        '@ant-design/icons',
                                    ],
                                ],
                            },
                        },
                    ],
                },

Muito estranho. Eu não usei o Icon, mas coloquei todos os icons-svg nele.
webpack-bundle-analyzer.png
Número da versão: 4.0.0-beta.0. Babel-plugin-import e tree-shake são usados, mas são inúteis.

Use esta configuração

{
                    test: /\.js?$/,
                    include: [/node_modules[\\\\/]antd/],
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    '@babel/plugin-syntax-dynamic-import',
                                    [
                                        'import',
                                        {
                                            libraryName: 'antd',
                                            style: true,
                                            libraryDirectory: 'es',
                                        },
                                        'ant',
                                    ],
                                    [
                                        'import',
                                        {
                                            libraryName: '@ant-design/icons',
                                            customName: name => {
    const formatName = name.split('-').reduce((acum, value) => acum + value[0].toUpperCase() + value.slice(1), '');

    return `@ant-design/icons/lib/icons/${formatName}`;
};
                                        },
                                        '@ant-design/icons',
                                    ],
                                ],
                            },
                        },
                    ],
                },

Obrigado pela sua resposta, mas não funcionou de acordo com a sua configuração.

Versão: 4.0.0-beta.0
Problema: quando o componente modal visível é trocado, a página rola e reproduz o endereço:

@xiaoxintang Ele foi corrigido no branch master, aguardando a fusão.

@ afc163 Como faço para instalar o antd4.0 beta

@ afc163 Como faço para instalar o antd4.0 beta

npm install antd@next
OU
yarn add antd@next

Parece que o site de visualização está quebrado. Recebo apenas um erro de Página não encontrada .

Uma sugestão sobre o componente do formulário:
Estou muito feliz em ver que na nova versão 4.0, o componente de formulário será mais amigável para os desenvolvedores. Eu vi um novo exemplo, o componente Form.Item abaixo do componente Form não precisará mais usar getFieldDecorator. Esta é uma melhoria muito boa, mas tenho uma sugestão mais radical: remova o componente Form.Item, otimize ainda mais a experiência de escrita de código e torne a codificação mais refrescante. As funções originais do componente Form.Item são transferidas diretamente para componentes de entrada específicos (como Input, DataPick, etc.).
Isso é para levar em conta que, na maioria dos casos, os formulários desenvolvidos usam os componentes de entrada integrados do antd e têm as condições de realizar a função do componente Form.Item, aprimorando os recursos dos componentes de entrada; e para alguns casos especiais (como o próprio usuário Definir componentes, certos componentes de entrada não querem ser vinculados ao Form), você pode fornecer componentes de embalagem especiais para obter instruções.
A pesquisa sobre antd não é aprofundada e apenas propõe sugestões de apelo da perspectiva do usuário comum. Se houver algo errado, por favor, Haihan.

Você pode tentar isso: https://github.com/aweiu/ant-modifier

Há alguma otimização para poluição de estilo global?

Há alguma otimização para poluição de estilo global?

Antd parece ter prefixos, não é poluição.O código css do seu próprio projeto pode tentar usar módulos css para resolver o problema da poluição global

Há alguma otimização para poluição de estilo global?

Antd parece ter prefixos, não é poluição.O código css do seu próprio projeto pode tentar usar módulos css para resolver o problema da poluição global

Bem, eu conheço esse prefixo. Refiro-me à poluição da parte de redefinição de css global, que é o problema de poluição causado pela introdução de redefinição de antd e css em projetos legados

Há alguma otimização para poluição de estilo global?

Antd parece ter prefixos, não é poluição.O código css do seu próprio projeto pode tentar usar módulos css para resolver o problema da poluição global

Para obter detalhes, consulte a discussão do problema no link do site oficial: https://ant.design/docs/react/faq-cn#antd -% E8% A6% 86% E7% 9B% 96% E4% BA% 86% E6% 88 % 91% E7% 9A% 84% E5% 85% A8% E5% B1% 80% E6% A0% B7% E5% BC% 8F% EF% BC% 81

Existe um plano para migrar o layout Antd Pro 4.0 do Antd Pro 4.0?
Encontrei o erro SiderMenu.js Icon.createFromIconfontCN no pro-layout ao migrar o projeto sozinho. Como a dependência no pro-layout ainda é a versão v3, não sei como mudar a dependência, e alguém que saiba vai me ensinar.

Existe um plano para migrar o layout Antd Pro 4.0 do Antd Pro 4.0?
Encontrei o erro SiderMenu.js Icon.createFromIconfontCN no pro-layout ao migrar o projeto sozinho. Como a dependência no pro-layout ainda é a versão v3, não sei como mudar a dependência, e alguém que saiba vai me ensinar.

Como o ícone foi separado no 4.0, a importação precisa ser modificada. Você pode pegar next.ant.design e olhar para o documento de API de ícone atual

Obrigado a toda sua contribuição na versão v4. Fechado desde 4.0.0-rc.0 versão lançada: ref # 20661

StrictMode é um objetivo? O contexto legado precisa ser migrado https://github.com/ant-design/ant-design/issues/9870

Podemos manter antd3 e antd4 no repo? Não é possível alterar em todos os lugares, pois o repositório é muito grande e quase será reescrito o código-base completo.
Além disso, se sim, podemos manter o CSS antd3 em CSS global e o CSS antd4 para apenas algumas pastas e seus filhos

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

shivekkhurana picture shivekkhurana  ·  3Comentários

plandem picture plandem  ·  3Comentários

tangsj picture tangsj  ·  3Comentários

xtznhzxdev picture xtznhzxdev  ·  3Comentários

longhuasishen picture longhuasishen  ·  3Comentários