Fomantic-UI

とりあえず作ったサンプルがこちら 短く対応するなら

まず、fomantic-ui でボタンを作ってみました。↓ 「通常のボタン」を押しても何も起こりませんが、「アクションボタン１」を押すと、/create に GETのリクエスト が飛びました。 受信側（Laravel）の routes/web.php に以下のルートを追加してログファイルで確認します。 ルートパラメータを与えられるか確認してみます。 受信側（Laravel）の routes/web.php に以下のルートを追加してログファイルで確認します。 「API アクションとデータは、メタデータでも指定できます。」とのことなので、これを確認する為に「アクションボタン２」を追加します。 「アクションボタン２」を押すとログファイルに add と 23 が来ました。 「on:’now’」を付けると、画面を表示した時点で（ボタンを押さなくても）リクエストが送信されました。 fomantic-ui の API がちょっとづつ見えてきました。 実は今までやった送信は GET でした。次、POST 送信に行ってみます。 ↑POST送信は、Laravel なので data に csrf_token を渡しています。受信側（Laravel）の routes/web.php に以下のルートを追加してログファイルで確認します。 POST で送信することができました。次に送信する時に、ルートパラメータ、postの値を書き換えることができるようですので確認します。 送信する前に beforeSend で urlData を書き換えることが出来ます。 送信する前に beforeSend で post の値を書き換えることが出来ます。 ひとまずここまでです。

Fomantic-UI で幅を広くすると４カラム、幅を狭くすると２カラムにする例。