search

matias-arabolaza / store-framework

https://lab.github.com/vtex-trainings/store-framework-espanol
0 stars 0 forks source link

Explorando el poder de rich text #19

Open github-learning-lab[bot] opened 4 years ago

github-learning-lab[bot] commented 4 years ago

Explorando el poder de rich text

:sparkles: Branch: richtextmarkdown

Introducción

Como hemos visto, Markdown es un lenguaje de marcado amigable que se puede convertir fácilmente a HTML. En esta lección, veremos cómo puede usar este lenguaje en nuestro bloque Rich Text para crear textos interesantes.

Rich Text con Markdown

Para incluir textos en el bloque de rich-text, es necesario utilizar la prop text:

  "rich-text#home1": {
    "props": {
      "text": "Meu texto",
      "textPosition": "LEFT",
      "textAlignment": "LEFT"
    }

La prop text acepta el formato de markdown. Por lo tanto, si usted desea escribir su texto utilizando este lenguaje, su código debería quedar semejante a este:

```json
  "rich-text#home1": {
    "props": {
      "text": "# Meu título h1 \n Escreva aqui um parágrafo \n ## Meu título h2 \n Escreva aqui seu segundo parágrafo \n Inclua aqui uma lista \n - Item 1 \n - Item 2 \n - Item3",
      "textPosition": "LEFT",
      "textAlignment": "LEFT"
    }

CONSEJO: Utilice siempre el comando \n para saltar líneas al utilizar markdown en la prop text .

Otras propiedades del componente rich-text pueden encontrase en la documentación oficial del Store Framework.

Actividad

  1. Dentro del archivo about-us.jsonc, cambie el texto de tab-list.item#home1 para que aparezca un "Sobre" en la primera pestaña.

  2. En el contenido rich-text asociado a esta pestaña, utilice el siguiente texto:

# Nossa História \n ### Nascemos de uma hackathon interna da VTEX! \n Isso mesmo. A primeira Hackatheme (hackathon de temas de loja) da VTEX teve 3 finalistas. Um deles foi a FlatFlat, essa loja que vocês estão acessando agora. A FlatFlat foi criada pelos engenheiros Afonso Praça e Sávio Muniz, pelos designers Lucas Falcão e Augusto Barbosa, e pelo diretor de novos negócios Maurício Baum. Como a loja foi criada por profissionais com os mais diversos backgrounds, o resultado ficou óbvio: foram finalistas com o layout mais legal dentre os participantes.
  1. Coloque el título y el subtítulo en negrita.

Resultado esperado:

:information_source: Recuerde acceder a la documentación del Rich Text si tiene alguna duda durante la actividad.

:no_entry_sign: ¿Perdido?

¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:

Crear feedback

Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar el siguiente enlace:

https://github.com/matias-arabolaza/store-framework/issues/2

github-learning-lab[bot] commented 4 years ago

¡Ha completado este paso con éxito!

Vaya al siguiente paso:

Insertando un Iframe en nuestra página institucional

vtex-course-hub[bot] commented 4 years ago

Oopsie, something went wrong :crying_cat_face:

Results

:x::white_check_mark::white_check_mark:

Tests

:x: Your tab-list.item#home1 block does not have the correct label text :white_check_mark: Update the text content of the rich-text block associated with tab-list.item#home1 :white_check_mark: Make the title and subtitle and the markdown text bold

Try again :grin:

vtex-course-hub[bot] commented 4 years ago

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Update the label of tab-list.item#home1 :white_check_mark: Update the text content of the rich-text block associated with tab-list.item#home1 :white_check_mark: Make the title and subtitle and the markdown text bold