Ant-design: [email protected]

Atualizada.

Atualizada.

https://github.com/ant-design/ant-design/issues/5140 pode ser um playground editável.

Talvez um tamanho de fonte padrão maior, seguindo o plano do nosso designer.

Refatorar cloneElement em context ?

1. Cardápio
2. Abas

reabrir # 1473?

Ainda espero por um suporte integrado mais robusto para i18n https://github.com/ant-design/ant-design/issues/5554#issuecomment -290372828

Melhorar e aperfeiçoar o comentário da definição dos componentes?

E as ferramentas de 2> 3, ou mesmo 1> 3?

@yesmeck this https://github.com/ant-design/ant-design/issues/5570#issuecomment -290622803 significa que precisamos desistir de Tabs.TabPane[key] e Menu.Item[key] ...

Ainda espero por um suporte integrado i18n mais robusto # 5554 (comentário)

@plandem estou avaliando, vamos continuar discutindo nessa edição.

Melhorar e aperfeiçoar o comentário da definição dos componentes?

@infeng é por isso que quero reescrever a demonstração em TypeScript, para que possamos notar problemas na definição https://github.com/ant-design/ant-design/issues/5390

E as ferramentas de 2> 3, ou mesmo 1> 3?

Sim, ainda precisamos fornecer ferramentas como https://github.com/ant-design/ant-design/issues/3759#issuecomment -272353773, embora não seja uma solução perfeita

@sorrycc o que você acha de webpack@2 ?

Algum progresso sobre o editor de rich text? # 1083

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

O editor pode não estar em nosso plano recente por enquanto.

ThemeProvider deve ser discutido em https://github.com/ant-design/ant-design/issues/5656

Mas não tenho certeza se temos tempo para introduzi-lo em [email protected] .

Adicionar novo recurso para gráfico
Como pizza, hisgrama etc.

Adicionar novo recurso para gráfico
Eu sou contra. É uma classe diferente de componentes.

Se você quiser gráficos da mesma equipe, pode tentar este:
https://antv.alipay.com/index.html

O único componente que falta no antd e que estou implementando repetidamente em todos os projetos é uma barra lateral fora da tela.

react-sidebar é um bom componente, mas quebra tudo o que tem a ver com rolar na página, então é bem inútil. Uma barra lateral integrada, de preferência com suporte para deslizar em dispositivos de toque, seria o meu maior desejo para o 3.0!

@JesperWe acho que você precisa do Layout.Sider

@benjycui Na verdade, não olhei para o Sider por alguns meses, vejo que ele tem um gatilho personalizado desde o 2.6, o que o torna mais útil do que antes. No entanto, ele ainda comprime a coluna de conteúdo para ficar estreita quando aparece, portanto, não pode ser usado como barra lateral.

Mas poderia ser estendido para funcionar como uma barra lateral com alguns novos adereços:

• cover: true para fazer com que apareça no topo do conteúdo da página em vez de comprimi-lo.
• mask: true para mostrar uma máscara sobre a parte não coberta da página quando o Sider está no topo.
• maskCloseable: true para fazê-lo recolher quando clicado fora.

e finalmente em um mundo de sonho

• swipeable: true para suportar melhor os dispositivos de toque (mas como você provavelmente está pensando no antd como uma coisa de desktop, isso também poderia ser feito fora do antd).

@benjycui @JesperWe Na demonstração do Layout.Sider , o conteúdo é comprimido (o que é ruim) quando o Sider abre no celular.

É possível empurrar o conteúdo para a direita também? Ou colocar o Sider no topo do conteúdo?

Mais uma mudança importante que quero fazer na próxima versão principal e quero que você dê conselhos: https://github.com/ant-design/ant-design/issues/6139

@JesperEntão , você precisa de algo como o Drawer .

E não devemos discutir detalhes de recursos aqui, apenas abrir um novo problema para discutir.

