--- title: "コンポーネント — zenit Zig UI" description: "51 個の公開コンポーネントと 13 個の機能検証ラボ。すべての録画は E2E harness が操作する実際の zenit Storybook ウィンドウの Metal d…" url: https://zenit.z.express/ja/components language: ja alternate_en: https://zenit.z.express/components.md alternate_zh: https://zenit.z.express/zh/components.md alternate_es: https://zenit.z.express/es/components.md alternate_ko: https://zenit.z.express/ko/components.md alternate_fr: https://zenit.z.express/fr/components.md alternate_de: https://zenit.z.express/de/components.md project: zenit v0.1.0-alpha (Zig 0.15.2, macOS) source: https://github.com/version-next/zenit --- # コンポーネント 51 個の公開コンポーネントと 13 個の機能検証ラボ。すべての録画は E2E harness が操作する実際の zenit Storybook ウィンドウの Metal drawable から取得しています。ソースと Props 表はリポジトリから直接抽出しています。 [Button`ui.widgets.Button`プライマリ、セカンダリ、破壊的操作、リンク風、アイコンのみのボタン。](https://zenit.z.express/ja/components/button)[Checkbox`ui.widgets.Checkbox`未選択・選択・不確定の状態を持つ独立したブール値の選択。](https://zenit.z.express/ja/components/checkbox)[Switch`ui.widgets.Switch`即時に反映される設定のためのトグル。](https://zenit.z.express/ja/components/switch)[Radio`ui.widgets.RadioGroup`排他的な選択肢から値を一つだけ選びます。](https://zenit.z.express/ja/components/radio)[Slider`ui.widgets.Slider`連続または段階的な範囲から数値を選びます。](https://zenit.z.express/ja/components/slider)[Rate`ui.widgets.Rate`星評価、または上限付きの個数による評価。](https://zenit.z.express/ja/components/rate)[NumberStepper`ui.widgets.NumberStepper`数量やパラメータを正確に増減します。](https://zenit.z.express/ja/components/stepper)[Input`ui.widgets.Input`1 行のテキスト、メール、パスワード、検索の入力。](https://zenit.z.express/ja/components/input)[Textarea`ui.widgets.Textarea`helper、error、無効状態に対応した複数行編集。](https://zenit.z.express/ja/components/textarea)[Select`ui.widgets.Select`単一選択、複数選択、クリア可能、検索可能なセレクター。](https://zenit.z.express/ja/components/select)[Form Composition`Input · Select · Button`同じサイズ段階の Input、Select、Button の組み合わせ：フィルターツールバーと業務フォーム。](https://zenit.z.express/ja/components/formcompose)[ComboBox`ui.widgets.ComboBox`検索・絞り込みができ、値を書き戻す複合入力。](https://zenit.z.express/ja/components/combobox)[TagsInput`ui.widgets.TagsInput`キーボードで複数の token を続けて入力します。](https://zenit.z.express/ja/components/tags)[FileUpload`ui.widgets.FileUpload`ファイル選択とドロップ先。](https://zenit.z.express/ja/components/upload)[DatePicker`ui.widgets.DatePicker`日付を入力するか、カレンダーから選びます。](https://zenit.z.express/ja/components/datepicker)[DateRangePicker`ui.widgets.DateRangePicker`開始日と終了日を選びます。](https://zenit.z.express/ja/components/daterange)[Form`ui.widgets.FormOf(T)`型付きのフォーム状態、フィールドのメタ情報、検証タイミング。](https://zenit.z.express/ja/components/form)[Badge`ui.widgets.Badge`控えめな状態表示、件数、セマンティックカラーのラベル。](https://zenit.z.express/ja/components/badge)[Tag`ui.widgets.Tag`閉じられる、または読み取り専用の分類ラベル。](https://zenit.z.express/ja/components/tag)[Chip`ui.widgets.Chip`コンパクトな選択肢、フィルター条件、アイコン付き token。](https://zenit.z.express/ja/components/chip)[Card`ui.widgets.Card`タイトル、本文、インタラクティブな面を一つの視覚単位にまとめます。](https://zenit.z.express/ja/components/card)[Alert`ui.widgets.Alert`ページ内に留まるフィードバック。](https://zenit.z.express/ja/components/alert)[Progress`ui.widgets.Progress`確定的な進捗と不確定なタスク状態。](https://zenit.z.express/ja/components/progress)[Spinner`ui.widgets.Spinner`短い読み込み待ちのためのコンパクトなアニメーション。](https://zenit.z.express/ja/components/spinner)[Skeleton`ui.widgets.Skeleton`コンテンツの読み込み中に表示するプレースホルダーの骨組み。](https://zenit.z.express/ja/components/skeleton)[Timeline`ui.widgets.Timeline`時間や状態ごとに縦方向のイベントを表示します。](https://zenit.z.express/ja/components/timeline)[Breadcrumb`ui.widgets.Breadcrumb`現在の位置とその祖先のパスを示します。](https://zenit.z.express/ja/components/breadcrumb)[Steps`ui.widgets.Steps`複数段階のタスクの完了・現在・未処理の状態を示します。](https://zenit.z.express/ja/components/steps)[Tree`ui.widgets.Tree`階層データ、ファイルツリー、展開可能な構造。](https://zenit.z.express/ja/components/tree)[Table`ui.widgets.Table`固定の列定義とカスタム cell renderer を備えた基本テーブル。](https://zenit.z.express/ja/components/table)[DataTable`ui.widgets.DataTable`フィルター、ページング、列の挙動を備えたデータテーブル。](https://zenit.z.express/ja/components/datatable)[Calendar`ui.widgets.Calendar`月表示での日付の閲覧と選択。](https://zenit.z.express/ja/components/calendar)[Markdown`ui.widgets.Markdown`サポートされる Markdown のサブセットをネイティブノードとして描画します。](https://zenit.z.express/ja/components/markdown)[Icons`ui.system_icons`プロバイダーに依存しないセマンティックなアイコンロール、サイズ、着色。](https://zenit.z.express/ja/components/icons)[Tabs`ui.widgets.Tabs`同じコンテキスト内で同階層のビューを切り替えます。](https://zenit.z.express/ja/components/tabs)[Accordion`ui.widgets.Accordion`セクションの折りたたみと展開。](https://zenit.z.express/ja/components/accordion)[Menu`ui.widgets.Menu`ショートカットのヒント付きのコンテキストアクション一覧。](https://zenit.z.express/ja/components/menu)[DropdownMenu`ui.widgets.DropdownMenu`ボタンから開くコマンドの一覧。](https://zenit.z.express/ja/components/dropdown)[Notification`ui.widgets.Notifier`作業を中断しない通知：9 種類のタイプ、進捗、アクションボタン、スタック、8 つの配置位置。](https://zenit.z.express/ja/components/notification)[Tooltip`ui.widgets.Tooltip`コントロールに短い補足説明を添えます。](https://zenit.z.express/ja/components/tooltip)[Popover`ui.widgets.Popover`Tooltip より豊かな一時的コンテンツを表示します。](https://zenit.z.express/ja/components/popover)[Modal`ui.widgets.Modal`ブロッキングなタスク、確認、集中すべきコンテキスト。](https://zenit.z.express/ja/components/modal)[Sheet`ui.widgets.Sheet`ウィンドウの端からスライドインする補助パネル。](https://zenit.z.express/ja/components/sheet)[GlassBox`ui.widgets.GlassBox`本物の backdrop blur を使ったガラスの面。](https://zenit.z.express/ja/components/glassbox)[Divider`ui.widgets.Divider`水平、垂直、ラベル付きの区切り線。](https://zenit.z.express/ja/components/divider)[Stack`ui.widgets.HStack / VStack`よく使う水平・垂直の並び。](https://zenit.z.express/ja/components/stack)[Layout / Box Model`ui.box`ボックスモデル、パーセント、絶対配置、Flex / Grid、クリッピングの網羅マトリクス。](https://zenit.z.express/ja/components/layoutbox)[VirtualList`ui.widgets.VirtualList`大量の等高データのうち、表示範囲だけをマウントします。](https://zenit.z.express/ja/components/virtuallist)[VirtualList (Dynamic)`ui.widgets.VirtualList`行の高さが異なる仮想リスト。](https://zenit.z.express/ja/components/virtuallistdynamic)[ScrollArea`ui.widgets.mountScrollArea`自前描画のスクロール、スクロールバー、プログラムからの位置指定。](https://zenit.z.express/ja/components/scrollarea)[Grid`ui.widgets.mountGrid`2 次元の行列データとカスタム cell renderer。](https://zenit.z.express/ja/components/grid)[GlassLab`ui.widgets.GlassBox`GlassBox の光学パラメータ実験台：屈折、ベゼル幅、拡大。](https://zenit.z.express/ja/components/glasslab)[GlassIslands`ui.widgets.GlassBox`同じ背景の上に重ねた複数のガラスの島。](https://zenit.z.express/ja/components/glassislands)[GlassMotion`ui.widgets.GlassBox`ガラスの変形と、スクロールに合わせて浮かぶツールバー。](https://zenit.z.express/ja/components/glassmotion)[GlassChrome`ui.widgets.GlassBox`アプリの chrome：スクロールするコンテンツの上にガラスのタイトルバーとツールバー。](https://zenit.z.express/ja/components/glasschrome)[CanvasEvents`ui.events`キャンバスレベルのイベント：スクロール、拡大ジェスチャー、ドラッグ、クリップボード経由の PNG 往復。](https://zenit.z.express/ja/components/canvasevents)[Drag`ui.interaction`ドラッグと水平方向の resize ハンドル。](https://zenit.z.express/ja/components/drag)[Gestures`ui.interaction`シングル、ダブル、トリプルクリックと長押しのジェスチャー調停。](https://zenit.z.express/ja/components/multiclick)[AnimControls`ui.fx`アニメーション制御：yoyo、タイムライン、キーフレーム、スプリング。](https://zenit.z.express/ja/components/animctl)[VectorPath`ui.path`ベクターパスのジオメトリ：ストローク、塗り、ヒットテスト。](https://zenit.z.express/ja/components/vectorpath)[BlendModes`ui.box`ブレンドモードと不透明度の合成。](https://zenit.z.express/ja/components/blend)[Emoji`ui.text`カラー絵文字、ZWJ シーケンス、肌の色の修飾子。](https://zenit.z.express/ja/components/emoji)[RTL`ui.text`アラビア文字、ヘブライ文字、ラテン文字の混在テキスト。](https://zenit.z.express/ja/components/rtl)[WordNav`ui.widgets.Textarea`文字体系をまたいだ単語単位のカーソル移動。](https://zenit.z.express/ja/components/wordnav)