termwind
v2.3.0
TermwindTermwind では、 Tailwind CSS API を使用して、ユニークで美しい PHP コマンドライン アプリケーションを構築できます。要するに、Tailwind CSS に似ていますが、PHP コマンドライン アプリケーション用です。
PHP 8.0以降が必要です
Composer を使用する 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 ); ask メソッドから提供される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 スペース (640px)md : 76 スペース (768px)lg : 102 スペース (1024px)xl : 128 スペース (1280px)2xl : 153 スペース (1536px) 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 ライセンスに基づいてライセンス供与されたオープンソース ソフトウェアです。
