Ant-design: [email protected]

Actualizado.

Actualizado.

https://github.com/ant-design/ant-design/issues/5140 puede ser un campo de juegos editable.

Tal vez un tamaño de fuente predeterminado más grande, siguiendo el plan de nuestro diseñador.

Refactorizar cloneElement a context ?

1. Menú
2. Pestañas

reabrir # 1473?

Todavía espero un soporte i18n integrado más robusto https://github.com/ant-design/ant-design/issues/5554#issuecomment -290372828

¿Mejorar y perfeccionar el comentario de la definición del componente ts?

¿Qué pasa con las herramientas de 2-> 3, o incluso 1-> 3?

@yesmeck esto https://github.com/ant-design/ant-design/issues/5570#issuecomment -290622803 significa que debemos renunciar a Tabs.TabPane[key] y Menu.Item[key] ...

Todavía espero un soporte i18n integrado más robusto # 5554 (comentario)

@plandem que estoy evaluando, sigamos discutiendo en ese tema.

¿Mejorar y perfeccionar el comentario de la definición del componente ts?

@infeng, es por eso que quiero volver a escribir la demostración en TypeScript, para que podamos notar problemas en la definición https://github.com/ant-design/ant-design/issues/5390

¿Qué pasa con las herramientas de 2-> 3, o incluso 1-> 3?

Sí, todavía necesitamos proporcionar herramientas como https://github.com/ant-design/ant-design/issues/3759#issuecomment -272353773, aunque no es una solución perfecta

@sorrycc ¿qué piensas de webpack@2 ?

¿Algún progreso sobre el editor de texto enriquecido? N.º 1083

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

Es posible que el editor no esté en nuestro plan reciente por ahora.

ThemeProvider debe discutirse en https://github.com/ant-design/ant-design/issues/5656

Pero no estoy seguro de si tenemos tiempo para introducirlo en [email protected] .

Agregar nueva función para Chart
Como Pie, hisgram, etc.

Agregar nueva función para Chart
Yo estoy en contra. Es una clase diferente de componentes.

Si desea gráficos del mismo equipo, puede probar este:
https://antv.alipay.com/index.html

El único componente que falta en antd y que me encuentro implementando una y otra vez en todos los proyectos es una barra lateral fuera de la pantalla.

react-sidebar es un buen componente, pero rompe todo lo que tiene que ver con el desplazamiento en la página, por lo que es bastante inútil. ¡Una barra lateral integrada, preferiblemente con soporte para deslizar en dispositivos táctiles, sería mi mayor deseo para 3.0!

@JesperWe Creo que lo que necesitas es Layout.Sider

@benjycui En realidad, no he visto el Sider durante unos meses, veo que tiene un disparador personalizado desde 2.6, lo que lo hace más útil que antes. Sin embargo, aún aprieta la columna de contenido para que se vuelva más estrecha cuando aparece, por lo que no se puede usar como barra lateral.

Pero podría extenderse para que funcione como una barra lateral con algunos accesorios nuevos:

• cover: true para que aparezca en la parte superior del contenido de la página en lugar de apretarlo.
• mask: true para mostrar una máscara sobre la parte no cubierta de la página cuando Sider está arriba.
• maskCloseable: true para que colapse cuando se hace clic en el exterior.

y finalmente en un mundo de ensueño

• swipeable: true para soportar mejor los dispositivos táctiles (pero como probablemente esté pensando en antd como una cosa de escritorio, esto también podría lograrse fuera de antd).

@benjycui @JesperWe En la demostración de Layout.Sider , el contenido se comprime (lo cual es malo) cuando Sider se abre en el móvil.

¿Es posible empujar el contenido hacia la derecha también? ¿O colocar el Sider sobre el contenido?

Otro cambio importante que quiero hacer en la próxima versión principal y quiero que brinde un consejo: https://github.com/ant-design/ant-design/issues/6139

@JesperWe entonces, lo que necesitas es algo como Drawer .

