الصفحة الرئيسية>PHP كود المصدر>فئات أخرى
تنزيل

شعار تيرمويند

Termwind

يتيح لك Termwind إنشاء تطبيقات سطر أوامر PHP فريدة وجميلة، باستخدام Tailwind CSS API. باختصار، إنه مثل Tailwind CSS، ولكن لتطبيقات سطر أوامر PHP.

تثبيت

يتطلب PHP 8.0+

تتطلب Termwind باستخدام الملحن: 

composer require nunomaduro/termwind

الاستخدام 

 use function Termwind { render };

// single line html...
render ( ' <div class="px-1 bg-green-300">Termwind</div> ' );

// multi-line html...
render (<<<'HTML'
    <div>
        <div class="px-1 bg-green-600">Termwind</div>
        <em class="ml-1">
          Give your CLI apps a unique look
        </em>
    </div>
HTML);

// Laravel or Symfony console commands...
class UsersCommand extends Command
{
    public function handle ()
    {
        render (
            view ( ' users.index ' , [
                ' users ' => User:: all ()
            ])
        );
    }
}

style()

يمكن استخدام الدالة style() لإضافة أنماط مخصصة وتحديث الألوان أيضًا. 

 use function Termwind { style };

style ( ' green-300 ' )-> color ( ' #bada55 ' );
style ( ' btn ' )-> apply ( ' p-4 bg-green-300 text-white ' );

render ( ' <div class="btn">Click me</div> ' );

ask()

يمكن استخدام الدالة ask() لطرح سؤال على المستخدم. 

 use function Termwind { ask };

$ answer = ask ( <<<HTML
    <span class="mt-1 ml-2 mr-1 bg-green px-1 text-black">
        What is your name?
    </span>
HTML );

سيكون return المقدم من طريقة السؤال هو الإجابة المقدمة من المستخدم.

terminal()

تقوم الدالة terminal() بإرجاع مثيل للفئة Terminal بالطرق التالية:

  • ->width() : يُرجع العرض الكامل للمحطة.
  • ->height() : يُرجع الارتفاع الكامل للمحطة.
  • ->clear() : يقوم بمسح الشاشة الطرفية.

الفصول المدعومة

تستخدم كافة الفئات المدعومة نفس المنطق المتوفر على tailwindcss.com/docs.

  • لون الخلفية: bg-{color}-{variant} .
  • لون النص: text-{color}-{variant} .
  • وزن الخط: font-bold ، font-normal .
  • نمط الخط : italic .
  • زخرفة النص: underline ، line-through .
  • تحويل النص: uppercase ، lowercase ، capitalize ، snakecase .
  • تجاوز النص: truncate .
  • محاذاة النص: text-left ، text-center ، text-right .
  • الهامش: m-{margin} , ml-{leftMargin} , mr-{rightMargin} , mt-{topMargin} , mb-{bottomMargin} , mx-{horizontalMargin} , my-{verticalMargin} .
  • الحشو: p-{padding} ، pl-{leftPadding} ، pr-{rightPadding} ، pt-{topPadding} ، pb-{bottomPadding} ، px-{horizontalPadding} ، py-{verticalPadding} .
  • الفضاء: space-y-{space} ، space-x-{space} .
  • العرض: w-{width} ، w-full ، w-auto .
  • الحد الأدنى للعرض: min-w-{width} .
  • الحد الأقصى للعرض: max-w-{width} .
  • ضبط المحتوى: justify-between ، justify-around ، justify-evenly ، justify-center .
  • الرؤية: invisible .
  • العرض: block ، flex ، hidden .
  • فليكس: flex-1 .
  • نمط القائمة: list-disc ، list-decimal ، list-square ، list-none .
  • المحتوى: content-repeat-['.'] .

تصميم سريع الاستجابة

كما هو الحال مع TailwindCSS، فإننا ندعم أيضًا استعلامات وسائط التصميم سريع الاستجابة وهذه هي نقاط التوقف المدعومة:

  • sm : 64 مسافات (640 بكسل)
  • md : 76 مسافة (768 بكسل)
  • lg : 102 مسافات (1024 بكسل)
  • xl : 128 مسافة (1280 بكسل)
  • 2xl : 153 مسافة (1536 بكسل) 
 render (<<<'HTML'
    <div class="bg-blue-500 sm:bg-red-600">
        If bg is blue is sm, if red > than sm breakpoint.
    </div>
HTML);

تعتمد جميع أحجام CLI على حجم الخط 15.

عناصر HTML المدعومة

جميع العناصر لديها القدرة على استخدام سمة class .

<div>

يمكن استخدام العنصر <div> كعنصر من نوع الكتلة.

الأنماط الافتراضية : block 

 render (<<<'HTML'
    <div>This is a div element.</div>
HTML);

<p>

يمكن استخدام العنصر <p> كفقرة.

الأنماط الافتراضية : block 

 render (<<<'HTML'
    <p>This is a paragraph.</p>
HTML);

