الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل

البرنامج المساعد Iconpicker لـ Craft CMS 3.x

حاليا توقف المشروع. ومع ذلك ، لا تتردد في توترها ومواصلة تطورها!

البرنامج المساعد الحرفي الذي يوفر نوع حقل جديد يوفر للمستخدمين طريقة سهلة لاختيار رمز من ملف خط .woff أو .ttf. يمكنك بسهولة استخدام أيونيكونز أو أيقونات رائعة

ملاحظة : قد يصبح هذا المكون الإضافي وظيفة إضافية مدفوعة عندما يتوفر متجر Craft Plugin.

متطلبات

  • Craft 3.0 (بيتا 20)+
  • PHP 7.0+
  • فينكس php font lib
  • ملفات واحدة أو أكثر .ttf أو .woff

مثال

مثال على استخدام الحقل في القالب لمستخدم CMS

لقطة شاشة

مثال على اختيار المنبثقة

لقطة شاشة

تثبيت

  1. تثبيت مع الملحن 

     composer require dolphiq/iconpicker

  2. قم بتثبيت البرنامج المساعد في لوحة التحكم الحرفية ضمن الإعدادات> الإضافات

  3. أضف أصول المكون الإضافي إلى التطبيق الخاص بك عن طريق إضافة السطر التالي في بداية القالب الخاص بك: 

     {% do view.registerAssetBundle("plugins\dolphiq\iconpicker\assets\sharedAsset") %}

  4. أضف الخطوط التي تريدها إلى الدليل التالي 

     /vendor/dolphiq/iconpicker/src/resources-shared/fonts

  5. سيكون نوع Iconpicker Field متاحًا عند إضافة حقل جديد - الإعدادات> الحقول> إضافة حقل جديد

إنشاء حقل مع نوع حقل Iconpicker

  1. اختر نوع Iconpicker Field
  2. عند إضافة حقل جديد مع نوع Iconpicker Field ، يمكنك اختيار الخط الذي تريد استخدامه لهذا الحقل من القائمة المنسدلة

باستخدام نوع حقل Iconpicker

  1. أضف الحقل إلى تخطيط حقل (على سبيل المثال إلى قسم)
  2. يمكنك الآن اختيار أيقونة عند إنشاء أو تحديث قسم

عينة الاستخدام في قالب غصين

رمز المثال السريع 

    {% do view.registerAssetBundle("plugins\dolphiq\iconpicker\assets\sharedAsset") %}
    <html style="padding: 0; margin: 0;">
    <head>
        <title></title>

        {{ head() }}

    </head>

    <body>

    {{ beginBody() }}

    {% if entry.iconPickerField.icon %}
        Hex: {{ entry.iconPickerField.icon }}<br>
        {{ entry.iconPickerField.iconSpan|raw }}
    {% endif %}

    {{ endBody() }}

    </body>
    </html>

عرض أيقونة مع فئة مخصصة: 

 <span class='{{ entry.iconClass }} myCustomClass'>{{ entry.iconChar }}</span>
خصائص حقل الأيقونة

  1. احصل على أيقونة Unicode (عشرية) 

     {{ entry.fieldName.icon }}

  2. احصل على أيقونة Unicode (سداسي عشري) 

     {{ entry.fieldName.iconHex }}

  3. عرض الرمز كحرف HTML &#00000 

     {{ entry.fieldName.iconChar|raw }}

  4. عرض الأيقونة كحرف HTML hex &#xf100 

     {{ entry.fieldName.iconCharHex|raw }}

  5. عرض الرمز على أنه تمتد مع فئة الطرف والخط 

     {{ entry.fieldName.iconSpan|raw }}

  6. احصل على فئة خط الرمز 

     {{ entry.fieldName.iconClass }}

  7. مثال مشروط على إظهار الرمز فقط عند تعيينه 

     {% if entry.fieldName.icon %}
     {{ entry.fieldName.iconSpan|raw }}
{% endif %}

خريطة طريق Iconpicker

  • حدد وتحميل الخطوط في واجهة المستخدم
  • تمكين (الاسم) بحث أثناء اختيار أيقونة

المساهمين والمطورين

Lucas Weijers - المطور الأصلي Johan Zandstra - تغييرات بسيطة قدمت لك Dolphiq [email protected]

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل