v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

カラーピッカー

    Framework7には、究極のモジュール式カラーピッカーコンポーネントが搭載されており、「カラーモジュール」を無限に組み合わせてカラーピッカーを作成することができます。

    カラーピッカーアプリのメソッド

    ここでは、Color Pickerに関連するアプリのメソッドを紹介します。

    app.colorPicker.create(parameters)- カラーピッカーのインスタンス作成

    • parameters - object. Color Pickerのパラメータを持つオブジェクト

    作成したColor Pickerのインスタンスを返すメソッド

    app.colorPicker.destroy(el)- Color Pickerインスタンスの破棄

    • el - HTMLElementまたはstring(CSSセレクタを使用)またはobject。破壊するカラーピッカー要素またはカラーピッカーインスタンスを指定します。

    app.colorPicker.get(el)- HTML要素でカラーピッカーのインスタンスを取得

    • el - HTMLElement または string (CSS Selectorを使用). Color Pickerの要素です。

    メソッドは、Color Pickerのインスタンスを返します。

    app.colorPicker.close(el)- 閉じるカラーピッカー

    • el - HTMLElement または string (CSS Selectorを使用した場合)。Color Pickerの要素を閉じます。

    メソッドはColor Pickerのインスタンスを返します。

    例：

    var colorPicker = app.colorPicker.create({
  inputEl: '#color-input',
  value: {
    hex: '#ff000',
  },
});

    カラーピッカーのパラメータ

    利用可能なColor Pickerのパラメータの一覧を見てみましょう。

    ParameterTypeDefaultDescription
    valueobjectカラーピッカーの値を持つオブジェクト
    modulesarray['wheel']カラーピッカーのモジュールを見た目の順に並べた配列
    palettearray

    パレットモジュールの色を指定した配列で、各パレットの色はHEX文字列で指定する必要があります。

    のようなパレット値を持つプレーンな配列にすることもできます。

    palette: ['#ff0000', '#00ff00', ...]

    あるいは、パレットの "行 "を配列にして、各項目を色の配列で指定することもできます。

    palette: [
  // 1行目
  ['#ff0000', '#00ff00', ...]
  // 2行目
  ['#0000ff', '#f0000f', ...]
  ...
]

    デフォルトでは次のようになります。

    [
  ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
  ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
  ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
  ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
  ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
  ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
  ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
  ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
]
    groupedModulesbooleanfalse有効にすると、スライダーモジュールの露出を増やして、より分離して見えるようにします。
    centerModulesbooleantrue有効にすると、十分なスペースがあれば、モジュールを垂直方向に中央に配置しようとします。
    sliderLabelbooleanfalse有効にすると、スライダのラベルをテキストで表示します。
    sliderValuebooleanfalse有効にすると、スライダの値を表示します。
    sliderValueEdiablebooleanfalse有効にすると、スライダの値を <input> 要素として表示し、直接編集できるようになります。
    barLabelbooleanfalse有効にすると、バーのラベルをテキストで表示します。
    barValuebooleanfalse有効にすると、バーの値が表示されます。
    barValueEdiablebooleanfalse有効にすると、バーの値が <input> 要素として表示され、直接編集することが可能になります。
    hexLabelbooleanfalse有効にすると、HEXモジュールのラベルテキストを表示します（例：HEX）。
    hexValueEditablebooleanfalse有効にすると、HEXモジュールの値が <input> 要素として表示され、直接編集が可能になります。
    Labels Texts
    redLabelTextstring'R'赤色のスライダー/バーのラベルテキスト
    greenLabelTextstring'G'緑のスライダ/バーのラベルテキスト
    blueLabelTextstring'B'青色のスライダ/バーのラベルテキスト
    hueLabelTextstring'H'色相スライダのラベルテキスト
    saturationLabelTextstring'S'彩度スライダのラベルテキスト
    brightnessLabelTextstring'B'輝度スライダのラベルテキスト
    hexLabelTextstring'HEX'HEXモジュールのラベルテキスト
    alphaLabelTextstring'A'Alpha (opacity) スライダーのラベルテキスト
    formatValuefunction (value)入力された値を整形する関数で、整形された文字列を返します。valueはカラーピッカーの値オブジェクトです。デフォルトではHEX値を返します。
    Container/opener-specific parameters
    containerElstring
    HTMLElement    		生成されたカラーピッカーのHTMLを配置するCSSセレクタまたはHTML要素を含む文字列です。インラインのカラーピッカーにのみ使用します。
    openInstringpopoverauto、popover (カラーピッカーをポップオーバーで開く)、sheet (シートモーダルで開く)、popup (ポップアップで開く)、page (ページで開く)のいずれかを指定します。auto の場合、小さい画面では openInPhone パラメータで指定されたとおりに、大きい画面ではポップオーバーで開きます。
    openInPhonestringpopup小さな画面では、openIn: "auto"の場合
    popupPushbooleanfalseカラーピッカーを開いたときに、その後ろにビューを表示するようにします。
    popupSwipeToClosebooleanundefinedスワイプでカラーピッカーのポップアップを閉じる機能を有効にします。指定されていない場合は、アプリの Popup swipeToClose パラメータを継承します。
    sheetPushbooleanfalseカラーピッカーシートを開いた時に、ビューを後ろに押す機能を有効にします。
    sheetSwipeToClosebooleanundefinedスワイプでカラーピッカーシートを閉じる機能を有効にします。指定されていない場合は、アプリのSheetの swipeToClose パラメータを継承します。
    inputElstring or HTMLElement関連する入力要素を持つCSSセレクタまたはHTMLElementを持つ文字列
    targetElstring or HTMLElementCSSセレクタまたはHTMLElementと関連するtarget elementを持つ文字列。入力要素に加えて、現在選択されている色を表示する要素を追加で配置したい場合があります。そのような要素はターゲット要素として指定することができます。ポップオーバーでカラーピッカーを開いた場合、このターゲット要素を中心に配置されます。指定したターゲット要素をクリックすると、カラーピッカーも開きます。
    targetElSetBackgroundColorbooleanfalse有効になっていて、かつ targetEl を渡している場合は、現在選択されている値の background-color をターゲット要素に設定します。
    scrollToInputbooleantrueカラーピッカーが開いたときに、ビューポート(ページコンテンツ)を入力にスクロールします。
    inputReadOnlybooleantrue指定された入力に "readonly" 属性を設定する。
    cssClassstringカラーピッカーのコンテナに設定される追加のCSSクラス名
    closeByOutsideClickbooleantrue有効にすると、ピッカーまたは関連する入力要素の外側をクリックしたときにピッカーが閉じられるようになる
    toolbarSheetbooleantrueシートモーダルで開いたときにツールバーを表示する
    toolbarPopoverbooleanfalseポップオーバーモーダルで開いたときにツールバーを表示する
    toolbarCloseTextstringDoneDone/Closeツールバーボタンのテキスト
    navbarPopupbooleantruePopup modalで開いたときにナビバーを表示する
    navbarCloseTextstringDoneナビバーボタンの「完了/終了」のテキスト
    navbarTitleTextstringColorナビバーのタイトルのテキスト
    navbarBackLinkTextstringBackページ内でカラーピッカーを開いたときに表示されるナビバーのバックリンクのテキスト
    routableModalsbooleanfalse開いたカラーピッカーをルータの履歴に追加し、ルータの履歴に戻って現在のルートをカラーピッカーのモーダルに設定することで閉じることができるようにします。
    urlstringcolor/カレントルートとして設定されるカラーピッカーモーダルのURL
    viewobjectroutableModalsが有効な場合にルーティングを設定するビューです。親ビューが見つからない場合は、inputEl` の親ビュー、もしくはメインビューがデフォルトとなります。
    backdropbooleanカラーピッカーの背景(後ろの暗い半透明のレイヤー)を有効にします。デフォルトでは、PopoverまたはPopupでColor Pickerを開いたときに有効になります。
    closeByBackdropClickbooleantrue有効にすると、背景をクリックするとカラーピッカーが閉じます。
    Render Functions
    renderToolbarfunctionツールバーをレンダリングする関数です。ツールバーのHTML文字列を返す必要があります。
    renderNavbarfunction(date)ナビバーを描画する関数です。ナビバーのHTML文字列を返す必要があります。
    renderfunctionカラーピッカーを表示する関数です。フルカラーピッカーを表示する関数です。
    Events
    onobject

    イベントハンドラーを持つオブジェクトです。例えば、以下のようなものがあります。

    var colorPicker = app.colorPicker.create({
  ...
  on: {
    opened: function () {
      console.log('Color Picker opened')
    }
  }
})

    以下のすべてのパラメータは、アプリのグローバルパラメータの colorPicker プロパティで使用して、すべてのカラーピッカーのデフォルトを設定できることに注意してください。例えば、以下のようになります。

    var app = new Framework7({
  colorPicker: {
    modules: ['hb-spectrum', 'hue-slider'],
    url: 'select-color/',
  }
});

    カラーピッカーモジュール

    カラーピッカー作成時の配列パラメータ modules に使用したいモジュールを指定することで、独自のカラーピッカーレイアウトを作成することができます。以下のモジュールが用意されています。

    wheel

    内部に彩度-明度スペクトルを持つ色相ホイール

    sb-spectrum

    彩度-明度スペクトル。hue-slider`と一緒に使うことをお勧めします。

    hue-slider

    単一の色相スライダ

    hs-spectrum

    色相-彩度のスペクトル。brightness-slider` と一緒に使うことをお勧めします。

    brightness-slider

    単一の輝度スライダ

    rgb-sliders

    赤、緑、青のスライダ

    hsb-sliders

    色相、彩度、明るさスライダ

    alpha-slider

    アルファ（不透明度）シングルスライダ

    rgb-bars

    赤、緑、青の縦型スライダ

    palette

    モジュールは、paletteパラメータで指定されたパレットカラーを表示します。

    hex

    モジュールに現在のHEX値を表示

    current-color

    現在選択されている色を表示するモジュール

    initial-current-colors

    モジュールは、現在選択されている色と、初期色（カラーピッカーを開く前に選択されていた色）を表示します。初期色をクリックすると、カラーピッカーの値が初期色に設定されます。

    カスタムモジュール

    カスタムモジュールを使って、カラーピッカーを作成することもできます。このようなカスタムモジュールは、カスタムピッカーを作成したり、モジュール間にカスタムコンテンツを追加したりするのに使用できます。

    カスタムカラーピッカーモジュールを追加するには、 modules の配列パラメータに文字列ではなくオブジェクトを渡す必要があります。カスタムモジュールオブジェクトには、以下のようなメソッドがあります。各メソッドには、カラーピッカーのインスタンスが引数として渡されます。

    render(colorPicker)モジュールのレンダリング機能。モジュールのHTMLコンテンツを返す必要があります。
    init(colorPicker)モジュールのinit関数です。これは、モジュールがレンダリングされ、DOMに追加されたときに実行されます。カスタムイベントリスナーを定義する必要があります。
    update(colorPicker)このメソッドは、カラーピッカーの値が更新されたときに実行されます。
    destroy(colorPicker)このメソッドは、モジュールの破棄時に実行されます。ここですべてのイベントリスナーを解除する必要があります。

    例えば、モジュールとモジュールの間にカスタムテキストを追加する必要がある場合、このようなシンプルなモジュールを使用することができます。

    var colorPicker = app.colorPicker.create({
  // ...
  modules: [
    'sb-spectrum',
    // レンダリング機能のみのカスタムモジュール
    {
      render: function() {
        return '<p class="text-align-center">Enter HUE value:</p>'
      },
    },
    'hue-slider',
  ]
})

    モジュールでどのように動作するかのヒントは、組み込みモジュールのソースコードをご覧ください。

    カラーピッカーの値

    Color Pickerのインスタンス値は、以下のプロパティを持つObjectとして表されます。

    hexstringHEXカラーの値 (例: #ff0000)
    rgbarrayRGB ([Red, Green, Blue]) カラーの配列、例えば [255, 100, 20]。
    hslarrayHSL（[Hue, Saturation, Lightness]）の色の配列、例えば、[320, 0.1, 0.9]。
    hsbarrayHSB/V（[色相、彩度、明度]）の色を持つ配列（例：[180, 0.5, 0.3]`）。
    alphanumberアルファ（不透明度）の値（0から1まで）、例：0.6.
    huenumber色相の値（0から360まで）、例えば320。
    rgbaarrayRGBA（[Red, Green, Blue, Alpha]）カラーの配列、例えば、[255, 100, 20, 0.5]。
    hslaarrayHSLA（[Hue, Saturation, Lightness, Alpha]）カラーの配列（例：320, 0.1, 0.9, 0.2]）。

    例：

    var colorPicker = app.colorPicker.create({
  ...
  on: {
    change: function (value) {
      console.log(`HEX value is ${value.hex}. Opacity is ${value.alpha}`);
      $('.some-element').css('background-color', `rgba(${value.rgba.join(', ')})`);
    }
  }
})

    カラーピッカーのメソッドとプロパティ

    カラーピッカーを初期化すると、その初期化されたインスタンスが変数（上記の例では colorPicker 変数）に格納され、便利なメソッドとプロパティが用意されます。

    Properties
    colorPicker.appグローバルアプリのインスタンスへのリンク
    colorPicker.containerElカラーピッカーのラッピングコンテナ HTML 要素 (インラインカラーピッカーが使用されている場合)
    colorPicker.$containerElカラーピッカーをラッピングしたコンテナのHTML要素を持つDom7インスタンス（インラインカラーピッカーを使用している場合
    colorPicker.elカラーピッカーのHTML要素
    colorPicker.$elカラーピッカーを持つ Dom7 インスタンス HTML 要素
    colorPicker.inputElカラーピッカーの入力 HTML 要素 (inputEl パラメータで渡される)
    colorPicker.$inputElカラーピッカーの入力HTML要素を持つDom7インスタンス（inputElパラメータで渡される
    colorPicker.targetElカラーピッカーのターゲットとなるHTML要素 (targetEl パラメータで渡される)
    colorPicker.$targetElカラーピッカーのターゲットとなるHTML要素を持つDom7インスタンス (targetEl パラメータで渡される)
    colorPicker.valueカラーピッカーの値を持つオブジェクト
    colorPicker.opened現在カラーピッカーが開かれている場合は、trueとなります。
    colorPicker.inlineインラインカラーピッカーが使用されている場合は true となります。
    colorPicker.urlカラーピッカーのURL (url パラメータで渡されたもの)
    colorPicker.viewカラーピッカーのビュー(view パラメータで渡されたもの)または親ビューが見つかりました。
    colorPicker.params初期化パラメータを持つオブジェクト
    Methods
    colorPicker.setValue(value)新しいカラーピッカーの値を設定します。value` は カラーピッカーの値 オブジェクトで、部分的に指定することができます。
    var colorPicker = app.colorPicker.create({
  value: '#ff0000',
});

// 色相のみを更新
colorPicker.setValue({ hue: 200 });

// アルファだけを更新
colorPicker.setValue({ alpha: 0.2 });

// 16進数で値を設定
colorPicker.setValue({ hex: '#ff00ff' });
    colorPicker.getValue()現在のカラーピッカーの値を返します。
    colorPicker.update()カラーピッカーモジュールのレイアウトを更新します (開いたとき、またはインラインのとき)
    colorPicker.open()カラーピッカーを開く
    colorPicker.close()カラーピッカーを閉じる
    colorPicker.destroy()カラーピッカーのインスタンスを破棄し、すべてのイベントを削除する
    colorPicker.on(event, handler)イベントハンドラの追加
    colorPicker.once(event, handler)イベントハンドラを追加して、イベントが発生したら削除する
    colorPicker.off(event, handler)イベントハンドラの削除
    colorPicker.off(event)指定したイベントのハンドラをすべて削除する
    colorPicker.emit(event, ...args)インスタンスでイベントを発生させる

    カラーピッカーのイベント

    カラーピッカーは、以下のDOMイベントをカラーピッカー要素に、イベントをアプリとカラーピッカーのインスタンスに発行します。

    DOM イベント

    EventDescription
    colorpicker:openイベントは、Color Picker がオープニングアニメーションを開始したときに発生します。
    colorpicker:openedイベントは、カラーピッカーがオープニングアニメーションを完了した後に発生します。
    colorpicker:closeイベントは、カラーピッカーが閉じるアニメーションを開始したときに発生します。
    colorpicker:closedイベントは、Color Pickerが閉じるアニメーションを完了した後に発生します。

    アプリと Color Picker インスタンスのイベント

    Color Picker のインスタンスは、self インスタンスと app インスタンスの両方でイベントを発行します。アプリのイベントは同じ名前で、プレフィックスとして colorPicker が付きます。

    EventTargetArgumentsDescription
    changecolorPicker(colorPicker, value)カラーピッカーの値が変更されるとイベントが発生します。
    colorPickerChangeapp
    initcolorPicker(colorPicker)イベントはカラーピッカーが初期化されたときに発生します。
    colorPickerInitapp
    opencolorPicker(colorPicker)イベントは、カラーピッカーがオープニングアニメーションを開始したときに発生します。イベントハンドラの引数として、カラーピッカーのインスタンスを受け取ります。
    colorPickerOpenapp
    openedcolorPicker(colorPicker)イベントは、カラーピッカーがそのオープニングアニメーションを完了した後にトリガされます。As an argument event handler receives color picker instance
    colorPickerOpenedapp
    closecolorPicker(colorPicker)イベントは、カラーピッカーが閉じるアニメーションを開始するときにトリガされます。As an argument event handler receives color picker instance
    colorPickerCloseapp
    closedcolorPicker(colorPicker)イベントは、カラーピッカーが閉じるアニメーションを完了した後にトリガされます。As an argument event handler receives color picker instance
    colorPickerClosedapp
    beforeDestroycolorPicker(colorPicker)イベントは、カラーピッカーのインスタンスが破壊される直前に発生します。As an argument event handler receive color picker instance
    colorPickerBeforeDestroyapp

    CSS Variables

    Below is the list of related CSS variables (CSS custom properties).

    :root {
  --f7-color-picker-popover-width: 350px;
  --f7-color-picker-slider-size: 6px;
  --f7-color-picker-slider-knob-size: 16px;
  --f7-color-picker-bar-size: 50px;
  --f7-color-picker-bar-min-height: 260px;
  --f7-color-picker-value-width: 64px;
  --f7-color-picker-value-height: 32px;
  --f7-color-picker-value-font-size: 16px;
  --f7-color-picker-value-border-radius: 4px;
  --f7-color-picker-hex-value-width: 84px;
  --f7-color-picker-label-font-size: 14px;
  --f7-color-picker-label-width: 10px;
  --f7-color-picker-label-height: 14px;
  --f7-color-picker-sb-spectrum-height: 260px;
  --f7-color-picker-sb-spectrum-handle-size: 16px;
  --f7-color-picker-wheel-width: 330px;
  --f7-color-picker-palette-value-width: 36px;
  --f7-color-picker-palette-value-height: 36px;
  --f7-color-picker-initial-current-color-height: 40px;
  --f7-color-picker-initial-current-color-border-radius: 4px;
  --f7-color-picker-sheet-bg-color: #fff;
  --f7-color-picker-popup-bg-color: #fff;
  --f7-color-picker-value-bg-color: rgba(0, 0, 0, 0.05);
  --f7-color-picker-group-bg-color: rgba(0, 0, 0, 0.05);
  --f7-color-picker-group-value-bg-color: #fff;
}
:root .theme-dark,
:root.theme-dark {
  --f7-color-picker-sheet-bg-color: #121212;
  --f7-color-picker-popup-bg-color: #121212;
  --f7-color-picker-value-bg-color: rgba(255, 255, 255, 0.1);
  --f7-color-picker-group-bg-color: #000;
  --f7-color-picker-group-value-bg-color: rgba(255, 255, 255, 0.12);
}

    Examples

    <template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Color Picker</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Color Wheel</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-media">
                <i class="icon demo-list-icon" id="demo-color-picker-wheel-value"></i>
              </div>
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-wheel" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Saturation-Brightness Spectrum</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-media">
                <i class="icon demo-list-icon" id="demo-color-picker-spectrum-value"></i>
              </div>
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-spectrum" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Hue-Saturation Spectrum</div>
      <div class="block-header">HS Spectrum + Brightness Slider in Popover</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-media">
                <i class="icon demo-list-icon" id="demo-color-picker-hs-spectrum-value"></i>
              </div>
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-hs-spectrum" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">RGB Sliders</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-media">
                <i class="icon demo-list-icon" id="demo-color-picker-rgb-value"></i>
              </div>
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-rgb" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">RGBA Sliders</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-media">
                <i class="icon demo-list-icon" id="demo-color-picker-rgba-value"></i>
              </div>
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-rgba" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">HSB Sliders</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-media">
                <i class="icon demo-list-icon" id="demo-color-picker-hsb-value"></i>
              </div>
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-hsb" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">RGB Bars</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-media">
                <i class="icon demo-list-icon" id="demo-color-picker-rgb-bars-value"></i>
              </div>
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-rgb-bars" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">RGB Sliders + Colors</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-media">
                <i class="icon demo-list-icon" id="demo-color-picker-rgb-initial-current-colors-value"></i>
              </div>
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Color" readonly="readonly"
                    id="demo-color-picker-rgb-initial-current-colors" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Palette</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-media">
                <i class="icon demo-list-icon" id="demo-color-picker-palette-value"></i>
              </div>
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-palette" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Pro Mode</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-media">
                <i class="icon demo-list-icon" id="demo-color-picker-pro-value"></i>
              </div>
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-pro" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Inline Color Picker</div>
      <div class="block block-strong no-padding">
        <div id="demo-color-picker-inline"></div>
      </div>
    </div>
  </div></template>
<style>
  .demo-list-icon,
  .icon-f7 {
    background: #ccc;
    display: block;
    position: relative;
  }

  .ios .demo-list-icon {
    width: 29px;
    height: 29px;
    border-radius: 6px;
    box-sizing: border-box;
  }

  .md .demo-list-icon,
  .aurora .demo-list-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
  }
</style>
<script>
  export default (props, { $, $f7, $on }) => {
    let colorPickerWheel;
    let colorPickerSpectrum;
    let colorPickerHsSpectrum;
    let colorPickerRgb;
    let colorPickerRgba;
    let colorPickerHsb;
    let colorPickerRgbBars;
    let colorPickerRgbInitialCurrentColors;
    let colorPickerPalette;
    let colorPickerRgbPro;
    let colorPickerInline;

    $on('pageInit', () => {
      colorPickerWheel = app.colorPicker.create({
        inputEl: '#demo-color-picker-wheel',
        targetEl: '#demo-color-picker-wheel-value',
        targetElSetBackgroundColor: true,
        modules: ['wheel'],
        openIn: 'popover',
        value: {
          hex: '#00ff00',
        },
      });
      colorPickerSpectrum = app.colorPicker.create({
        inputEl: '#demo-color-picker-spectrum',
        targetEl: '#demo-color-picker-spectrum-value',
        targetElSetBackgroundColor: true,
        modules: ['sb-spectrum', 'hue-slider'],
        openIn: 'popover',
        value: {
          hex: '#ff0000',
        },
      });

      colorPickerHsSpectrum = app.colorPicker.create({
        inputEl: '#demo-color-picker-hs-spectrum',
        targetEl: '#demo-color-picker-hs-spectrum-value',
        targetElSetBackgroundColor: true,
        modules: ['hs-spectrum', 'brightness-slider'],
        openIn: 'popover',
        value: {
          hex: '#ff0000',
        },
      });

      colorPickerRgb = app.colorPicker.create({
        inputEl: '#demo-color-picker-rgb',
        targetEl: '#demo-color-picker-rgb-value',
        targetElSetBackgroundColor: true,
        modules: ['rgb-sliders'],
        openIn: 'popover',
        sliderValue: true,
        sliderLabel: true,
        value: {
          hex: '#0000ff',
        },
      });
      colorPickerRgba = app.colorPicker.create({
        inputEl: '#demo-color-picker-rgba',
        targetEl: '#demo-color-picker-rgba-value',
        targetElSetBackgroundColor: true,
        modules: ['rgb-sliders', 'alpha-slider'],
        openIn: 'popover',
        sliderValue: true,
        sliderLabel: true,
        value: {
          hex: '#ff00ff',
        },
        formatValue: function (value) {
          return 'rgba(' + value.rgba.join(', ') + ')';
        },
      });
      colorPickerHsb = app.colorPicker.create({
        inputEl: '#demo-color-picker-hsb',
        targetEl: '#demo-color-picker-hsb-value',
        targetElSetBackgroundColor: true,
        modules: ['hsb-sliders'],
        openIn: 'popover',
        sliderValue: true,
        sliderLabel: true,
        formatValue: function (value) {
          return 'hsb(' + value.hsb[0] + (', ' + value.hsb[1] * 1000 / 10 + '%') + (', ' + value.hsb[2] * 1000 / 10 + '%') + ')';
        },
        value: {
          hex: '#00ff00',
        },
      });
      colorPickerRgbBars = app.colorPicker.create({
        inputEl: '#demo-color-picker-rgb-bars',
        targetEl: '#demo-color-picker-rgb-bars-value',
        targetElSetBackgroundColor: true,
        modules: ['rgb-bars'],
        openIn: 'auto',
        barValue: true,
        barLabel: true,
        formatValue: function (value) {
          return 'rgb(' + value.rgb.join(', ') + ')';
        },
        value: {
          hex: '#0000ff',
        },
      });
      colorPickerRgbInitialCurrentColors = app.colorPicker.create({
        inputEl: '#demo-color-picker-rgb-initial-current-colors',
        targetEl: '#demo-color-picker-rgb-initial-current-colors-value',
        targetElSetBackgroundColor: true,
        modules: ['initial-current-colors', 'rgb-sliders'],
        openIn: 'popover',
        sliderValue: true,
        sliderLabel: true,
        formatValue: function (value) {
          return 'rgb(' + value.rgb.join(', ') + ')';
        },
        value: {
          hex: '#ffff00',
        },
      });
      colorPickerPalette = app.colorPicker.create({
        inputEl: '#demo-color-picker-palette',
        targetEl: '#demo-color-picker-palette-value',
        targetElSetBackgroundColor: true,
        modules: ['palette'],
        openIn: 'auto',
        openInPhone: 'sheet',
        palette: [
          ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
          ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
          ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
          ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
          ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
          ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
          ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
          ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
        ],
        value: {
          hex: '#FFEBEE',
        },
        formatValue: function (value) {
          return value.hex;
        },
      });

      colorPickerRgbPro = app.colorPicker.create({
        inputEl: '#demo-color-picker-pro',
        targetEl: '#demo-color-picker-pro-value',
        targetElSetBackgroundColor: true,
        modules: ['initial-current-colors', 'sb-spectrum', 'hsb-sliders', 'rgb-sliders', 'alpha-slider', 'hex', 'palette'],
        openIn: 'auto',
        sliderValue: true,
        sliderValueEditable: true,
        sliderLabel: true,
        hexLabel: true,
        hexValueEditable: true,
        groupedModules: true,
        palette: [
          ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
          ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
          ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
          ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
          ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
          ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
          ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
          ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
        ],
        formatValue: function (value) {
          return 'rgba(' + value.rgba.join(', ') + ')';
        },
        value: {
          hex: '#00ffff',
        },
      });

      colorPickerInline = app.colorPicker.create({
        containerEl: '#demo-color-picker-inline',
        modules: ['sb-spectrum', 'hsb-sliders', 'alpha-slider'],
        value: {
          hex: '#77ff66',
        },
      });
    });

    return $render;
  }
</script>