Download pro editor - download do código fonte pro editor

Proeditor

A estrutura de interface do editor final e componentes

Inglês · 简体中文 · Changelog. Relatório Bug · Recurso de solicitação

Índice

? Instalação

Importante

Este pacote é apenas ESM.

Para instalar @ant-design/pro-editor , execute o seguinte comando:

$ pnpm install @ant-design/pro-editor

Compilar com Next.js

Observação

Por trabalho correto com o próximo.js ssr, adicione transpilePackages: ['@ant-design/pro-editor'] ao next.config.js . Por exemplo:

 const nextConfig = {
  transpilePackages : [ '@ant-design/pro-editor' , 'leva' , 'zustand' ] ,
} ;

? Uso

 import { SmileOutlined } from '@ant-design/icons' ;
import { ActionIcon } from '@ant-design/pro-editor' ;

export default ( ) => (
  < ActionIcon
    title = { 'Function button description' }
    icon = { < SmileOutlined /> }
    onClick = { ( ) => {
      alert ( 'Trigger action' ) ;
    } }
  />
) ;

Características

Observação

As bibliotecas de componentes do front-end revolucionaram o desenvolvimento, aumentando a eficiência por ordens de magnitude e elevando a experiência do usuário. No entanto, por mais maduro que as bibliotecas como Ant Design (ANTD) e Procomponents sejam, pode -se perguntar se há algum espaço para inovação.

Recursos capacitadores do Proeditor

Observação

Preventamos o Proeditor como a biblioteca fundamental para editar componentes, semelhante ao ANTD, permitindo que os desenvolvedores criem facilmente componentes interativos complexos com uma experiência de usuário inerentemente superior. Esta é a lógica por trás do ProEditor .

Nossos princípios para o Proeditor:

? Aste Edição Intuitiva : suporta interações naturais do usuário, como multi-seleção, desmarcação e atalhos de teclado, garantindo uma experiência de edição suave.
Refinado por padrão : aprimora os componentes do design da formiga para oferecer uma experiência superior do usuário com mais polimento e refinamento.
? Flexibilidade aberta : fornece recursos de nível atômico, oferecendo uma ampla gama de componentes, ganchos e funções de utilidade para obter uma extensa personalização e flexibilidade.

Estrutura da interface do usuário e soluções de componentes de front -end no campo Editor:

Dica

O Proeditor concentra-se em expandir os limites do viável e aumentar a variedade de ferramentas disponíveis para os desenvolvedores para a construção de aplicativos da Web sofisticados, interativos e centrados no usuário. Por exemplo:

? DraggablePanel : permite painéis redigíveis e móveis, aprimorando a interatividade da interface do usuário.
ColumnList : oferece uma lista classificável fácil de usar que é gerenciável por meio de definições de colunas, simplificando interações complexas da lista.
? Freecanvas : fornece uma tela zoomável semelhante a aplicativos como Sketch ou Figma, dando aos usuários um vasto espaço para design criativo.
? Iconpicker : uma ferramenta de seleção de ícones compatível com o ICONFONT, facilitando a integração de uma ampla gama de ícones no design.
Colaboração on-line : incorpora recursos de vários usuários usando tecnologias como YJS e Zustand Store, permitindo edição e interação colaborativa em tempo real.

Arquitetura da estrutura

O Proeditor é estruturado para facilitar esses princípios de maneira eficaz.

? Showcase

Vamos mostrar alguns dos componentes de assinatura do Proeditor:

DraggablePanel	Columnlist
Para painéis redimensíveis e móveis	Uma lista classificável fácil de usar com base nas definições de coluna

Freecanvas	Iconpicker
Uma tela zoom de zoom ilimitada semelhante ao esboço ou figma	Uma ferramenta de seleção de ícones compatível com iconfont

Colaboração online
Recursos multi-usuários embrulhados em YJs e Zustand Store.

? Compatibilidade do navegador

Observação

Navegadores modernos e Internet Explorer 11 (com poli -preenchimentos)
Elétron

Ou cloná -lo para o desenvolvimento local:

$ git clone https://github.com/ant-design/pro-editor.git
$ cd pro-editor
$ pnpm install
$ pnpm dev

? Contribuindo

Importante

Junte -se ao nosso ecossistema colaborativo. Suas contribuições são o batimento cardíaco do nosso projeto. Veja como você pode fazer parte integrante de nossa comunidade vibrante:

Integrar e inovar : incorporar Ant Design Pro, UMI e Proeditor em seus projetos. Seu uso e feedback do mundo real são inestimáveis para nós.
Voice suas idéias : Encontro uma falha? Tem uma consulta? Suas perspectivas são importantes. Compartilhe -os enviando problemas e ajude -nos a aprimorar a experiência do usuário.
Moldar o futuro : tem aprimoramentos de código ou idéias de recursos? Convidamos você a propor solicitações de tração e contribuir diretamente para a evolução da nossa base de código.

Toda contribuição, grande ou pequena, é comemorada. Junte-se a nós em nossa missão de refinar e elevar o mundo dos componentes da interface do usuário da empresa aberta. ?

? ️ ecossistema

Procomponentes - Projetado para aplicação em nível corporativo, use o design de formigas como um profissional!.
Proeditor - a estrutura e componentes da UI do editor final.
Proflow - uma base de estrutura de editor de fluxo no React -Flow.
Biblioteca de componentes do Prochat para construir rapidamente interfaces de bate -papo LLM.