الفرق بين المراجعتين لصفحة: «Bootstrap/input group»
ط نقل عبد اللطيف ايمش صفحة Bootstrap/input-group إلى Bootstrap/input group |
لا ملخص تعديل |
||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:مجموعات الإدخال Input group في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:مجموعات الإدخال Input group في إطار العمل Bootstrap}}</noinclude> | ||
توسعة عناصر التحكّم في الاستمارات بسهولة بإضافة نصوص، و أزرار أو مجموعات أزرار على أيّ من جانبيْ حقول الإدخال النصيّة، و قوائم اختيّار مُخصَّصة وحقول تصفّح ملفات مُخصَّصة. | |||
== مثال قاعديّ == | == مثال قاعديّ == | ||
ضع حقلًا إضافيًّا أو زرًّا على أي من جانبيْ حقل الإدخال. كما يمكن وضع أحدهما على جانبيْ حقل الإدخال. '''لا يدعم إطار العمل Bootstrap إضافة عدّة عناصر تحكّم في الاستمارات في مجموعة واحدة من حقول الإدخال'''، كما يجب أن تكون اللافتات (<code><label></code>) خارج مجموعة حقول الإدخال. | ضع حقلًا إضافيًّا أو زرًّا على أي من جانبيْ حقل الإدخال. كما يمكن وضع أحدهما على جانبيْ حقل الإدخال. '''لا يدعم إطار العمل Bootstrap إضافة عدّة عناصر تحكّم في الاستمارات في مجموعة واحدة من حقول الإدخال'''، كما يجب أن تكون اللافتات (<code>[[HTML/label|<label>]]</code>) خارج مجموعة حقول الإدخال. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<div class="input-group mb-3"> | <div class="input-group mb-3"> | ||
سطر 96: | سطر 96: | ||
== حقول إدخال متعدّدة == | == حقول إدخال متعدّدة == | ||
على الرغم من أنّ إطار العمل Bootstrap يدعم عرض عناصر (<code><input></code>) عدّة؛ إلّا أنّ أنماط التنسيق لا تتوفّر إلّا لمجموعات الإدخال التي لا يوجد فيها سوى عنصُر <code><input></code> واحد. | على الرغم من أنّ إطار العمل Bootstrap يدعم عرض عناصر (<code>[[HTML/input|<input>]]</code>) عدّة؛ إلّا أنّ أنماط التنسيق لا تتوفّر إلّا لمجموعات الإدخال التي لا يوجد فيها سوى عنصُر <code>[[HTML/input|<input>]]</code> واحد. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
سطر 336: | سطر 336: | ||
ستواجه قارئات الشاشة مشاكل مع الاستمارات إنْ لم تُضمَّن فيها لافتة لكلّ حقل إدخال. تأكّد من أنّ كلّ لافتة أو وظيفة إضافيّة في مجموعات حقول الإدخال تُنقَل إلى التقنيّات المساعدة. | ستواجه قارئات الشاشة مشاكل مع الاستمارات إنْ لم تُضمَّن فيها لافتة لكلّ حقل إدخال. تأكّد من أنّ كلّ لافتة أو وظيفة إضافيّة في مجموعات حقول الإدخال تُنقَل إلى التقنيّات المساعدة. | ||
تختلف الآليّة المُستخدَمة في توصيل المعنى للتقنيّات المساعدة (عناصر <code><label></code> مخفيّة باستخدام الصنف <code>.sr-only</code> أو استخدام الخاصيّتيْن <code>aria-label</code> و <code>aria-labelledby</code>، أحيانًا مع الخاصيّة <code>aria-describedby</code>) والوظائف المنقولة إليها حسب نوعيّة مكوِن الواجهة المرغوب فيه. | تختلف الآليّة المُستخدَمة في توصيل المعنى للتقنيّات المساعدة (عناصر <code>[[HTML/label|<label>]]</code> مخفيّة باستخدام الصنف <code>.sr-only</code> أو استخدام الخاصيّتيْن <code>aria-label</code> و <code>aria-labelledby</code>، أحيانًا مع الخاصيّة <code>aria-describedby</code>) والوظائف المنقولة إليها حسب نوعيّة مكوِن الواجهة المرغوب فيه. | ||
== مصادر == | == مصادر == | ||
* [https://getbootstrap.com/docs/4.0/components/input-group/ صفحة Input group في توثيق Bootstrap]. | * [https://getbootstrap.com/docs/4.0/components/input-group/ صفحة Input group في توثيق Bootstrap]. | ||
[[تصنيف:Bootstrap]][[تصنيف:Bootstrap components]] | [[تصنيف:Bootstrap]] | ||
[[تصنيف:Bootstrap components]] |
مراجعة 05:28، 11 أبريل 2018
توسعة عناصر التحكّم في الاستمارات بسهولة بإضافة نصوص، و أزرار أو مجموعات أزرار على أيّ من جانبيْ حقول الإدخال النصيّة، و قوائم اختيّار مُخصَّصة وحقول تصفّح ملفات مُخصَّصة.
مثال قاعديّ
ضع حقلًا إضافيًّا أو زرًّا على أي من جانبيْ حقل الإدخال. كما يمكن وضع أحدهما على جانبيْ حقل الإدخال. لا يدعم إطار العمل Bootstrap إضافة عدّة عناصر تحكّم في الاستمارات في مجموعة واحدة من حقول الإدخال، كما يجب أن تكون اللافتات (<label>
) خارج مجموعة حقول الإدخال.
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="اسم المستخدم" aria-label="اسم المستخدم" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="اسم المستخدم الخاصّ بالمستلم" aria-label="'اسم المستخدم الخاصّ بالمستلم" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="المقدار (القيمة بالدولار)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">صندوق نصّي</span>
</div>
<textarea class="form-control" aria-label="صندوق نصّي"></textarea>
</div>
تحديد الأبعاد
أضف أصناف تحديد الأبعاد إلى العنصُر حيث يوجد الصنف .input-group
وستُحدَّد أبعاد المحتوى تلقائيًّا. لا حاجة لتكرار أصناف تحديد الأبعاد على كلّ عنصُر تحكّم في الاستمارة. لا يدعم إطار العمل Bootstrap تطبيق أبعاد على العناصر منفردة إذا كانت ضمن مجموعة حقول إدخال.
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">صغير</span>
</div>
<input type="text" class="form-control" aria-label="صغير" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">مبدئي</span>
</div>
<input type="text" class="form-control" aria-label="مبدئيّ" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">كبير</span>
</div>
<input type="text" class="form-control" aria-label="كبير" aria-describedby="inputGroup-sizing-sm">
</div>
صناديق التأشير وأزرار الانتقاء
يمكن وضع صندوق تأشير أو زرّ انتقاء مكان النصّ ضمن مجموعة حقول إدخال.
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label=”صندوق تأشير لحقل الإدخال النصيّ التالي">
</div>
</div>
<input type="text" class="form-control" aria-label="حقل نصّي مع صندوق تأشير">
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" aria-label="زرّ انتقاء لحقل الإدخال النصيّ التاليّ">
</div>
</div>
<input type="text" class="form-control" aria-label="حقل إدخال نصيّ مع زرّ انتقاء">
</div>
حقول إدخال متعدّدة
على الرغم من أنّ إطار العمل Bootstrap يدعم عرض عناصر (<input>
) عدّة؛ إلّا أنّ أنماط التنسيق لا تتوفّر إلّا لمجموعات الإدخال التي لا يوجد فيها سوى عنصُر <input>
واحد.
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">الاسم الشخصيّ والاسم العائليّ</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
حقول إضافيّة متعدّدة
تُدعَم الحقول الإضافيّة ويمكن مزجها مع صناديق التأشير وأزرار الانتقاء.
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
<input type="text" class="form-control" aria-label="المقدار (بالدولار)">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="المقدار (بالدولار)">
<div class="input-group-append">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
</div>
الأزرار الإضافيّة
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">زرّ</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="اسم المستخدم الخاصّ بالمستلم" aria-label="اسم المستخدم الخاصّ بالمستلم" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">زرّ</button>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">زرّ</button>
<button class="btn btn-outline-secondary" type="button">زرّ</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="اسم المستخدم الخاصّ بالمستلم" aria-label="اسم المستخدم الخاصّ بالمستلم" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">زرّ</button>
<button class="btn btn-outline-secondary" type="button">زرّ</button>
</div>
</div>
أزرار بقوائم منسدلة
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">قائمة منسدلة</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">إجراء</a>
<a class="dropdown-item" href="#">إجراء آخر</a>
<a class="dropdown-item" href="#">أمر آخر هنا</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">رابط منفصل</a>
</div>
</div>
<input type="text" class="form-control" aria-label="حقل إدخال نصّي مع زرّ بقائمة منسدلة">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="حقل إدخال نصّي مع زرّ بقائمة منسدلة">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">قائمة منسدلة</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">إجراء</a>
<a class="dropdown-item" href="#">إجراء آخر</a>
<a class="dropdown-item" href="#">أمر آخر هنا</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">رابط منفصل</a>
</div>
</div>
</div>
أزرار مُجزَّأة
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary">إجراء</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">يفتح القائمة المنسدلة</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">إجراء</a>
<a class="dropdown-item" href="#">إجراء آخر</a>
<a class="dropdown-item" href="#">أمر آخر هنا</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">رابط منفصل</a>
</div>
</div>
<input type="text" class="form-control" aria-label="حقل إدخال نصّي مع زرّ مُجزّأ ذي قائمة منسدلة">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="حقل إدخال نصّي مع زرّ مُجزّأ ذي قائمة منسدلة">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary">إجراء</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">يفتح القائمة المنسدلة</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">إجراء</a>
<a class="dropdown-item" href="#">إجراء آخر</a>
<a class="dropdown-item" href="#">أمر آخر هنا</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">رابط منفصل</a>
</div>
</div>
</div>
الاستمارات المُخصَّصة
تتضمّن مجموعات حقول الإدخال دعم قوائم الاختيّار المُخصَّصة وحقول تصفّح الملفات المُخصَّصة. لا يتوفّر دعم نسخ هذه الحقول المبدئيّة المُضمّنة في المتصفّحات.
قوائم الاختيّار المُخصَّصة
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">الخيّارات</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>اختر...</option>
<option value="1">واحد</option>
<option value="2">اثنان</option>
<option value="3">ثالث</option>
</select>
</div>
<div class="input-group mb-3">
<select class="custom-select" id="inputGroupSelect02">
<option selected>اختر...</option>
<option value="1">واحد</option>
<option value="2">اثنان</option>
<option value="3">ثلاثة</option>
</select>
<div class="input-group-append">
<label class="input-group-text" for="inputGroupSelect02">الخيّارات</label>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">زرّ</button>
</div>
<select class="custom-select" id="inputGroupSelect03">
<option selected>اختر</option>
<option value="1">واحد</option>
<option value="2">اثنان</option>
<option value="3">ثلاثة</option>
</select>
</div>
<div class="input-group">
<select class="custom-select" id="inputGroupSelect04">
<option selected>اختر...</option>
<option value="1">واحد</option>
<option value="2">اثنان</option>
<option value="3">ثلاثة</option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">زرّ</button>
</div>
</div>
حقول تصفّح ملفات مُخصَّصة
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">حمّل</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01">اختر ملفا</label>
</div>
</div>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02">
<label class="custom-file-label" for="inputGroupFile02">اختر ملفا</label>
</div>
<div class="input-group-append">
<span class="input-group-text" id="">حمّل</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">زرّ</button>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile03">
<label class="custom-file-label" for="inputGroupFile03">اختر ملفا</label>
</div>
</div>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04">
<label class="custom-file-label" for="inputGroupFile04">اختر ملفا</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">زرّ</button>
</div>
</div>
سهولة الوصول
ستواجه قارئات الشاشة مشاكل مع الاستمارات إنْ لم تُضمَّن فيها لافتة لكلّ حقل إدخال. تأكّد من أنّ كلّ لافتة أو وظيفة إضافيّة في مجموعات حقول الإدخال تُنقَل إلى التقنيّات المساعدة.
تختلف الآليّة المُستخدَمة في توصيل المعنى للتقنيّات المساعدة (عناصر <label>
مخفيّة باستخدام الصنف .sr-only
أو استخدام الخاصيّتيْن aria-label
و aria-labelledby
، أحيانًا مع الخاصيّة aria-describedby
) والوظائف المنقولة إليها حسب نوعيّة مكوِن الواجهة المرغوب فيه.