Y no deberíamos discutir los detalles de las características aquí, solo abrir un nuevo tema para discutir.

@benjycui Ok, reformulo mi sueño 3.0 :-): Algo como Drawer integrado en antd (porque agregar antd-mobile / Drawer hace que el paquete sea mucho más grande y agrega muchas cosas nativas de reacción no deseadas)

Compare los resultados y considere el rollup como empaquetador de bibliotecas.

He aquí algunos pensamientos:
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

Compare los resultados y considere el rollup como empaquetador de bibliotecas.

Podemos hacer esto en 2.x, ya que los desarrolladores no sentirán ningún cambio.

Y puede abrir un nuevo número para discutir esta idea @plandem

Intente reemplazar menos con https://github.com/styled-components/styled-components

Acerca de los componentes con estilo, también tengo problemas:

• la biblioteca de autoprefixer puede no ser muy confiable en comparación con postcss https://github.com/styled-components/styled-components/blob/master/src/utils/autoprefix.js#L6. ¿O podemos decir, una vez que elija css-in-js, perderemos la conveniencia del sistema de complementos post-css, como px-to-rem?
• tenemos que mantener el nombre de clase css actual completo para la compatibilidad, mientras que los componentes con estilo generarán su propio nombre de clase para el estilo, ¿será redundante y difícil de mantener?

Por eso existía try , la compatibilidad es un gran problema que tenemos que considerar.

tenemos que mantener el nombre de clase css actual completo para la compatibilidad, mientras que los componentes con estilo generarán su propio nombre de clase para el estilo, ¿será redundante y difícil de mantener?

En realidad, esto no es un problema. Los nombres de clases CSS actuales no son solo por compatibilidad, sino también selectores que podemos usar en la prueba (por ejemplo, enzima). Entonces, debemos mantenerlos.

@paranoidjk @ afc163 @benjycui

Hola, soy uno de los contribuyentes principales de componentes con estilo y encontré este hilo debido a un problema abierto en nuestro repositorio (ver arriba), que me informó que esta biblioteca no es compatible con SC. Por casualidad encontré esta conversación: guiño: - Ok, contexto a un lado ahora

la biblioteca de autoprefixer puede no ser muy confiable en comparación con postcss

Hemos elegido cuidadosamente stylis y estamos trabajando en estrecha colaboración con @thysultan , que lo desarrolla. No lo habríamos elegido, si no fuera un reemplazo digno de PostCSS y los pocos problemas que tenía (un par de prefijos faltantes en v3), se resolvieron muy rápidamente. La v2 en sí ha estado en proceso durante unos meses por cierto, y ahora finalmente está disponible. Definitivamente podemos dar fe de esa parte. Deje que este detalle de implementación sea nuestra preocupación, si opta por SC: smile:

El archivo al que está apuntando no está en uso y se eliminó ahora por cierto, y es parte del antiguo prefijo automático con inline-style-prefixer. Pero incluso eso es (y fue para nosotros) una solución muy, muy, muy confiable en toda la comunidad css-in-js de @rofrischmann.

¿O podemos decir, una vez que elija css-in-js, perderemos la conveniencia del sistema de complementos post-css, como px-to-rem?

Dado que en las interpolaciones en nuestros literales de plantilla etiquetados puede usar cualquier JS, las funciones simples pueden reemplazar todas esas cosas. De hecho, tenemos un proyecto separado llamado "pulido" que es como el lodash para CSS-in-JS y viene con todos los mixins (es decir, funciones auxiliares) que esperarías de SASS / LESS y similares: https: // pulido. js.org

(De hecho, ya no usamos PostCSS como se mencionó anteriormente, ni hemos admitido sus complementos por cierto)

tenemos que mantener el nombre de clase css actual completo para la compatibilidad, mientras que los componentes con estilo generarán su propio nombre de clase para el estilo, ¿será redundante y difícil de mantener?

Si necesita adjuntar nombres de clases personalizados, puede usar fácilmente nuestro método .attrs , que le permite adjuntar accesorios adicionales a un componente. Por ejemplo:

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