@benjycui Ok, então reformulei meu sonho 3.0 :-): Algo como Drawer integrado ao antd (porque adicionar antd-mobile / Drawer torna o pacote muito maior e adiciona muitas coisas nativas reativas indesejadas)

Compare os resultados e considere o rollup como empacotador de biblioteca.

Aqui estão algumas idéias:
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

Compare os resultados e considere o rollup como empacotador de biblioteca.

Podemos fazer isso na versão 2.x, pois os desenvolvedores não sentirão nenhuma mudança.

E você pode abrir uma nova edição para discutir essa ideia @plandem

Tente substituir menos por https://github.com/styled-components/styled-components

Sobre componentes estilizados, também tenho problemas:

• a biblioteca autoprefixer pode não ser muito confiável em comparação com postcss https://github.com/styled-components/styled-components/blob/master/src/utils/autoprefix.js#L6. Ou podemos dizer que, uma vez que escolhermos css-in-js, perderemos a conveniência do sistema de plugins pós-css, como px-to-rem?
• temos que manter o nome de classe css atual inteiro para compatibilidade, enquanto os componentes estilizados irão gerar seu próprio nome de classe para o estilo, será redundante e difícil de manter?

É por isso que try existia, compatibilidade é um grande problema que devemos considerar.

temos que manter o nome de classe css atual inteiro para compatibilidade, enquanto os componentes estilizados irão gerar seu próprio nome de classe para o estilo, será redundante e difícil de manter?

Na verdade, isso não é um problema. Os nomes de classe CSS atuais não são apenas para compatibilidade, mas seletores que podemos usar no teste (por exemplo, enzima). Portanto, devemos mantê-los.

@paranoidjk @ afc163 @benjycui

Olá, sou um dos contribuidores principais de componentes estilizados e encontrei este tópico devido a um problema aberto em nosso repo (veja acima), que me informou que esta lib não oferece suporte a SC. Por acaso encontrei então esta conversa: wink: - Ok, contexto à parte agora

a biblioteca autoprefixer pode não ser muito confiável em comparação com postcss

Escolhemos cuidadosamente stylis e estamos trabalhando em conjunto com @thysultan , que o desenvolve. Não o teríamos escolhido, se não fosse uma substituição válida do PostCSS e os poucos problemas que tinha (alguns prefixos ausentes na v3), foram resolvidos muito rapidamente. A própria v2 está em desenvolvimento há alguns meses e agora finalmente foi lançada. Definitivamente podemos garantir essa parte. Deixe este detalhe de implementação ser nossa preocupação, se você escolher SC: sorria:

O arquivo para o qual você está apontando não está em uso e foi excluído agora, aliás, e faz parte do antigo prefixo automático com prefixo de estilo embutido. Mas mesmo essa é (e foi para nós) uma solução muito, muito confiável em toda a comunidade css-in-js por @rofrischmann.

Ou podemos dizer que, uma vez que escolhermos css-in-js, perderemos a conveniência do sistema de plugins pós-css, como px-to-rem?

Como nas interpolações em nossos literais de modelo com tag, você pode usar qualquer JS, funções simples podem substituir tudo isso. Na verdade, temos um projeto separado chamado "polido" que é como o lodash para CSS-in-JS e vem com todos os mixins (ou seja, funções auxiliares) que você esperaria de SASS / LESS e similares: https: // polido. js.org

(Na verdade, não usamos mais PostCSS como mencionado acima, nem oferecemos suporte para seus plug-ins, aliás)

temos que manter o nome de classe css atual inteiro para compatibilidade, enquanto os componentes estilizados irão gerar seu próprio nome de classe para o estilo, será redundante e difícil de manter?

Se precisar anexar nomes de classe personalizados, você pode usar facilmente nosso método .attrs , que permite anexar adereços adicionais a um componente. Por exemplo:

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

Mais alguns itens e recursos:

