Termwind
Termwind memungkinkan Anda membuat aplikasi baris perintah PHP yang unik dan indah, menggunakan Tailwind CSS API. Singkatnya, ini seperti Tailwind CSS, tetapi untuk aplikasi baris perintah PHP.
Membutuhkan PHP 8.0+
Memerlukan Termwind menggunakan Komposer:
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()
Fungsi style()
dapat digunakan untuk menambahkan gaya kustom sendiri dan juga memperbarui warna.
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()
Fungsi ask()
dapat digunakan untuk menanyakan pertanyaan kepada pengguna.
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
yang diberikan dari metode tanya akan menjadi jawaban yang diberikan dari pengguna.
terminal()
Fungsi terminal()
mengembalikan sebuah instance dari kelas Terminal, dengan metode berikut:
->width()
: Mengembalikan lebar penuh terminal.->height()
: Mengembalikan tinggi penuh terminal.->clear()
: Ini membersihkan layar terminal. Semua kelas yang didukung menggunakan logika yang sama persis dengan yang tersedia di 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-['.']
. Seperti TailwindCSS, kami juga mendukung kueri media Desain Responsif dan berikut adalah titik henti sementara yang didukung:
sm
: 64 spasi (640 piksel)md
: 76 spasi (768 piksel)lg
: 102 spasi (1024 piksel)xl
: 128 spasi (1280 piksel)2xl
: 153 spasi (1536 piksel) render (<<<'HTML'
<div class="bg-blue-500 sm:bg-red-600">
If bg is blue is sm, if red > than sm breakpoint.
</div>
HTML);
Semua ukuran CLI didasarkan pada Ukuran Font 15.
Semua elemen memiliki kemampuan untuk menggunakan atribut class
.
<div>
Elemen <div>
dapat digunakan sebagai elemen tipe blok.
Gaya Default : block
render (<<<'HTML'
<div>This is a div element.</div>
HTML);
<p>
Elemen <p>
dapat digunakan sebagai paragraf.
Gaya Default : block
render (<<<'HTML'
<p>This is a paragraph.</p>
HTML);
<span>
Elemen <span>
dapat digunakan sebagai wadah teks sebaris.
render (<<<'HTML'
<p>
This is a CLI app built with <span class="text-green-300">Termwind</span>.
</p>
HTML);
<a>
Elemen <a>
dapat digunakan sebagai hyperlink. Memungkinkan penggunaan atribut href
untuk membuka tautan saat diklik.
render (<<<'HTML'
<p>
This is a CLI app built with Termwind. <a href="/">Click here to open</a>
</p>
HTML);
<b>
dan <strong>
Elemen <b>
dan <strong>
dapat digunakan untuk menandai teks sebagai huruf tebal .
Gaya Default : font-bold
render (<<<'HTML'
<p>
This is a CLI app built with <b>Termwind</b>.
</p>
HTML);
<i>
dan <em>
Elemen <i>
dan <em>
dapat digunakan untuk menandai teks sebagai miring .
Gaya Default : italic
render (<<<'HTML'
<p>
This is a CLI app built with <i>Termwind</i>.
</p>
HTML);
<s>
Elemen <s>
dapat digunakan untuk menambahkan a garis melalui teks.
Gaya Default : line-through
render (<<<'HTML'
<p>
This is a CLI app built with <s>Termwind</s>.
</p>
HTML);
<br>
Elemen <br>
dapat digunakan untuk melakukan pergantian baris.
render (<<<'HTML'
<p>
This is a CLI <br>
app built with Termwind.
</p>
HTML);
<ul>
Elemen <ul>
dapat digunakan untuk daftar tidak berurutan. Ia hanya dapat menerima elemen <li>
sebagai anak, jika ada elemen lain yang disediakan maka akan memunculkan pengecualian InvalidChild
.
Gaya Default : block
, list-disc
render (<<<'HTML'
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
HTML);
<ol>
Elemen <ol>
dapat digunakan untuk daftar yang diurutkan. Ia hanya dapat menerima elemen <li>
sebagai anak, jika ada elemen lain yang disediakan maka akan memunculkan pengecualian InvalidChild
.
Gaya Default : block
, list-decimal
render (<<<'HTML'
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
HTML);
<li>
Elemen <li>
dapat digunakan sebagai item daftar. Ini hanya boleh digunakan sebagai turunan dari elemen <ul>
dan <ol>
.
Gaya Default : block
, list-decimal
render (<<<'HTML'
<ul>
<li>Item 1</li>
</ul>
HTML);
<dl>
Elemen <dl>
dapat digunakan untuk daftar deskripsi. Ia hanya dapat menerima elemen <dt>
atau <dd>
sebagai anak, jika ada elemen lain yang disediakan maka akan memunculkan pengecualian InvalidChild
.
Gaya Default : block
render (<<<'HTML'
<dl>
<dt> Termwind</dt>
<dd>Give your CLI apps a unique look</dd>
</dl>
HTML);
<dt>
Elemen <dt>
dapat digunakan sebagai judul deskripsi. Ini hanya boleh digunakan sebagai anak dari elemen <dl>
.
Gaya Default : block
, font-bold
render (<<<'HTML'
<dl>
<dt> Termwind</dt>
</dl>
HTML);
<dd>
Elemen <dd>
dapat digunakan sebagai judul deskripsi. Ini hanya boleh digunakan sebagai anak dari elemen <dl>
.
Gaya Default : block
, ml-4
render (<<<'HTML'
<dl>
<dd>Give your CLI apps a unique look</dd>
</dl>
HTML);
<hr>
Elemen <hr>
dapat digunakan sebagai garis horizontal.
render (<<<'HTML'
<div>
<div> Termwind</div>
<hr>
<p>Give your CLI apps a unique look</p>
</div>
HTML);
<table>
Elemen <table>
dapat memiliki kolom dan baris.
render (<<<'HTML'
<table>
<thead>
<tr>
<th>Task</th>
<th>Status</th>
</tr>
</thead>
<tr>
<th>Termwind</th>
<td> Done</td>
</tr>
</table>
HTML);
<pre>
Elemen <pre>
dapat digunakan sebagai teks yang telah diformat sebelumnya.
render (<<<'HTML'
<pre>
Text in a pre element
it preserves
both spaces and
line breaks
</pre>
HTML);
<code>
Elemen <code>
dapat digunakan sebagai penyorot kode. Ia menerima atribut line
dan 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 adalah perangkat lunak sumber terbuka yang dilisensikan di bawah lisensi MIT .