رابط های مبتنی بر کارت

نمونه کارت الحاقی

افزونه‌های Google Workspace اطلاعات و کنترل‌های کاربری را در نوار کناری رابط کاربری برنامه میزبان ارائه می‌دهند. یک افزونه شامل یک نوار ابزار شناسایی اصلی به همراه یک یا چند کارت است.

هر کارت نمایانگر یک «صفحه» خاص از رابط کاربری افزونه شماست و پیمایش به یک کارت جدید معمولاً فقط با ایجاد آن کارت و قرار دادن آن در یک دسته کارت داخلی انجام می‌شود. می‌توانید جریان‌های پیمایش را بین کارت‌ها برای یک تجربه تعاملی غنی تعریف کنید.

کارت‌ها می‌توانند غیرزمینه‌ای یا زمینه‌ای باشند. کارت‌های زمینه‌ای زمانی به کاربر نمایش داده می‌شوند که برنامه میزبان در یک زمینه خاص قرار دارد. به عنوان مثال، هنگام باز کردن یک پیام Gmail یا رویداد تقویم. کارت‌های غیرزمینه‌ای (مانند صفحات اصلی ) خارج از یک زمینه خاص میزبان به کاربر نمایش داده می‌شوند. به عنوان مثال، زمانی که کاربر در حال مشاهده صندوق ورودی Gmail، پوشه اصلی Drive یا تقویم خود است.

افزونه‌های Google Workspace که در Apps Script ساخته شده‌اند، از سرویس Card برای ایجاد رابط‌های کاربری از کارت‌ها استفاده می‌کنند. افزونه‌های ساخته شده به زبان‌های دیگر باید JSON با فرمت صحیح را برگردانند تا رابط بتواند به صورت کارت رندر شود.

هر کارت شامل یک سربرگ و یک یا چند بخش کارت است. هر بخش از مجموعه‌ای از ویجت‌ها تشکیل شده است. ویجت‌ها اطلاعات را به کاربر نمایش می‌دهند یا کنترل‌های تعاملی مانند دکمه‌ها را فراهم می‌کنند.

رابط‌های مبتنی بر کارت مزایای زیر را دارند:

  • برای ایجاد رابط‌های کاربری مبتنی بر کارت، نیازی به دانش HTML یا CSS نیست.
  • کارت‌ها و ابزارک‌ها به طور خودکار طوری طراحی می‌شوند که با برنامه‌های Google Workspace که به آن‌ها متصل هستند، به خوبی کار کنند.
  • رابط‌های مبتنی بر کارت هم روی دستگاه‌های دسکتاپ و هم روی دستگاه‌های موبایل کار می‌کنند، اما شما فقط باید یک بار رابط را تعریف کنید.

ایجاد رابط‌های مبتنی بر کارت

هنگام ساخت افزونه‌های مبتنی بر کارت، درک مفاهیم و الگوهای طراحی خاص بسیار مهم است. راهنماهای زیر اطلاعات مورد نیاز برای ساخت افزونه‌های مؤثر مبتنی بر کارت را ارائه می‌دهند:

هنگام ایجاد کارت‌ها و پیاده‌سازی رفتار رابط کاربری، به این صفحات مراجعه کنید. همچنین ممکن است نمونه‌های اضافی زیر را برای ارجاع در هنگام پیاده‌سازی افزونه خود مفید بیابید:

  • شروع سریع افزونه‌ی «گربه‌ها» در فضای کاری گوگل

    این نمونه افزونه، رابط کاربری ساده‌ای از افزونه‌ی Google Workspace را با چندین صفحه و صفحه اصلی نشان می‌دهد.

  • افزونه‌ی Google Workspace: «ترجمه»

    این نمونه افزونه، یک افزونه‌ی Google Workspace را نشان می‌دهد که به کاربران امکان می‌دهد متن را از داخل Docs، Sheets و Slides ترجمه کنند.

  • افزونه‌ی Google Workspace: «لیست تیم‌ها»

    این نمونه افزونه، نمونه پیچیده‌تری از افزونه Google Workspace را نشان می‌دهد که اطلاعات کاربر در مورد گیرندگان پیام Gmail، ویرایشگرهای فایل Drive یا شرکت‌کنندگان رویداد Calendar را نشان می‌دهد. شما فقط می‌توانید از این افزونه در داخل یک دامنه استفاده کنید، زیرا از API دایرکتوری برای بازیابی اطلاعات کاربر استفاده می‌کند.