Algunas ventajas y características más:

• Escribe solo CSS (como ya sabrá), y las únicas adiciones son los símbolos y el anidamiento
• No hay mapeo de estilos + componentes
• Todo es un componente
• Puede escribir mixins / estilos compartidos con nuestro css helper

Estoy aquí si necesitas más ayuda. Sin embargo, si necesita más información, consulte nuestro nuevo sitio web: 100: https://styled-components.com

@philpl @benjycui

Los nombres de clases CSS actuales no son solo por compatibilidad, sino también selectores que podemos usar en la prueba (por ejemplo, enzima). Entonces, debemos mantenerlos.

La mayoría de los selectores de clases en las pruebas parece que podrían reemplazarse con selectores de nombre para mostrar . Esto no es cierto para todas las pruebas, pero nos llevaría la mayor parte del camino. No me importaría asumir esto.

Un lugar en el que los componentes con estilo podrían ayudar es en la personalización del tema . Parece que nos daría más flexibilidad que el primer enfoque y una mejor optimización que el segundo enfoque.

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

Segundo @philpl - POR FAVOR, haz que el estilo sea mucho más fácil en Ant Design. Actualmente es un verdadero dolor de cabeza. styled-components es increíble.

Creo que podemos resolver este problema al mismo tiempo https://github.com/ant-design/ant-design/issues/4998 , si refactorizamos a styled-component .

PD: Esto no significa que styled-component pueda resolver este problema, solo porque podemos hacer esto al mismo tiempo para reducir el trabajo.

Actualizado:

Así es como actualmente estoy diseñando Ant Design en un proyecto de React. No es el mejor, porque tenemos que pasar por la biblioteca _entire_ Ant Design y diseñar todo. No quiero molestarme con un preprocesador MENOS en create-react-app , porque es un poco molesto.

// <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;

Si Ant Design se hiciera compatible con styled-components , entonces podríamos envolver la aplicación con <ThemeProvider theme={primaryTheme}> y se diseñaría en consecuencia.

Solo me gustaría incluir a @rofrischmann como una alternativa a los componentes con estilo. Es más modular y más rápido. Tiene muchas características y poco espacio . Además, cloudflare decidió construir su interfaz de

Independientemente de lo que decidan, me encantaría ver que antd use alguna solución css-in-js en lugar de menos.

styled-components es una mejor opción para crear componentes de interfaz de usuario modernos, modulares y escalables.
lo más importante, puede hacer que los componentes se procesen de forma independiente sin ningún archivo CSS externo.
que hacen posible la importación parcial de componentes con estilos mínimos requeridos.
Espero que [email protected] lo use.

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

@benjycui @yesmeck @ ddcat1115 @RaoHai

cc @nikogu

añadir # 4853?

añadir # 4853?

Es difícil, porque algunos componentes usan key como parte de la API, no podemos arreglar esto hasta que cambiemos el nombre de todos los nombres de la API. p.ej

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

Será un cambio decisivo, pero antd-codemod puede resolverlo.

Podemos seguir discutiendo en el n. ° 4853

Reescribir la demostración en TypeScript

¿La demostración será solo de Typecript o JS y Typecript? Espero quedarme con ambos.

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

Asegúrese de que rc-trigger funcione con React 16.

¿Sigue siendo una opción styled-components o una solución css-in-js de la elección de los mantenedores / colaboradores?
Me encantaría y me gustaría ayudar con la refactorización :)

Demasiados trabajos para migrar nuestros archivos menos a componentes con estilo, me temo que no introduciremos componentes con estilo en antd 3. Pero, dado que los componentes con estilo pueden aplicar estilos al componente de antd sin interferir con el código de antd, en el uso de componentes con estilo con antd, aquí hay un ejemplo https://github.com/yesmeck/styled-antd

@codepunkt @yesmeck me encantaría ver ejemplos de antd con glamour

