termwind
v2.3.0
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.
جميع العناصر لديها القدرة على استخدام سمة 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 .
