Alat dan Sampel

Perancang Kartu

Perlu alat untuk merancang kartu Anda? Jangan cari lagi selain perancang kartu adaptif yang berbasis peramban di https://adaptivecards.microsoft.com/designer.

Menyematkan perancang ke dalam aplikasi Anda

Tetapi mengapa mengirim pengguna ke sana ketika Anda dapat menyematkan perancang kartu langsung ke aplikasi web Anda menggunakan pustaka JavaScript kami.

Lihat paket adaptivecards-designer untuk memulai.

Skema validasi

Validasi skema adalah cara yang ampuh untuk mempermudah penulisan dan memfasilitasi penggunaan alat bantu.

Kami telah menyediakan file Skema JSON lengkap untuk mengedit dan memvalidasi kartu adaptif di json. Perhatikan bahwa URL skema diberi versi, versi Kartu Adaptif yang lebih baru akan memiliki URL yang sesuai.

Di Visual Studio dan Visual Studio Code, Anda bisa mendapatkan fitur IntelliSense secara otomatis dengan menyertakan referensi $schema.

Example

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

Ekstensi Visual Studio Code

Adaptive Cards Studio

Dengan AdaptiveCards Studio, Anda dapat menulis kartu secara langsung di Visual Studio Code. Ekstensi secara otomatis mendeteksi semua Kartu Adaptif di ruang kerja Anda dan memungkinkan Anda dengan mudah mengedit templat kartu dan data sampel.

Baca selengkapnya dan instal dari Visual Studio Code Marketplace

Penampil Kartu Adaptif

Kami telah membuat ekstensi kode Visual Studio yang memungkinkan Anda memvisualisasikan kartu yang Anda edit secara real time di dalam editor itu sendiri.

Untuk menginstal, buka Extensions Marketplace dan cari Penampil Kartu Adaptif.

Usage

Saat Anda mengedit file .json dengan Kartu Adaptif properti $schema, Anda dapat melihatnya dengan menggunakan Ctrl+Shift+V A.

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

Opsi

Pengaturan Visual Studio Code berikut ini tersedia untuk Penampil AdaptiveCards. Ini dapat diatur dalam Pengaturan Pengguna atau Pengaturan Ruang Kerja.

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

Contoh Visualizer WPF

Proyek sampel visualizer WPF memungkinkan Anda memvisualisasikan kartu menggunakan WPF/Xaml pada komputer Windows. Editor hostconfig dibangun untuk mengedit dan melihat pengaturan konfigurasi host. Simpan pengaturan ini sebagai JSON untuk menggunakannya dalam penyajian di aplikasi Anda.

Contoh ImageRender WPF

Proyek sampel ImageRender mengubah kartu apa pun menjadi PNG dari baris perintah menggunakan WPF.