BlazorMarkdownEditor
Rewrite the Markdown Editor for Blazor with EasyMDE
Este es un componente del editor de Markdown para Blazor WebAssembly y Blazor Server con .NET8. El componente se basa en EasyMDE versión 1.0.x para crear el editor. Decidí crear mi repositorio para la biblioteca JavaScript porque quería tener control sobre las actualizaciones y los cambios. El componente es un envoltorio alrededor de la biblioteca JavaScript y es un componente Blazor que le permite usar el editor de Markdown en su aplicación Blazor.
Para obtener más documentación y ayudar a este componente, visite la publicación que creé aquí.
Pruebe el editor de Markdown en línea (la carga no está habilitada)
Agregue el editor a su _Imports.razor
@using PSC.Blazor.Components.MarkdownEditor
@using PSC.Blazor.Components.MarkdownEditor.EventsArgs
Luego, en su index.html , host.html o App.razor agregue esas líneas:
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/markdowneditor.css" rel="stylesheet" />
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/easymde.min.css" rel="stylesheet" />
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/markdownEditor.js"></script>
Recuerde que también se requiere jQuery . El componente contiene el script del editor Easy Markdown versión 1.0.x que también es mantenida por mí mismo. Puede agregar este script en su proyecto, pero si usa el script en el componente, está seguro de que funciona bien y se prueban todas las funcionalidades.
El CSS markdowneditor.css contiene el estilo para las mismas etiquetas que agregué en el editor de Markdown, como att , note , tip , warn y video .
En una página Razor , podemos agregar el componente con estas líneas
<div class="col-md-12">
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged" />
<hr />
<h3>Result</h3>
@((MarkupString)markdownHtml)
</div>
@code {
string markdownValue = "#Markdown EditornThis is a test";
string markdownHtml;
Task OnMarkdownValueChanged(string value)
{
return Task.CompletedTask;
}
Task OnMarkdownValueHTMLChanged(string value)
{
markdownHtml = value;
return Task.CompletedTask;
}
}
El principal diferente entre value y ValueHTMLChanged es ese Value devolver el texto escrito en el editor como una cadena, mientras que ValueHTMLChanged devuelve el código HTML renderizado para el texto. El ValueHTMLChanged incluye el código para mostrar gráficos de sirena en una etiqueta SVG .
El resultado es un buen editor de Markdown como en la siguiente captura de pantalla. Esta es una captura de pantalla de la demostración en este repositorio.
En su editor de Markdown, agregue el siguiente código
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false"
CustomButtonClicked="@OnCustomButtonClicked">
<Toolbar>
<MarkdownToolbarButton Action="MarkdownAction.Bold" Icon="fa fa-bolt" Title="Bold" />
<MarkdownToolbarButton Separator Name="Custom button"
Value="@("Hello from your custom Toolbar Button")"
Icon="fa fa-star"
Title="A Custom Button" />
<MarkdownToolbarButton Separator Name="https://github.com/erossini/BlazorMarkdownEditor"
Icon="fa fab fa-github" Title="A Custom Link" />
</Toolbar>
</MarkdownEditor>
@code {
// omitted code...
Task OnCustomButtonClicked(MarkdownButtonEventArgs eventArgs)
{
Console.WriteLine("OnCustomButtonClicked -> " + eventArgs.Value);
buttonText += "OnCustomButtonClicked -> " + eventArgs.Value + "<br />";
return Task.CompletedTask;
}
}
En la etiqueta MarkdownEditor , agrega la nueva Toolbar pestaña que contiene una o más MarkdownToolbarButton .
Cada MarkdownToolbarButton puede tener una de las Action predeterminadas (ver la tabla a continuación) o un valor personalizado, por ejemplo, un enlace a un sitio web. Si desea mostrar antes de un MarkdownToolbarButton una línea vertical, agregue el Separator de propiedades en el MarkdownToolbarButton .
En los mismos casos, desea actualizar el contenido del editor de Markdown después del primer init, por ejemplo porque su aplicación tiene que leer el valor de una API y lleva tiempo. Para eso, debe agregar una ref al MarkdownEditor y luego usarlo para llamar a la propiedad SetValueAsync , como en el siguiente código
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1" />
@code {
MarkdownEditor Markdown1;
// omitted code...
async Task ChangeText()
{
markdownValue = "Test!";
await Markdown1.SetValueAsync(markdownValue);
}
}
Para agregar más funciones al componente, incluye la versión de Mermaid.js 10.2.1 que permite agregar diagramas y gráficos impresionantes en el componente de Markdown como
Para agregar esta funcionalidad al editor de Markdown, es suficiente agregar en el index.html este script
< script src = "/_content/PSC.Blazor.Components.MarkdownEditor/js/mermaid.min.js" > </ script >El script verificará si se llama a esta biblioteca. Si se agrega a la página, el editor Markdown automáticamente agregará un botón en la barra de herramientas para insertar la etiqueta para sirena. Esa etiqueta es
```mermaid
```
Usando este script en el componente
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
o el CDN
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
El render de sirena no funcionará. El error es
E.Replace no es una función
Por lo tanto, recomiendo actualizar el script con el nuevo como describo en el siguiente párrafo.
El uso de la nueva versión de Mermaid del 10.9.1 requiere agregar este código en index.html , host.html o App.razor
<script type="module">
import mermaid
from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
Por el momento, estoy tratando de encontrar una manera de incluir este script en markdownEditor.js pero no estoy seguro de que funcione.
### An example of the mermaid graphs
A ** Sequence diagram ** is an interaction diagram that shows how processes operate with one another and in what order .SECHENDIAGRAM ALICE->> John: Hola John, ¿cómo estás? John->> Alice: ¡Genial! Alice-) John: ¡Nos vemos más tarde!
A **Gantt chart** is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
Título de Gantt A Gantt Diagrama DateFormat Yyyyy-MM-DD Sección A Tarea: A1, 2014-01-01, 30d Otra tarea: después de A1, Sección 20D otra tarea en la SEC: 2014-01-12, 12d Otra tarea: 24D
An **entity–relationship model** (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types).
Erdiagram Customer || --o {orden: Orden de lugares ||-| {Line-Item: Contiene Customer} | .. | {Delivery-Address: usa
## Add Highlight.js
This script is not included in the component but the component can detect if _Highlight.js_ is loaded. In this case, the Markdown Editor renders also the code in one of the supported languages.
To enable this function, add the script in your project and then in the `index.html` add the following lines
Si ambas bibliotecas se cargan en el índice.html , el render de sirena no funcionará.
En el markdown, hay algunas etiquetas faltantes para mostrar información útil en la página como una nota destacada, un consejo, una advertencia o un mensaje de atención. Entonces, los agregué en este editor de Markdown. Un ejemplo del resultado de esta implementación está en la siguiente captura de pantalla.
Para agregar el mensaje, haga clic en los iconos en la barra de herramientas en el editor o agregue esos comandos:
| Dominio | Color | Descripción |
|---|---|---|
| `` `ATT | Rojo | Muestra un mensaje de atención |
| `` `nota | Azur | Agregue una nota en el documento |
| `` `TIP | Verde | Muestra un mensaje de consejo |
| `` `Warn | Naranja | Este es un mensaje de advertencia |
En el componente del editor de Markdown, hay un CSS para ellos llamados alert.css y puede agregarlo al index.html con esta línea si no ha agregado el markdowneditor.css
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/alert.css" rel="stylesheet" />
Por defecto, el editor de Markdown guarda el texto en el almacenamiento local del navegador.
El AutoSaveEnabled es True y el AutoSaveSubmitDelay está configurado hasta 5000 milisegundos. Esto significa que el texto se guarda cada 5 segundos.
Si desea limpiar el texto guardado, puede usar el siguiente código
<MarkdownEditor @bind-Value="@markdownValue" MaxHeight="300px"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1"
AutoSaveEnabled="true" />
@code {
MarkdownEditor Markdown1;
async Task DeleteStorage()
{
await Markdown1.CleanAutoSave();
}
}
En el editor de Markdown, puede agregar un video en el texto. El video puede ser de YouTube, Vimeo o cualquier otro proveedor de videos. El video se muestra en el editor y en el código HTML renderizado.
```video
https://www.youtube.com/shorts/JY1zFZgX6zM
```
El editor de Markdown para Blazor tiene una colección estensiva de propiedades para mapear todas las funcionalidades en la versión de JavaScript. En este repositorio, hay 2 proyectos:
Index.razor donde muestro cómo usar el componente con las funciones básicas y la Upload.razor . Para probar la carga, el proyecto MarkdownEditorDemo.Api debe ejecutarse| Nombre | Descripción | Tipo | Por defecto |
|---|---|---|---|
| AutoSaveEnabled | Obtiene o establece la configuración para el guardado automático. Guarda el texto que se está escribiendo y lo cargará en el futuro. Olvidará el texto cuando se envíe el formulario en el que está contenido. Recomendado para elegir una identificación única para el editor de Markdown. | bool | FALSO |
| Autosaveid | Obtiene o establece el identificador de guardado automático. Debe establecer un identificador de cadena único para que el componente pueda avanzar. Algo que separa esto de otras instancias del componente en otras partes de su sitio web. | cadena | Valor predeterminado |
| AutoSavedelay | Retraso entre salvamentos, en milisegundos. El valor predeterminado a 10000 (10s). | intencionalmente | 10000 (10s) |
| AutoSavesubmitdelay | Retraso antes de asumir que el envío del formulario falló y guardando el texto, en milisegundos. | intencionalmente | 5000 (5s) |
| AutoSavetexto | Texto para autosave | cadena | Autoenavido: |
| AutosavetimeFormatlocale | Establezca el formato para que se muestre la tiempo de detención. Para obtener más información, consulte las instancias de documentación de JavaScript DateTimeFormat | cadena | en-us |
| AutosavetimeFormatyear | Establezca el formato para el año | cadena | numérico |
| AutosavetimeFormatMonth | Establezca el formato para el mes | cadena | largo |
| AutoSavetimeFormatday | Establezca el formato para el día | cadena | 2 dígito |
| AutosavetimeFormathour | Establezca el formato para la hora | cadena | 2 dígito |
| AutosavetimeFormatminute | Establezca el formato por el minuto | cadena | 2 dígito |
| Autodownloadfontawesome | Si se establece en True, Force Descargas Font Awesome (usado para iconos). Si se establece en False, evita la descarga. | ¿Bool? | nulo |
| CaracteresStatusText | Establezca las palabras para mostrar en la barra de estado para el conteo del personaje | cadena | characters: |
| CustomButtonclicked | Ocurre después de hacer clic en el botón de la barra de herramientas personalizada. | Eventcallback | |
| Personalización personalizada | Establece un controlador de carga de imagen personalizado | ||
| Dirección | RTL o LTR. Cambia la dirección del texto para admitir los idiomas de derecha a izquierda. El valor predeterminado a LTR. | cadena | LTR |
| ErrorMessages | Los errores que se muestran al usuario, utilizando la opción ErrorCallback, donde Image_Name , Image_Size e Image_Max_Size serán reemplazados por sus valores respectivos, que se pueden usar para la personalización o la internacionalización. | MarkdownerRormessages | |
| Escondite | Una variedad de nombres de iconos para esconderse. Se puede usar para ocultar iconos específicos que se muestran por defecto sin personalizar completamente la barra de herramientas. | cadena[] | 'De lado', 'pantalla completa' |
| Imaginación | Una lista separada por comas de tipos MIME utilizados para verificar el tipo de imagen antes de la carga (nota: Nunca confíe en el cliente, siempre verifique los tipos de archivos en el lado del servidor). El valor predeterminado a Image/PNG, Image/JPEG, Image/JPG, Image.gif. | cadena | Image/PNG, Image/JPEG, Image/JPG, Image.gif |
| Imagecsrftoken | Token CSRF para incluir con la llamada AJAX para cargar la imagen. Por ejemplo, utilizado con Backend de Django. | cadena | |
| ImageMaxSize | Tamaño de imagen máximo en bytes, marcado antes de la carga (nota: Nunca confíes en el cliente, siempre verifique el tamaño de la imagen en el lado del servidor). El valor predeterminado es 1024 * 1024 * 2 (2MB). | largo | 1024 * 1024 * 2 (2mb) |
| ImagePathabsolute | Si se establece en True, tratará ImageUrl desde ImageUploadFunction y Filepath devuelto desde ImageUploadendpoint como una ruta absoluta en lugar de relativa, es decir, no prepend window.location.origin. | cadena | |
| ImageTexts | Los textos que se muestran al usuario (principalmente en la barra de estado) para la función Importar imagen, donde Image_Name , Image_Size e Image_Max_Size serán reemplazados por sus valores respectivos, que se pueden usar para la personalización o la internacionalización. | MarkdownimageTexts | nulo |
| Imageuploadenticationschema | Si se requiere una autenticación para la API, asigne a esta propiedad el esquema para usar. Bearer es el común. | cadena | vacío |
| ImageUploadauthenticationToken | Si se requiere una autenticación para la API, asigne a esta propiedad el token | cadena | vacío |
| Lineros | Si se establece en True, habilita los números de línea en el editor. | bool | FALSO |
| LiesstatusText | Establezca las palabras para mostrar en la barra de estado para el conteo de la línea | cadena | lines: |
| Envasado | Si se establece en falso, deshabilite el envoltorio de línea. El valor predeterminado es verdadero. | bool | FALSO |
| Markdownurl | Establezca la URL para la guía de Markdown. | Enlace a la guía de Markdown | |
| Maxheight | Establece altura fija para el área de composición. La opción Minheight será ignorada. Debe ser una cadena que contenga un valor CSS válido como "500px". El valor predeterminado es indefinido. | cadena | |
| Maxuploadimagemessage | Obtiene o establece el tamaño del mensaje MAX al cargar el archivo. | largo | 20 * 1024 |
| Mínimo | Establece la altura mínima para el área de composición, antes de que comience el crecimiento automático. Debe ser una cadena que contenga un valor CSS válido como "500px". El valor predeterminado es "300px". | cadena | 300px |
| Nativopellchecker | Habilitar (verdadero) o deshabilitar (falso) el corrector ortográfico en el editor | bool | Verdadero |
| Marcador de posición | Si se establece, muestra un mensaje de marcador de posición personalizado. | cadena | nulo |
| Segmentfetchtimeout | Obtiene o establece el tiempo de espera del segmento para obtener el tiempo al cargar el archivo. | Pasta de tiempo | 1 min |
| Showicons | Una variedad de nombres de iconos para mostrar. Se puede usar para mostrar íconos específicos ocultos de forma predeterminada sin personalizar completamente la barra de herramientas. | cadena[] | 'Código', 'Tabla' |
| Corrector ortográfico | Habilitar (verdadero) o deshabilitar (falso) el corrector ortográfico en el editor | bool | Verdadero |
| Tabsize | Si se establece, personalice el tamaño de la pestaña. El valor predeterminado a 2. | intencionalmente | 2 |
| Tema | Anular el tema. El valor predeterminado a Easymde. | cadena | Easymde |
| Barra de herramientas | [Opcional] obtiene o establece el contenido de la barra de herramientas. | Fragmento de renderizado | |
| Barras de herramientas | Si se establece en False, desactive los consejos de botón de la barra de herramientas. El valor predeterminado es verdadero. | bool | verdadero |
| Cargarimagen | Si se establece en True, habilita la funcionalidad de carga de imagen, que puede activarse por arrastrar a drop, copiar pete y a través de la ventana de archivo de navegación (abierto cuando el usuario hace clic en el icono de imagen de carga). El valor predeterminado es falso. | bool | FALSO |
| Valor | Obtiene o establece el valor de Markdown. | cadena | nulo |
| Valorhtml | Obtiene el HTML del valor de Markdown. | cadena | nulo |
| WordSstatusText | Establezca las palabras para mostrar en la barra de estado para el recuento de la palabra | cadena | words: |
| Nombre | Descripción | Tipo |
|---|---|---|
| ErrorCallback | Una función de devolución de llamada utilizada para definir cómo mostrar un mensaje de error. El valor predeterminado es (errorMessage) => alerta (errorMessage). | Func <string, tarea> |
| Imageuploadchanged | Ocurre cada vez que la imagen seleccionada ha cambiado. | Func <filechangedeventargs, tarea> |
| Imageuploadended | Ocurre cuando una carga de imagen individual ha terminado. | Func <fileEseDEventargs, tarea> |
| Imageuploadendpoint | El punto final donde se enviarán los datos de las imágenes, a través de una solicitud posterior asincrónica. Se supone que el servidor guardar esta imagen y devolver una respuesta JSON. | cadena |
| ImageUploadProgressed | Notifica el progreso de la imagen que se está escribiendo en la transmisión de destino. | FUNC <FileProgressedEventArgs, Tarea> |
| ImageUploadStarted | Ocurre cuando ha comenzado una carga de imagen individual. | Func <fileStartedEventArgs, tarea> |
| Valuechanged | Un evento que ocurre después de que el valor de Markdown ha cambiado. | Eventcallback |
| Valorhtmlchanged | Un evento que ocurre después del valor de Markdown ha cambiado y el nuevo código HTML está disponible. | Eventcallback |
El editor de Markdown para Blazor puede encargarse de cargar un archivo y agregar el código de markdown relativo en el editor. Para eso, la propiedad UploadImage la propiedad tiene que establecerse en true . Además, la API de carga debe especificarse en la propiedad ImageUploadEndpoint . En algunos casos, la API requiere una autenticación. Las propiedades ImageUploadAuthenticationSchema y ImageUploadAuthenticationToken le permiten pasar el esquema y el token correctos para usar en la llamada.
Esos valores se agregarán a la solicitud POST HttpClient en el encabezado. Solo si ambas propiedades no son nulas, se agregarán al encabezado.
Si desea comprender mejor cómo crear la API para la carga, he creado una publicación específica en PureSourCecode.
A continuación se presentan los iconos de la barra de herramientas incorporados (solo algunos de los cuales están habilitados de forma predeterminada), que pueden reorganizarse como desee. "Nombre" es el nombre del icono, referenciado en el JS. "Acción" es una función o una URL para abrir. "Clase" es la clase dada al icono. "ToolTip" es la pequeña información sobre herramientas que aparece a través del atributo title="" . Tenga en cuenta que los sugerencias de acceso directo se agregan automáticamente y reflejan la acción especificada si tiene un enlace de clave asignado (es decir, con el valor de action establecido en bold y el de tooltip establecido en Bold , el texto final que el usuario verá sería "Bold (CTRL-B)").
Además, puede agregar un separador entre cualquier icono agregando "|" a la matriz de la barra de herramientas.
| Nombre | Acción | Comedia de herramientas Clase |
|---|---|---|
| atrevido | volumen | Atrevido FA FA-BOLD |
| itálico | togado | Itálico fa fa-italic |
| fusible | togglestrikethrough | Fusible fa fa-strikethrough |
| título | palanca de togasmaller | Título FA FA-HEADER |
| encabezado | palanca de togasmaller | Encabezado más pequeño FA FA-HEADER |
| titular | toggleheadingbigger | Encabezado más grande FA FA-LG FA-HEADER |
| encabezado-1 | Toggleheading1 | Gran rumbo FA FA-Header Header-1 |
| encabezado-2 | togleheading2 | Encabezado mediano FA FA-Header Header-2 |
| encabezado 3 | togleheading3 | Pequeño rumbo FA FA-Header Header-3 |
| código | togglecodeblock | Código Código FA FA |
| cita | toggleblockquote | Cita fa fa-quote-izquierda |
| lista desordenada | toggleunorderedlist | Lista genérica fa fa-list-ul |
| Lista ordenada | toggleOrderDlist | Lista numerada fa fa-list-ole |
| bloqueo limpio | bloqueo limpio | Bloqueo FA FA-ERASER |
| enlace | recubrimiento | Crear enlace FA FA-LINK |
| imagen | dibujo | Insertar imagen FA FA-PICTURE-O |
| mesa | dibujo | Tabla de insertar FA FA Table |
| regla horizontal | hormigón | Insertar línea horizontal FA FA-MINUS |
| avance | togglePreview | Vista previa de alternar fa fa-eye no-desesable |
| de lado a lado | ToggleSidebyside | Alternar uno al lado del otro FA FA-Columns No-Mobile No-Mobile |
| pantalla completa | pantallas | Alternar pantalla completa FA FA-Arrows-Alt No-Mobile |
| guía | Este enlace | Guía de markdown FA FA-Question-Circle |
Easymde viene con una variedad de atajos de teclado predefinidos, pero se pueden alterar con una opción de configuración. La lista de los predeterminados es la siguiente:
| Atajo (Windows / Linux) | Atajo (macOS) | Acción |
|---|---|---|
| Control-' | Cmd- ' | "ToggleBlockquote" |
| CTRL-B | CMD-B | "ToggleBold" |
| CTRL-E | CMD-E | "Cleanblock" |
| CTRL-H | CMD-H | "ToggleHheadingsMaller" |
| CTRL-I | CMD-I | "ToggleTitalic" |
| Ctrl-K | Cmd-k | "Retirada" |
| Ctrl-L | CMD-L | "ToggleUnorderedList" |
| CTRL-P | CMD-P | "TogglePreview" |
| Ctrl-alt-c | Cmd-alt-c | "togglecodeblock" |
| Ctrl-alt-i | CMD-Alt-I | "Drawimage" |
| Ctrl-alt-L | Cmd-alt-l | "toggleOrderedList" |
| Shift-Ctrl-H | Shift-CMD-H | "toggleheadingbigger" |
| F9 | F9 | "Togglesidebyside" |
| F11 | F11 | "ToggleFullScreen" |
Mucha gente me envió la misma pregunta. Mis componentes (MarkdownEditor, DataTable, SVG Icon y otros que se encuentran en mi GitHub) son Freeware.
Le pido que contribuya al proyecto de una de las siguientes maneras:
Si no sabe cómo hacerlo o usted:
Luego, puede comprar una de la licencia de soporte que creé. Hay diferentes precios. La cantidad es su decisión. Encuentra tener una lista completa en PureSourCecode Shop
La contribución te da:
| Nombre de componente | Foro | Descripción |
|---|---|---|
| Datakable para Blazor | Foro | Componente de datos para Blazor WebAssembly y Blazor Server |
| Editor de Markdown para Blazor | Foro | Este es un editor de Markdown para usar en Blazor. Contiene una vista previa en vivo, así como una guía de ayuda integrada para los usuarios. |
| Detección del navegador para Blazor | Foro | Detección del navegador para Blazor WebAssembly y Blazor Server |
| Codesnipper para Blazor | Foro | Agregue el fragmento de código en sus páginas Blazor para 196 lenguajes de programación con 243 estilos |
| Copiar al portapapeles | Foro | Agregue un botón para copiar texto en el clipbord |
| Iconos y banderas de SVG para blazor | Foro | Biblioteca con muchos iconos SVG y banderas SVG para usar en sus páginas de afeitar |
| Diálogo modal para blazor | Foro | Diálogo modal simple para Blazor WebAssembly |
| PSC.EXTENSIONES | Foro | Muchas funciones para .NET5 en un paquete Nuget que puede descargar de forma gratuita. Recopilamos en este paquete funciones para el trabajo diario para ayudarlo con reclamos, cadenas, enums, fecha y hora, expresiones ... |
| Pluma para blazor | Foro | Quill Component es un control reutilizable personalizado que nos permite consumir fácilmente Quill y colocar múltiples instancias en una sola página en nuestra aplicación Blazor |
| Segmento para blazor | Foro | Este es un componente de segmento para el ensamblaje web de Blazor y el servidor Blazor |
| Pestañas para blazor | Foro | Este es un componente de pestañas para el ensamblaje web de Blazor y el servidor Blazor |
| Mapa mundial para Blazor | Foro | Mostrar mapas mundiales con sus datos |