• Você escreve apenas CSS (como você já deve saber), e as únicas adições são e comercial e aninhamento
• Não há estilos + mapeamento de componentes
• Tudo é um componente
• Você pode escrever mixins / estilos compartilhados com nosso ajudante css

Estou aqui se precisar de mais ajuda. Se precisar de mais informações, verifique nosso novo site: 100: https://styled-components.com

@philpl @benjycui

Os nomes de classe CSS atuais não são apenas para compatibilidade, mas seletores que podemos usar no teste (por exemplo, enzima). Portanto, devemos mantê-los.

A maioria dos seletores de classe nos testes parece que podem ser substituídos por seletores de nome de exibição . Isso não é verdade para todos os testes, mas nos levaria a maior parte do tempo. Eu não me importaria em assumir isso.

Um lugar onde os componentes estilizados podem ajudar é na personalização do tema . Parece que isso nos daria mais flexibilidade do que a primeira abordagem e melhor otimização do que a segunda abordagem.

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

Segundo @philpl - POR FAVOR, torne o estilo muito mais fácil no Ant Design. Atualmente é uma verdadeira dor. styled-components é incrível.

Acho que podemos resolver esse problema ao mesmo tempo https://github.com/ant-design/ant-design/issues/4998 , se refatorarmos para styled-component .

PS Isso não significa que styled-component possa resolver esse problema, apenas porque podemos fazer isso ao mesmo tempo para reduzir o trabalho.

Atualizada:

É assim que estou atualmente estilizando o Ant Design em um projeto React. Não é dos melhores, porque temos que passar pela biblioteca _entire_ do Ant Design e estilizar tudo. Não quero me preocupar com um pré-processador MENOS em create-react-app , porque é meio chato.

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

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

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

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

const defaultTheme = mainTheme;

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

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

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

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

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

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

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

export default defaultTheme;

Se o Ant Design fosse compatível com styled-components , poderíamos apenas empacotar o aplicativo com <ThemeProvider theme={primaryTheme}> e ele seria estilizado de acordo.

Eu só gostaria de lançar o fela de @rofrischmann como uma alternativa aos componentes estilizados. É mais modular e mais rápido. Ele tem muitos recursos e ocupa pouco espaço . Além disso, o cloudflare decidiu construir sua interface do

O que quer que vocês decidam, eu ficaria muito feliz em ver e usar alguma solução css-in-js em vez de menos.

styled-components é a melhor escolha para construir componentes de IU modernos, modulares e escaláveis.
o mais importante, pode fazer com que o componente seja renderizado independentemente, sem qualquer arquivo css externo.
que possibilitam a importação parcial de componentes com o mínimo de estilos necessários.
espero que [email protected] o use.

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

@benjycui @yesmeck @ ddcat1115 @RaoHai

cc @nikogu

adicionar # 4853?

adicionar # 4853?

É difícil, pois alguns componentes usam key como parte da API, não podemos corrigir isso até renomear todos os nomes da API. por exemplo

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

Será uma alteração significativa, mas esse tipo de alteração pode ser resolvida pelo antd-codemod .

Podemos continuar discutindo em # 4853

Reescrever a demonstração em TypeScript

A demonstração será somente escrita em Type ou JS e Typescript? Espero manter ambos.

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

Certifique-se de que rc-trigger funciona com o React 16.

styled-components ou uma solução css-in-js da escolha dos mantenedores / colaboradores ainda é uma opção?
Eu adoraria e gostaria de ajudar na refatoração :)

Muitos trabalhos para migrar nossos menos arquivos para componentes estilizados, temo que não introduziremos componentes estilizados no antd 3. Mas, uma vez que os componentes estilizados podem aplicar estilos aos componentes do antd sem invadir o código do antd, então, se alguém interessar ao usar componentes estilizados com antd, aqui está um exemplo https://github.com/yesmeck/styled-antd