<span>

يمكن استخدام العنصر <span> كحاوية نص مضمنة. 

 render (<<<'HTML'
    <p>
        This is a CLI app built with <span class="text-green-300">Termwind</span>.
    </p>
HTML);

<a>

يمكن استخدام العنصر <a> كارتباط تشعبي. يسمح باستخدام سمة href لفتح الرابط عند النقر عليه. 

 render (<<<'HTML'
    <p>
        This is a CLI app built with Termwind. <a href="/">Click here to open</a>
    </p>
HTML);

<b> و <strong>

يمكن استخدام العنصرين <b> و <strong> لتمييز النص بالخط العريض .

الأنماط الافتراضية : font-bold 

 render (<<<'HTML'
    <p>
        This is a CLI app built with <b>Termwind</b>.
    </p>
HTML);

<i> و <em>

يمكن استخدام العنصرين <i> و <em> لتمييز النص على أنه مائل .

الأنماط الافتراضية : italic 

 render (<<<'HTML'
    <p>
        This is a CLI app built with <i>Termwind</i>.
    </p>
HTML);

<s>

يمكن استخدام العنصر <s> لإضافة الخط من خلال النص.

الأنماط الافتراضية : line-through 

 render (<<<'HTML'
    <p>
        This is a CLI app built with <s>Termwind</s>.
    </p>
HTML);

<br>

يمكن استخدام العنصر <br> لعمل فاصل أسطر. 

 render (<<<'HTML'
    <p>
        This is a CLI <br>
        app built with Termwind.
    </p>
HTML);

<ul>

يمكن استخدام العنصر <ul> لقائمة غير مرتبة. يمكنه فقط قبول عناصر <li> كعناصر فرعية، إذا كان هناك عنصر آخر بشرط أن يقوم بطرح استثناء InvalidChild .

الأنماط الافتراضية : block ، list-disc 

 render (<<<'HTML'
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
HTML);

<ol>

يمكن استخدام العنصر <ol> لقائمة مرتبة. يمكنه فقط قبول عناصر <li> كعناصر فرعية، إذا كان هناك عنصر آخر بشرط أن يرمي استثناء InvalidChild .

الأنماط الافتراضية : block ، list-decimal 

 render (<<<'HTML'
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>
HTML);

<li>

يمكن استخدام العنصر <li> كعنصر قائمة. يجب استخدامه فقط كعنصر فرعي للعناصر <ul> و <ol> .

الأنماط الافتراضية : block ، list-decimal 

 render (<<<'HTML'
    <ul>
        <li>Item 1</li>
    </ul>
HTML);

<dl>

يمكن استخدام العنصر <dl> لقائمة الوصف. يمكنه فقط قبول عناصر <dt> أو <dd> كعناصر فرعية، إذا كان هناك عنصر آخر بشرط أن يقوم بطرح استثناء InvalidChild .

الأنماط الافتراضية : block 

 render (<<<'HTML'
    <dl>
        <dt> Termwind</dt>
        <dd>Give your CLI apps a unique look</dd>
    </dl>
HTML);

<dt>

يمكن استخدام العنصر <dt> كعنوان وصف. يجب استخدامه فقط كعنصر فرعي لعناصر <dl> .

الأنماط الافتراضية : block ، font-bold 

 render (<<<'HTML'
    <dl>
        <dt> Termwind</dt>
    </dl>
HTML);

<dd>

يمكن استخدام العنصر <dd> كعنوان وصف. يجب استخدامه فقط كعنصر فرعي لعناصر <dl> .

الأنماط الافتراضية : block ، ml-4 

 render (<<<'HTML'
    <dl>
        <dd>Give your CLI apps a unique look</dd>
    </dl>
HTML);

<hr>

يمكن استخدام العنصر <hr> كخط أفقي. 

 render (<<<'HTML'
    <div>
        <div> Termwind</div>
        <hr>
        <p>Give your CLI apps a unique look</p>
    </div>
HTML);

<table>

يمكن أن يحتوي عنصر <table> على أعمدة وصفوف. 

 render (<<<'HTML'
    <table>
        <thead>
            <tr>
                <th>Task</th>
                <th>Status</th>
            </tr>
        </thead>
        <tr>
            <th>Termwind</th>
            <td> Done</td>
        </tr>
    </table>
HTML);

<pre>

يمكن استخدام العنصر <pre> كنص منسق مسبقًا. 

 render (<<<'HTML'
    <pre>
        Text in a pre element
        it preserves
        both      spaces and
        line breaks
    </pre>
HTML);

<code>

يمكن استخدام عنصر <code> كأداة تمييز للكود. يقبل سمات line start-line . 

 render (<<<'HTML'
    <code line="22" start-line="20">
        try {
            throw new Exception('Something went wrong');
        } catch (Throwable $e) {
            report($e);
        }
    </code>
HTML);

Termwind هو برنامج مفتوح المصدر مرخص بموجب ترخيص MIT .

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