Termwind
Termwind では、 Tailwind CSS API を使用して、ユニークで美しい PHP コマンドライン アプリケーションを構築できます。要するに、Tailwind CSS に似ていますが、PHP コマンドライン アプリケーション用です。
PHP 8.0以降が必要です
Composer を使用する Termwind が必要です。
composer require nunomaduro/termwind
use function Termwind { render }; // single line html... render ( 'Termwind' ); // multi-line html... render (<<<'HTML'HTML); // Laravel or Symfony console commands... class UsersCommand extends Command { public function handle () { render ( view ( ' users.index ' , [ ' users ' => User:: all () ]) ); } }TermwindGive your CLI apps a unique look
style()
style()
関数を使用すると、独自のカスタム スタイルを追加したり、色を更新したりすることができます。
use function Termwind { style }; style ( ' green-300 ' )-> color ( ' #bada55 ' ); style ( ' btn ' )-> apply ( ' p-4 bg-green-300 text-white ' ); render ( 'Click me' );
ask()
ask()
関数は、ユーザーに質問を促すために使用できます。
use function Termwind { ask };
$ answer = ask ( <<
What is your name?
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'If bg is blue is sm, if red > than sm breakpoint.HTML);
CLI のすべてのサイズはフォント サイズ 15 に基づいています。
すべての要素には、 class
属性を使用する機能があります。
要素はブロック型要素として使用できます。デフォルトのスタイル: block
render (<<<'HTML'
This is a div element.
HTML);
要素は段落として使用できます。
デフォルトのスタイル: block
render (<<<'HTML'
This is a paragraph.
HTML);
要素はインライン テキスト コンテナとして使用できます。
Termwind.
HTML);"> render (<<<'HTML'
This is a CLI app built with Termwind.
HTML);
要素はハイパーリンクとして使用できます。 href
属性を使用して、クリック時にリンクを開くことができます。
Click here to open
HTML);"> render (<<<'HTML'
This is a CLI app built with Termwind. Click here to open
HTML);
と
要素と
要素を使用して、テキストを太字としてマークできます。
デフォルトのスタイル: font-bold
render (<<<'HTML'
This is a CLI app built with Termwind.
HTML);
と
要素と
要素を使用して、テキストを斜体としてマークできます。
デフォルトのスタイル: italic
render (<<<'HTML'
This is a CLI app built with Termwind.
HTML);
要素を使用して、線を通すテキスト。
デフォルトのスタイル: line-through
render (<<<'HTML'
This is a CLI app built with Termwind.
HTML);
要素を使用して改行を行うことができます。
render (<<<'HTML'
This is a CLI
app built with Termwind.
HTML);
要素は、順序なしリストに使用できます。
要素のみを子として受け入れることができ、別の要素が指定されている場合はInvalidChild
例外がスローされます。
デフォルトのスタイル: block
、 list-disc
render (<<<'HTML'
Item 1
Item 2
HTML);
要素は順序付きリストに使用できます。
要素のみを子として受け入れることができ、別の要素が指定されている場合はInvalidChild
例外がスローされます。
デフォルトのスタイル: block
、 list-decimal
render (<<<'HTML'
Item 1
Item 2
HTML);
要素はリスト項目として使用できます。
要素と
要素の子としてのみ使用してください。
デフォルトのスタイル: block
、 list-decimal
render (<<<'HTML'
Item 1
HTML);
要素は説明リストに使用できます。
または
要素のみを子として受け入れることができ、別の要素が指定されている場合は、 InvalidChild
例外がスローされます。
デフォルトのスタイル: block
render (<<<'HTML'
Termwind
Give your CLI apps a unique look
HTML);
要素は説明のタイトルとして使用できます。これは、
要素の子としてのみ使用する必要があります。
デフォルトのスタイル: block
、 font-bold
render (<<<'HTML'
Termwind
HTML);
要素は説明のタイトルとして使用できます。これは、
要素の子としてのみ使用する必要があります。
デフォルトのスタイル: block
、 ml-4
render (<<<'HTML'
Give your CLI apps a unique look
HTML);
要素は水平線として使用できます。
render (<<<'HTML'
Termwind
Give your CLI apps a unique look
HTML);
要素には列と行を含めることができます。 render (<<<'HTML'
Task
Status
Termwind
Done
HTML);
要素は、フォーマット済みのテキストとして使用できます。
render (<<<'HTML'
Text in a pre element
it preserves
both spaces and
line breaks
HTML);
要素はコード ハイライターとして使用できます。 line
とstart-line
属性を受け入れます。
try {
throw new Exception('Something went wrong');
} catch (Throwable $e) {
report($e);
}
HTML);"> render (<<<'HTML'
try {
throw new Exception('Something went wrong');
} catch (Throwable $e) {
report($e);
}
HTML);
Termwind は、 MIT ライセンスに基づいてライセンス供与されたオープンソース ソフトウェアです。
拡大する
関連アプリ
おすすめ
関連情報
すべて
-
CSS3アニメーションで複数のジャンプボールのエフェクトを実現(音声入力アニメーション)
2024-12-18
-
CSS テキストが制限を超えた場合に省略記号を非表示にして表示する、およびその他のブラウザ互換の解決策 (推奨)
2024-12-18
-
css3でダイナミックスクロールプレイリスト機能を実装
2024-12-18
-
Dreamweaver2021 インストール グラフィック チュートリアル
2024-12-17
-
HTML+CSSを使ったクールなログイン切り替え実装プロジェクトの実践
2024-12-18
-
HTML のような Windows デスクトップ テーマの特殊効果の実装
2024-12-18