コンテンツにスキップ

印刷

業務ページは印刷されます: 配送員に渡す注文詳細、会議に持ち込む検索 結果、監査ファイルに綴じるチケット。hc.print.cssオプトインの スタイルシートで、ページごとの作業なしに既定の印刷出力をまともに します。

<link rel="stylesheet" href="https://unpkg.com/@hypermedia-components/core/dist/hc.print.css">

またはバンドルで:

@import '@hypermedia-components/core/css/print';

すべては最後のカスケードレイヤー内の @media print に住んでいます — 画面上では何も変わらず、紙の上ではレイヤー順だけでコンポーネントの スタイルに勝ちます。

  • 紙にはアプリではなくレコードを。 操作用のクロームは隠れます: シェルのナビゲーションとヘッダー、ツールバー、メニューバー、 ボタンとボタングループ、ページネーション、トースト、ドロワー、 ツールチップ、ホバーカード、コマンドパレット、スケルトン、 スピナー、htmx インジケーター、閉じたダイアログ。
  • データはそのまま生き延びます。 スクロール領域はクリップを 外し、datagrid の固定ヘッダーは static になり、切り詰められた セルは省略記号をやめて折り返し、<thead> はページをまたいで 繰り返され、行・カード・フィールド・アラート・アコーディオン 項目・タイムライン項目は改ページで分割されません。
  • インクは正直に。 影は消え、アクティブな data-theme に かかわらずページはライトで印刷され、テーブルは黒の細罫線になり、 ステータスを担う容器(カード、アラート、バッジ、チップ)は グレースケールでも意味が残るよう細い枠線を保ちます。
  • 状態属性は権威のままです: [hidden] の内容、閉じた <details>、閉じたダイアログ、非アクティブなタブパネルは印刷 されません — 印刷は「ユーザーが見ていたもの」を写します。紙が 画面以上を必要とするなら、サーバー側で専用の印刷ビューを レンダリングしてください。
  • リンクの URL 展開はしません — 業務文書はインラインの href が ない方が読みやすいためです。
  • ページのヘッダー/フッターは付けません — それらは @page の マージンボックスとアプリ自身の印刷ビューの仕事です。
  • テーマ — 紙の上で このファイルが上書きする、画面側の data-theme 軸。
  • データグリッド — 最も恩恵を受けるコンポーネント。