مشاركة عبر

Microsoft.Common.TextBox UI element

  • مقالة

عنصر واجهة مستخدم (UI) TextBox يمكن استخدامه لإضافة نص غير منسق. العنصر هو حقل إدخال أحادي السطر، ولكنه يدعم الإدخال متعدد الأسطر بخاصية multiLine.

نموذج واجهة المستخدم

يستخدم العنصر TextBox مربع نص أحادي السطر أو متعدد الأسطر.

مثال على مربع نص من سطر واحد.

لقطة شاشة لمربع نص من سطر واحد باستخدام عنصر واجهة مستخدم Microsoft.Common.TextBox.

مثال لمربع نص متعدد الأسطر.

لقطة شاشة لمربع نص متعدد الأسطر باستخدام عنصر واجهة مستخدم Microsoft.Common.TextBox.

مخطط

{
  "name": "nameInstance",
  "type": "Microsoft.Common.TextBox",
  "label": "Name",
  "defaultValue": "contoso123",
  "toolTip": "Use only allowed characters",
  "placeholder": "",
  "multiLine": false,
  "constraints": {
    "required": true,
    "validations": [
      {
        "regex": "^[a-z0-9A-Z]{1,30}$",
        "message": "Only alphanumeric characters are allowed, and the value must be 1-30 characters long."
      },
      {
        "isValid": "[startsWith(steps('resourceConfig').nameInstance, 'contoso')]",
        "message": "Must start with 'contoso'."
      }
    ]
  },
  "visible": true
}

عينة الإخراج

"contoso123"

الملاحظات

  • استخدم الخاصية toolTip لعرض نص حول العنصر عند تحريك مؤشر الفأرة فوق رمز المعلومات.
  • الخاصية placeholder هي نص تعليمات يختفي عندما يبدأ المستخدم في التحرير. إذا تم تعريف كل من placeholder وdefaultValue، فإن defaultValue لها الأسبقية وتُعرض.
  • الخاصية multiLine منطقية، true أو false. لاستخدام مربع نص متعدد الأسطر، عيَّن الخاصية على true. إذا لم تكن هناك حاجة إلى مربع نص متعدد الأسطر، عيِّن الخاصية على false أو استبعد الخاصية. بالنسبة للخطوط الجديدة، يظهر إخراج JSON \n لتغذية السطر. يقبل مربع النص متعدد الأسطر \r للحصول على حرف إرجاع (CR) و\n لتغذية الأسطر (LF). على سبيل المثال، يمكن أن تتضمن \r\n القيمة الافتراضية لتحديد إرجاع السطر وتغذية السطر (CRLF).
  • إذا عُيِّن constraints.required على true، فيجب أن يحتوي مربع النص على قيمة للتحقق بنجاح. القيمة الافتراضية هي false.
  • الخاصية validations هي مصفوفة تقوم بإضافة شروط للتحقق من القيمة المقدمة في مربع النص.
  • الخاصية regex هي نمط تعبير عادي لـ JavaScript. إذا تم تحديد ذلك، يجب أن تتطابق قيمة مربع النص مع النمط للتحقق بنجاح. القيمة الافتراضية هي null. لمزيد من المعلومات حول بنية التعبير العادي، راجع المرجع السريع للتعبير العادي.
  • تحتوي الخاصية isValid على تعبير يُقيَّم بـ true أو false. ضمن التعبير، تقوم بتعريف الشرط الذي يحدد ما إذا كان مربع النص صالحاً أم لا.
  • الخاصية message هي سلسلة تُعرض عندما تفشل قيمة مربع النص في التحقق من صحتها.
  • من الممكن تحديد قيمة لـ regex عند تعيين required على false. في هذا السيناريو، القيمة ليست مطلوبة لمربع النص للتحقق بنجاح. إذا تم تحديد أحدها، فيجب أن يتطابق مع نمط التعبير العادي.

الأمثلة

توضح الأمثلة كيفية استخدام مربع نص أحادي السطر ومربع نص متعدد الأسطر.

سطر واحد

يستخدم المثال التالي مربع نص مع عنصر التحكم Microsoft.Solutions.ArmApiControl للتحقق من توفر اسم المورد.

في هذا المثال، عند إدخال اسم حساب تخزين والخروج من مربع النص، يتحقق عنصر التحكم مما إذا كان الاسم صالحًا وما إذا كان متوفرًا. إذا كان الاسم غير صالح أو موجود بالفعل، يتم عرض رسالة خطأ. يظهر اسم حساب تخزين صالح ومتوفر في الإخراج.

{
  "$schema": "https://schema.management.azure.com/schemas/0.1.2-preview/CreateUIDefinition.MultiVm.json#",
  "handler": "Microsoft.Azure.CreateUIDef",
  "version": "0.1.2-preview",
  "parameters": {
    "basics": [
      {
        "name": "nameApi",
        "type": "Microsoft.Solutions.ArmApiControl",
        "request": {
          "method": "POST",
          "path": "[concat(subscription().id, '/providers/Microsoft.Storage/checkNameAvailability?api-version=2021-09-01')]",
          "body": {
            "name": "[basics('txtStorageName')]",
            "type": "Microsoft.Storage/storageAccounts"
          }
        }
      },
      {
        "name": "txtStorageName",
        "type": "Microsoft.Common.TextBox",
        "label": "Storage account name",
        "constraints": {
          "validations": [
            {
              "isValid": "[basics('nameApi').nameAvailable]",
              "message": "[basics('nameApi').message]"
            }
          ]
        }
      }
    ],
    "steps": [],
    "outputs": {
      "textBox": "[basics('txtStorageName')]"
    }
  }
}

متعدد البنود

يستخدم هذا المثال الخاصية multiLine لإنشاء مربع نص متعدد الأسطر بنص عنصر نائب.

{
  "$schema": "https://schema.management.azure.com/schemas/0.1.2-preview/CreateUIDefinition.MultiVm.json#",
  "handler": "Microsoft.Azure.CreateUIDef",
  "version": "0.1.2-preview",
  "parameters": {
    "basics": [
      {
        "name": "demoTextBox",
        "type": "Microsoft.Common.TextBox",
        "label": "Multi-line text box",
        "defaultValue": "",
        "toolTip": "Use 1-60 alphanumeric characters, hyphens, spaces, periods, and colons.",
        "placeholder": "This is a multi-line text box:\nLine 1.\nLine 2.\nLine 3.",
        "multiLine": true,
        "constraints": {
          "required": true,
          "validations": [
            {
              "regex": "^[a-z0-9A-Z -.:\n]{1,60}$",
              "message": "Only 1-60 alphanumeric characters, hyphens, spaces, periods, and colons are allowed."
            }
          ]
        },
        "visible": true
      }
    ],
    "steps": [],
    "outputs": {
      "textBox": "[basics('demoTextBox')]"
    }
  }
}

الخطوات التالية