Leer en inglés

Compartir a través de


Herramientas y ejemplos

Diseñador de tarjetas

¿Necesitas una herramienta para diseñar las tarjetas? La solución es el diseñador de tarjetas adaptables basado en el explorador que se encuentra en https://adaptivecards.io/designer.

designer screenshot

Inserción del diseñador en la aplicación

Por qué enviar a los usuarios allí cuando puedes insertar el diseñador de tarjetas directamente en la aplicación web mediante nuestra biblioteca JavaScript.

Consulta el paquete adaptivecards-designer para comenzar.

Validación de esquema

La validación de esquema es una manera eficaz de facilitar la creación y la habilitación de herramientas.

Hemos proporcionado un archivo de esquema JSON completo para editar y validar las tarjetas adaptables en JSON. Ten en cuenta que la versión de la dirección URL del esquema tiene versiones; las versiones más recientes de las Tarjetas adaptables tendrán una dirección URL correspondiente.

En Visual Studio y Visual Studio Code puedes obtener IntelliSense automático mediante la inclusión de una referencia $schema.

bad

autocomplete

Ejemplo

{
    "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": []
}

Extensiones de Visual Studio Code

Estudio de tarjetas adaptables

marketplace

Con Estudio de tarjetas adaptables, puede crear tarjetas directamente en Visual Studio Code. La extensión detecta automáticamente todas las tarjetas adaptables del espacio de trabajo y le permite editar fácilmente la plantilla de tarjeta y los datos de ejemplo.

Leer más e instalarlo desde el marketplace de Visual Studio Code

Visor de tarjetas adaptables

Hemos creado una extensión de Visual Studio Code que te permite visualizar la tarjeta que estás editando en tiempo real dentro del propio editor.

extension

Para instalarla, abre el sitio de Marketplace de extensiones y busca el visor de Tarjetas adaptables.

marketplace

Uso

Al editar un archivo .json con una propiedad $schema de Tarjeta adaptable, puedes verlo mediante Ctrl+Shift+V A.

{
    "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": []
}

Opciones

La siguiente configuración de Visual Studio Code está disponible para el visor de AdaptiveCards. Se puede establecer en Configuración de usuario o Configuración del área de trabajo.

{
    // Open or not open the preview screen automatically
    "adaptivecardsviewer.enableautopreview": true,
}

Ejemplo de visualizador de WPF

El proyecto de ejemplo de visualizador de WPF le permite visualizar tarjetas con WPF o XAML en un equipo Windows. Un editor hostconfig está integrado para editar y ver los valores de configuración del host. Guarda esta configuración como un JSON para usarla en la representación de la aplicación.

wpf visualizer

Ejemplo de ImageRender de WPF

El proyecto de ejemplo de ImageRender convierte cualquier tarjeta en un PNG desde la línea de comandos mediante WPF.