@codepunkt @yesmeck adoraria ver exemplos de antd com glamour

@yesmeck @ afc163 que tal
Você acha que as vantagens listadas aqui podem torná-lo mais viável do que componentes estilizados ?

Talvez esteja mais relacionado ao ecossistema de ferramentas, mas pode ser uma boa ideia garantir que o antd 3.0 funcione bem com o babel 7.
Especialmente com a geração embutida do babel typescript planejada no 7.0.
Isso poderia simplificar muito o uso de antd / typescript com criar-reagir-app

Considere descartar o suporte para IE6-8, talvez até mesmo todas as versões anteriores ao IE11.

Isso tornará o arquivo css mais fino e rápido de baixar. O React nem mesmo suporta o IE abaixo da versão 9, então .clearfix, -ms-filter etc podem ser removidos com segurança.

a formiga já suporta apenas oficialmente o IE9 +

Na quinta-feira, 12 de outubro de 2017 às 7h58, Andreas Cederström <
notificaçõ[email protected]> escreveu:

Considere descartar o suporte para IE6-8, talvez até mesmo todas as versões anteriores ao IE11.

Isso tornará o arquivo css mais fino e rápido de baixar. Reagir não
até suporta IE abaixo da versão 9, então .clearfix, -ms-filter etc podem ser seguramente
removido.

-
Você está recebendo isto porque está inscrito neste tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/ant-design/ant-design/issues/5570#issuecomment-336107229 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/ADUIEIQi6tXJB0336SQrtMrMCIHfvjNuks5srf7pgaJpZM4MuJYf
.

Está bem. Verifique se antd.css (https://cdnjs.cloudflare.com/ajax/libs/antd/2.13.6/antd.css) contém alguns hacks do IE6-8 que devem ser removidos em seguida.

Exemplo:

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

.clearfix {
  zoom: 1;
}

@andriijas Acho que foi removido em antd-3.0 , se você ainda vir algum hack, apenas PR para removê-lo, obrigado.

Eu tenho um grande problema com componentes estilizados e forma antd. Quando envolvo componentes de formulário decorados com fieldDecorator em um invólucro estilizado com componentes estilizados, os campos de formulário param de funcionar. Eu realmente não entendo esse problema, mas tenho que envolvê-lo em um <div> com estilos embutidos para fazer funcionar. Isso é realmente irritante ...

Seletor da semana !!!

@malekjaroslav que pode estar relacionado ao uso incorreto. Você pode abrir um problema no repositório de componentes estilizados, para que eu possa ajudá-lo?

@benjycui O que você acha do helper responsivo no antd3.0? Algo assim https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_display.scss in react

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

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

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

Posso fazer RP inicial se precisar de ajuda, mas precisará de ajuda com a tradução de documentação, etc.

@andriijas basta usar https://github.com/contra/react-responsive . Nós apenas adicionamos o componente UI que segue a Especificação de Design Ant ao antd. De qualquer forma, obrigado 😄

Sim, eu vi no repositório ant-design-pro. Farei um wrapper com pontos de interrupção do antd.

Ansioso por este lançamento!

Olá a todos, acabei de lançar [email protected] , consulte https://github.com/ant-design/ant-design/issues/8233

Estou ansioso para o lançamento da nova versão, porque poderei começar a usar os componentes do antd pro somente quando ela for lançada. Você ainda planeja lançá-lo no final do mês?

Obrigado por fornecer componentes de front-end tão bons, você ultrapassou o material do Google

Estou muito animado para este lançamento, pois é o bloqueador para começar a usar os novos componentes do antd Pro. O prazo de lançamento esperado ainda é o final de novembro?

Obrigado por fornecer uma biblioteca tão incrível. Vocês estão deixando a IU de materiais do Google é a poeira.

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

Ant Design 3.0 lançado agora! 🎉 🎉 🎉

+1 para suporte a componentes estilizados / emoção / fela em uma versão futura.