Beagle v1.5 não é mais mantida ativamente. A versão documentada que você está visualizando pode conter funcionalidades depreciadas. Para obter as funcionalidades mais recentes, consulte a nossa última versão .
O primeiro passo que você deve fazer é criar um componente comum. Para isso, crie um novo componente em seu projeto.
Neste exemplo, o componente será criado com o nome customText
. Basta utilizar o comando abaixo no seu terminal:
ng generate component components/customText --skip-import
Neste exemplo, será criado um componente chamado CustomTextComponent
para renderizar um texto. Basta criar um novo arquivo chamado CustomTextComponent.tsx
dentro da pasta components
(se esta pasta não existir basta criá-la dentro da pasta src
).
No arquivo criado coloque o seguinte código:
import React from 'react'
function CustomTextComponent() {
return (
<p>Beagle Web React</p>
)
}
export default CustomTextComponent;
Feito isso, adicione no arquivo de associações da biblioteca Beagle do seu projeto como indicado nos exemplos a seguir.
Abra o arquivo beagle-components.module.ts
e adicione o novo CustomTextComponent
gerado na lista, como no exemplo abaixo:
...
import { CustomTextComponent } from './components/custom-text/custom-text.component'
// import all the components you're going to use with beagle
const components = [
CustomTextComponent
]
@NgModule({
declarations: components,
entryComponents: components,
exports: components,
imports: [
// everything your components depend on
],
})
export class BeagleComponentsModule {}
No arquivo beagle.module.ts
adicione seu novo componente na lista de associações
import { BeagleModule } from '@zup-it/beagle-angular'
import { CustomTextComponent } from './components/custom-text/custom-text.component'
// import all the components you wish to use with Beagle.
@BeagleModule({
baseUrl: 'http://localhost:4200/assets',
module: {
path: './beagle-components.module',
name: 'BeagleComponentsModule',
},
components: {
// Associate every beagle component to your angular component.
"custom:text": CustomTextComponent
},
})
export class Beagle {}
Se você não encontrou os arquivos beagle-components.module.ts
ou beagle.module.ts
, veja como configurar a biblioteca Beagle Web para o Angular.
Abra o arquivo de configuração da biblioteca Beagle em seu projeto (se você seguiu o tutorial é o arquivo beagle-service.ts
) e adicione o seu componente a lista de associações.
Caso você não tenha este arquivo em seu projeto, veja como configurar a biblioteca Beagle Web para o React.
import { createBeagleUIService } from '@zup-it/beagle-react'
import CustomTextComponent from '../components/CustomTextComponent'
export default createBeagleUIService<any>({
baseUrl: '',
components: {
'custom:text': CustomTextComponent
}
})
Observe que, no passo acima, a palavra custom foi adicionada para identificar os componentes. Isto fará com que a biblioteca Beagle entenda que este componente não faz parte da lista de componentes pré-definidos.
Para adicionar propriedades ao componente criado, siga os seguintes passos:
Abra o arquivo custom-text.component.ts
e adicione um @Input
, como no código abaixo:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-custom-text',
templateUrl: './custom-text.component.html',
styleUrls: ['./custom-text.component.less']
})
export class CustomTextComponent implements OnInit {
@Input() myCustomText: string
constructor() { }
ngOnInit(): void {
}
}
Feito isso, adicione a referência ao arquivo custom-text.component.html
<div>
<h1>{{myCustomText}}</h1>
</div>
Se você estiver com o projeto rodando, é necessário reiniciá-lo com um dos comandos:yarn serve
ou npm run serve
No React, todos os atributos definidos no JSON podem ser acessados através de props, veja o exemplo
import React from 'react'
interface CustomText {
myCustomText: string
}
function CustomTextComponent(props: CustomText) {
return (
<p>{props.myCustomText}</p>
)
}
export default CustomTextComponent;
Podemos agora adicionar o nosso componente ao arquivo JSON. Se você seguiu o tutorial, abra o arquivo payload.json
e o substitua com o conteúdo abaixo, caso contrário, apenas substitua a fonte de onde o seu JSON foi guardado ou gerado.
{
"_beagleComponent_": "beagle:container",
"children": [
{
"_beagleComponent_": "custom:text",
"myCustomText": "Beagle Web is Awesome"
}
]
}
Parabéns, você criou seu primeiro componente customizado no Beagle!
Lembrando que este componente recebe propriedades e é renderizado pela biblioteca Beagle.
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.