@yesmeck @ afc163 ¿qué tal pasar JSS para CSS-in-JS?
¿Cree que las ventajas enumeradas aquí podrían hacerlo más factible que los componentes de estilo ?

Quizás esté más relacionado con el ecosistema de herramientas, pero podría ser una buena idea asegurarse de que antd 3.0 funcione bien con babel 7.
Especialmente con la generación incorporada de babel mecanografiado planeada en 7.0.
Podría simplificar enormemente el uso de antd / mecanografiado con create-react-app

Considere eliminar el soporte para IE6-8, quizás incluso todas las versiones por debajo de IE11.

Hará que el archivo css sea más delgado y más rápido de descargar. React ni siquiera es compatible con IE por debajo de la versión 9, por lo que .clearfix, -ms-filter, etc. se pueden eliminar de forma segura.

hormiga ya solo es compatible oficialmente con IE9 +

El jueves 12 de octubre de 2017 a las 7:58 a. M., Andreas Cederström <
[email protected]> escribió:

Considere eliminar el soporte para IE6-8, quizás incluso todas las versiones por debajo de IE11.

Hará que el archivo css sea más delgado y más rápido de descargar. Reaccionar no
incluso admite IE por debajo de la versión 9, por lo que .clearfix, -ms-filter, etc.puede ser seguro
remoto.

-
Estás recibiendo esto porque estás suscrito a este hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/ant-design/ant-design/issues/5570#issuecomment-336107229 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/ADUIEIQi6tXJB0336SQrtMrMCIHfvjNuks5srf7pgaJpZM4MuJYf
.

Okay. Compruebe que antd.css (https://cdnjs.cloudflare.com/ajax/libs/antd/2.13.6/antd.css) contiene algunos trucos de IE6-8 que deben eliminarse en ese momento.

Ejemplo:

  /* 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 Creo que se ha eliminado en antd-3.0 , si todavía ves algún truco, solo PR para eliminarlo, gracias.

Tengo un gran problema con los componentes con estilo y la forma antd. Cuando envuelvo componentes de formulario que están decorados con fieldDecorator en un contenedor que tiene estilo con componentes de estilo, los campos de formulario dejan de funcionar. Realmente no entiendo este problema, pero tengo que ajustarlo a <div> con estilos en línea para que funcione. Esto es realmente molesto ...

Selector de semana !!!

@malekjaroslav que podría estar relacionado con un uso incorrecto. ¿Puede abrir un problema en el repositorio de componentes con estilo para que pueda ayudarlo?

@benjycui ¿Qué opinas del asistente de respuesta en antd3.0? Algo como esto https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_display.scss en reaccionar

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>
);

Puedo hacer PR para la inicial si necesita ayuda, pero necesitará ayuda para traducir documentación, etc.

@andriijas solo usa https://github.com/contra/react-responsive . Simplemente agregamos el componente UI que sigue la especificación de diseño de Ant a antd. De todos modos, gracias 😄

Sí, lo vi en el repositorio ant-design-pro. Haré un contenedor con puntos de interrupción de antd.

¡Esperamos este lanzamiento!

Hola a todos, acabo de publicar [email protected] , consulte https://github.com/ant-design/ant-design/issues/8233

Estoy ansioso por el lanzamiento de la nueva versión, porque solo puedo comenzar a usar los componentes antd pro cuando salga. ¿Todavía planeas lanzarlo a fin de mes?

Gracias por proporcionar componentes de interfaz tan buenos, ha superado el material de Google

Realmente emocionado por esta versión, ya que es el bloqueador para comenzar a usar los nuevos componentes antd pro. ¿Se espera que el plazo de lanzamiento sea para fines de noviembre?

Gracias por proporcionar una biblioteca tan impresionante. Ustedes están dejando que la interfaz de usuario de material de Google sea el polvo.

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

¡Ant Design 3.0 ya está disponible! 🎉 🎉 🎉

+1 para compatibilidad con componentes con estilo / emoción / fela en una versión futura.