Class Columns
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
الأعمدة
تعرِض الأداة المصغّرة Columns ما يصل إلى عمودَين في بطاقة أو مربّع حوار. يمكنك إضافة التطبيقات المصغّرة إلى
كل Column، وستظهر التطبيقات المصغّرة بالترتيب الذي تم تحديده. للحصول على مثال في
تطبيقات Google Chat، يُرجى الاطّلاع على الأعمدة.
يتم تحديد ارتفاع كل عمود حسب العمود الأطول. على سبيل المثال، إذا كان العمود الأول
أطول من العمود الثاني، يكون ارتفاع كلا العمودَين هو ارتفاع العمود الأول. ولأنّه يمكن أن يحتوي كل عمود على عدد مختلف من التطبيقات المصغّرة، لا يمكنك تحديد الصفوف أو محاذاة التطبيقات المصغّرة بين الأعمدة.
يتم عرض الأعمدة جنبًا إلى جنب. يمكنك تخصيص عرض كل عمود باستخدام الحقل
HorizontalSizeStyle. إذا كان عرض شاشة المستخدم ضيقًا جدًا، يتم ملفّ العمود الثاني تحت الأول:
- على الويب، يتمّ عرض العمود الثاني على عدة أسطر إذا كان عرض الشاشة أقلّ من أو يساوي 480 بكسل.
- على أجهزة iOS، يتمّ عرض العمود الثاني على عدة أسطر إذا كان عرض الشاشة أقل من أو يساوي 300
pt.
- على أجهزة Android، يتمّ عرض العمود الثاني على عدة أسطر إذا كان عرض الشاشة أقل من أو يساوي
320 وحدة بكسل مستقلة الكثافة.
تتوفّر هذه الميزة لتطبيقات Google Chat وإضافات Google Workspace. تشمل واجهات مستخدم الإضافات التي تتيح استخدام
الأعمدة ما يلي:
- مربّع الحوار الذي يظهر عندما يفتح المستخدمون الإضافة من مسودة رسالة إلكترونية
- مربّع الحوار الذي يظهر عندما يفتح المستخدمون الإضافة من قائمة إضافة مرفق في أحد
أحداث "تقويم Google"
// Build a column that is aligned in the center and fills the space:
const column =
CardService.newColumn()
.setHorizontalSizeStyle(
CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE)
.setHorizontalAlignment(CardService.HorizontalAlignment.CENTER)
.setVerticalAlignment(CardService.VerticalAlignment.CENTER);
const columns = CardService.newColumns().addColumn(column).setWrapStyle(
CardService.WrapStyle.WRAP);
مستندات تفصيلية
addColumn(column)
لإضافة Column إلى التطبيق المصغّر "الأعمدة" يتم عرض الأعمدة بالترتيب الذي تتم فيه إضافتها. يمكنك إضافة ما يصل إلى عمودَين.
const columns = CardService.newColumns().addColumn(CardService.newColumn());
المعلمات
| الاسم | النوع | الوصف |
column | Column | عمود فرعي لإضافته إلى التطبيق المصغّر "الأعمدة" |
الإرجاع
Columns: هذا العنصر، لإنشاء سلسلة.
setWrapStyle(wrapStyle)
تُستخدَم لضبط نمط التفاف الأعمدة، كما تتيح التحكّم في كيفية تغيير حجم العمود استنادًا إلى عرض الشاشة.
const columns = CardService.newColumns()
.addColumn(CardService.newColumn())
.setWrapStyle(CardService.WrapStyle.WRAP);
المعلمات
| الاسم | النوع | الوصف |
wrapStyle | WrapStyle | نمط اللفّ الذي سيتم ضبطه للأعمدة. |
الإرجاع
Columns: هذا العنصر، لإنشاء سلسلة.
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2025-07-26 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-07-26 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eThe Columns widget allows displaying up to two columns within cards or dialogs, with widgets arranged vertically within each column.\u003c/p\u003e\n"],["\u003cp\u003eColumn height is determined by the taller column, and widgets cannot be aligned across columns or organized into rows.\u003c/p\u003e\n"],["\u003cp\u003eColumns are displayed side-by-side and wrap to a vertical layout on smaller screens based on specified screen width thresholds.\u003c/p\u003e\n"],["\u003cp\u003eCustomization options include adjusting column width and controlling wrapping behavior with \u003ccode\u003eHorizontalSizeStyle\u003c/code\u003e and \u003ccode\u003eWrapStyle\u003c/code\u003e respectively.\u003c/p\u003e\n"],["\u003cp\u003eThis widget is available for Google Chat apps and specific Google Workspace Add-ons, like dialogs in email drafts or Calendar event attachments.\u003c/p\u003e\n"]]],["The Columns widget displays up to two columns in a card or dialog, with widgets added to each column in a specified order. Column height is determined by the taller column, and widths can be customized. If the screen is too narrow, the second column wraps below the first, with specific pixel/point/dp thresholds for web, iOS, and Android devices. Key actions include adding columns using `addColumn()` and controlling resizing with `setWrapStyle()`. These features are available for Google Chat and Workspace add-ons.\n"],null,["# Class Columns\n\nColumns\n\nThe [Columns](#) widget displays up to 2 columns in a card or dialog. You can add widgets to\neach [Column](/apps-script/reference/card-service/column); the widgets appear in the order that they are specified. For an example in\nGoogle Chat apps, see [Columns](https://developers.google.com/workspace/chat/format-structure-card-dialog#display_cards_and_dialogs_in_columns).\n\nThe height of each column is determined by the taller column. For example, if the first column\nis taller than the second column, both columns have the height of the first column. Because each\ncolumn can contain a different number of widgets, you can't define rows or align widgets between\nthe columns.\n\nColumns are displayed side-by-side. You can customize the width of each column using the\n[HorizontalSizeStyle](/apps-script/reference/card-service/horizontal-size-style) field. If the user's screen width is too narrow, the second column\nwraps below the first:\n\n- On web, the second column wraps if the screen width is less than or equal to 480 pixels.\n- On iOS devices, the second column wraps if the screen width is less than or equal to 300 pt.\n- On Android devices, the second column wraps if the screen width is less than or equal to 320 dp.\n\nAvailable for Google Chat apps and Google Workspace add-ons. The add-on UIs that support\ncolumns include:\n\n- The dialog displayed when users open the add-on from an email draft.\n- The dialog displayed when users open the add-on from the **Add attachment** menu in a Google Calendar event. \n\n ```javascript\n // Build a column that is aligned in the center and fills the space:\n const column =\n CardService.newColumn()\n .setHorizontalSizeStyle(\n CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE)\n .setHorizontalAlignment(CardService.HorizontalAlignment.CENTER)\n .setVerticalAlignment(CardService.VerticalAlignment.CENTER);\n const columns = CardService.newColumns().addColumn(column).setWrapStyle(\n CardService.WrapStyle.WRAP);\n``` \n\n### Methods\n\n| Method | Return type | Brief description |\n|-----------------------------------------------------|--------------|--------------------------------------------------------------------------------------------|\n| [addColumn(column)](#addColumn(Column)) | [Columns](#) | Adds a [Column](/apps-script/reference/card-service/column) to the Columns widget. |\n| [setWrapStyle(wrapStyle)](#setWrapStyle(WrapStyle)) | [Columns](#) | Sets the wrap style of the columns, controls how the column resizes based on screen width. |\n\nDetailed documentation\n----------------------\n\n### `add``Column(column)`\n\nAdds a [Column](/apps-script/reference/card-service/column) to the Columns widget. Columns are displayed in the order in which\nthey're added. You can add up to two columns.\n\n```javascript\nconst columns = CardService.newColumns().addColumn(CardService.newColumn());\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|----------|------------------------------------------------------|----------------------------------------------|\n| `column` | [Column](/apps-script/reference/card-service/column) | A child column to add to the Columns widget. |\n\n#### Return\n\n\n[Columns](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Wrap``Style(wrapStyle)`\n\nSets the wrap style of the columns, controls how the column resizes based on screen width.\n\n```javascript\nconst columns = CardService.newColumns()\n .addColumn(CardService.newColumn())\n .setWrapStyle(CardService.WrapStyle.WRAP);\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|---------------|-------------------------------------------------------------|----------------------------------------|\n| `wrap``Style` | [WrapStyle](/apps-script/reference/card-service/wrap-style) | The wrap style to set for the columns. |\n\n#### Return\n\n\n[Columns](#) --- This object, for chaining."]]
