バージョン

igQRCodeBarcode のスタイル設定

トピックの概要

目的

このトピックでは、igQRCodeBarcode™ コントロールのスタイルを設定する方法を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

  • igQRCodeBarcode の概要: このトピックでは、主要機能、最小要件など、igQRCodeBarcode コントロールの概念的情報を提供します。

  • igQRCodeBarcode の追加: このトピック グループでは、igQRCodeBarcode コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

概要

igQRCodeBarcode の外観構成の概要

igQRCodeBarcode は、バーの色を調整する API を公開しているため、コントロールの境界線を色付けしたりカスタム境界線の太さを指定して、ユニークでトレンディな外観を作成できます。

igQRCodeBarcode の外観構成の概要表

以下の表は、igQRCodeBarcode コントロールの外観に関連する構成可能な要素を示しています。

構成可能な項目 詳細 プロパティ
バーコードのバーの色 バーコードの色を設定できます。
背景色 バーコードのバーの背景領域の色を指定できます。
境界線の太さと色 バーコードの境界線の太さと色をカスタマイズできます。

igQRCodeBarcode コントロールの外観の構成

プロパティ設定

以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。

目的: 使用するプロパティ:設定の選択肢:
背景色の構成 backingBrush 任意の色
バーコードのバーの色の構成 barBrush 任意の色
境界線の太さの構成 backingStrokeThickness 任意の値
境界線の色の構成 backingOutline 任意の色

例

以下のスクリーンショットは、以下の設定の結果、igQRCodeBarcode の外観がどのようになるか示しています。

プロパティ 値
backingBrush “yellow”
barBrush “blue”
backingStrokeThickness “5”
backingOutline “green”

以下のコードはこの例を実装します。

HTML の場合:

<head>
...
    <script type="text/jscript">
        $(function () {                        
          $("#barcode").igQRCodeBarcode({
                width: "150px",
                height: "150px",
                data: "http://www.infragistics.com",
                backingBrush: "yellow",
                barBrush: "blue",
                backingStrokeThickness:"5",
                backingOutline: "green"
           });
       });
    </script>
</head>
<body>
    <div id="barcode">
    </div>
</body>

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

サンプル

このトピックについては、以下のサンプルも参照してください。

  • 色の構成: このサンプルは、バーコードで使用する色を構成して igQRCodeBarcode コントロールをスタイル設定する方法を紹介します。

オンラインで表示: GitHub