ドキュメント/概要

サンプル

コード付きのライブデモ。表示されているファイルはすべて、このページ上で動いています。コピーするか、StackBlitz で開いてください。

このページを編集

このページは AI によって翻訳されており、不正確な箇所が含まれている可能性があります。 英語の原文を読む

各サンプルは小さな Vue アプリです:DnDProvider を持つ index.vue と、それが必要とするコンポーネントで構成されています。デモの下にあるコードタブは、そのデモを実際に動かしているファイルそのものです。

アプリ

実際に作るときと同じ形の、まとまったインターフェースです。複数のリスト、ルール、オーバーレイ、キーボードが連携して動きます。

プロジェクトボード

並べ替えられる列、WIP 制限、Done の前の確認、複数選択、ゴミ箱。

週間カレンダー

日と 30 分刻みの枠をまたいでドラッグする予定。グリッドにスナップします。

ファイルマネージャー

フォルダーツリーとファイルのグリッド:範囲選択、フォルダーへのドロップ、Alt でコピー。

ブロックエディター

Notion 風のブロック。ハンドルで動かし、ネストし、「/」メニューやサイドバーからドラッグして追加します。

チェス

合法手が光り、手に持った駒はマスを拒否する理由を伝え、ポーンは何に成るかを尋ね、ボットは本物のドラッグで指し返します。

フォームビルダー

パレットから Nuxt UI のフィールドを取り、行の中に横に並べ、ライブプレビューで入力し、Vue のコードとして書き出します。

デザインキャンバス

ズームできるキャンバス上のフレームとレイヤー、スマートガイド、Alt で複製、そしてデザインのツリーそのものであるレイヤーパネル。

ページビルダー

ページの上で本物の姿に変わるセクション、列の間を移る要素、同じデータを使うレイヤーツリー、その場での編集。

データテーブル

2,000 件のタスクを持つ Nuxt UI のテーブル:仮想化され、検索でき、行のグリップで並べ替えます。