POS+ LOGO

基本形

基本形反転

縦組み

ダウンロード

POS+ SERVICE LOGO

POS+food

POS+retail

POS+beauty

POS+lite

POS+connect

POS+pay

POS+timerecorder

POS+QSC

POS+engagement

FAVICON

各種サービス

icoデータ

管理画面

icoデータ

GRID

bootstrapの仕様を継承しています。 bootstrap4 - Grid system

2 カラムレイアウト

col-6

HTML

                            <div class="col-6">col-6</div>
<div class="col-6">col-6</div>

3 カラムレイアウト

col-4

HTML

                            <div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>

COLOR

Primary Color

#xxx

Secondary Color

#xxx

Negative Color

#xxx

Link

#xxx

Light gray

#xxx

Dark

#xxx

Success

#xxx

warn

#xxx

danger

#xxx

info

#xxx

TYPOGRAPHY

Header 1

color:#4a4a4a

Header 2

color:#4a4a4a

Section header

color:#4a4a4a/bg:#eeeee

This is text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

color:#4a4a4a

This is an inline link

color:#8b614f/hover color:#c87d5d

COMPONENTS

Alignment

中央よせ

左よせ

右よせ

HTML

                            <p class="text-center bg-light">中央よせ</p>
<p class="text-left">左よせ</p>
<p class="text-right bg-light mb-5">右よせ</p>

Text Color

プライマリーカラー

セカンダリー

サクセスカラー

ワーニングカラー

デンジャーカラー

インフォカラー

テキストカラー適用ルール

基本的に色味は変更する必要はありません。
必要に応じて色味を変更可能ですが、意味なく多色を使用するのは避けてください。
postas-bootstrapを上書きする場合は他ページとの統一感などに注意！

Button

ボタン適用ルール

基本的に画面内に1つだけ使用する。適切なボタンがなければなくてもよい。
「追加」「検索」などの重要なアクションに対して適用する。

基本的にプライマリーボタン以外のボタンに使用する。
画面内にいくつ存在していてもOK。

背景色が白以外で、通常のbtn-secondaryでは可読性が悪い場合のみで使用する。

ネガティブなアクションの時に使用する。
「戻る」「キャンセル」などのボタンに適用する。

注意が必要なアクションの時に使用する。
「削除」などのボタンに適用する。

サイズ固定

Normal

Large

HTML

                            <button class="btn-primary">PRIMARY</button>
<button class="btn-secondary">SECONDARY</button>
<button class="btn-secondary02">SECONDARY02</button>
<button class="btn-negative">NEGATIVE</button>
<button class="btn-danger">DANGER</button>

<button class="btn-primary-lg">PRIMARY</button>
<button class="btn-secondary-lg">SECONDARY</button>
<button class="btn-secondary02-lg">SECONDARY02</button>
<button class="btn-negative-lg">NEGATIVE</button>
<button class="btn-danger-lg">DANGER</button>

テキストに応じてサイズを可変（最小サイズを固定）

Normal

Large

非活性

HTML

                            <button class="btn-primary-extend">PRIMARYPRIMARYPRIMARY</button>
<button class="btn-secondary-extend">SECONDARYSECONDARYSECONDARY</button>
<button class="btn-secondary02-extend">SECONDARYSECONDARYSECONDARY02</button>
<button class="btn-negative-extend">NEGATIVENEGATIVENEGATIVE</button>
<button class="btn-danger-extend">DANGERDANGERDANGER</button>

<button class="btn-primary-lg-extend">PRIMARYPRIMARYPRIMARY</button>
<button class="btn-secondary-lg-extend">SECONDARYSECONDARYSECONDARY</button>
<button class="btn-secondary02-lg-extend">SECONDARYSECONDARYSECONDARY02</button>
<button class="btn-negative-lg-extend">NEGATIVENEGATIVENEGATIVE</button>
<button class="btn-danger-lg-extend">DANGERDANGERDANGER</button>

<button class="btn-primary" disabled>PRIMARY</button>
<button class="btn-secondary" disabled>SECONDARY</button>
<button class="btn-secondary02" disabled>SECONDARY02</button>
<button class="btn-negative" disabled>NEGATIVE</button>
<button class="btn-danger" disabled>DANGER</button>

ADD BUTTON

新規追加

HTML

                            <a href="#" class="add-button">新規追加</a>

メニューボタン

HTML

                            <button class="btn-submenu">BUTTON</button>

Form

Default Form group - search

地域

名前

フリーワード担当者名/店舗名

HTML

                            <form><div class="form-group row align-items-center">
  <label class="col-sm-3 col-form-label">地域</label>
  <div class="col-sm-9">
    <select class="input-item">
      <option value="" selected>選択してください</option>
      <option value="000">豊洲</option>
      <option value="001">新宿</option>
    </select>
  </div>
</div>
<div class="form-group row align-items-center">
  <label class="col-sm-3 col-form-label">名前</label>
  <div class="col-sm-9">
    <input type="text" class="input-item" type="text" placeholder="">
  </div>
</div>
<div class="form-group row align-items-center">
  <label class="col-sm-3 col-form-label">フリーワード
    <span class="label-addition">担当者名/店舗名</span>
  </label>
  <div class="col-sm-9">
    <input class="input-item-lg" type="text" placeholder="" />
  </div>
</div>
<div class="row justify-content-center">
  <button class="btn-primary" type="button">検索する</button>
  <button class="btn-negative" type="button">リセット</button>
</div>
</form>

Default Form group - add

HTML

                            <div class="label-input-group">
  <form class="add-form">
    <section>
      <div class="row align-items-center">
        <label class="col-sm-3 col-form-label">担当者コード</label>
        <div class="col-sm-9">
          <input type="text" class="input-item" type="text" placeholder="">
        </div>
      </div>
      <div class="row align-items-center">
        <label class="col-sm-3 col-form-label">名前</label>
        <div class="col-sm-9">
          <input type="text" class="input-item" type="text" placeholder="">
        </div>
      </div>
      <div class="row align-items-center">
        <label class="col-sm-3 col-form-label">略称
        </label>
        <div class="col-sm-9">
          <input class="input-item-lg" type="text" placeholder="" />
        </div>
      </div>
    </section>
    <div class="row justify-content-center">
      <button class="btn-primary" type="button">登録する</button>
    </div>
  </form>
</div>

Form with help text/Required item

担当者コード

半角英数12桁まで

HTML

                            <div class="label-input-group">
  <div class="row align-items-center">
    <label class="col-sm-3 col-form-label required">担当者コード</label>
    <div class="col-sm-9">
      <input type="text" class="input-item d-inline" type="text" placeholder="" />
      <span class="hint">半角英数12桁まで</span>
    </div>
  </div>
</div>

Text

disabled readonly

HTML

                            <input class="input-item-xsm mb-2" type="text" placeholder="input-item-xsm" />
<input class="input-item-sm mb-2" type="text" placeholder="input-item-sm" />
<input class="input-item mb-2" type="text" placeholder="input-item" />
<input class="input-item-lg mb-2" type="text" placeholder="input-item-lg" />
<input class="input-item-lg3 mb-2" type="text" placeholder="input-item-lg3" />
<input class="input-item-lg2 mb-2" type="text" placeholder="input-item-lg2" />
<input class="input-item-full mb-2" type="text" placeholder="input-item-full" />
<input class="input-item-sm mb-2" type="text" placeholder="input-item-sm" disabled />
<input class="input-item-sm mb-2" type="text" placeholder="input-item-sm" readonly />

Select

disabled

HTML

                            <select class="input-item-sm mb-2">
  <option value="" selected>選択してください</option>
  <option value="000">豊洲</option>
  <option value="001">新宿</option>
</select>
<select class="input-item mb-2">
  <option value="" selected>選択してください</option>
  <option value="000">豊洲</option>
  <option value="001">新宿</option>
</select>
<select class="input-item-lg mb-2">
  <option value="" selected>選択してください</option>
  <option value="000">豊洲</option>
  <option value="001">新宿</option>
</select>
<select class="input-item-lg mb-2" disabled>
  <option value="" selected>選択してください</option>
  <option value="000">豊洲</option>
  <option value="001">新宿</option>
</select>

Select2

複数選択の拡張として、プラグインselect2が利用出来ます。

これにより、検索機能や横並び形式の複数選択が表現出来ます。

その他の機能はリンク先を参照ください。

https://select2.org/

https://select2.org/configuration/options-api

検索

複数選択

HTML

                            <select class="select2" id="set_select2_multi" multiple id="set_select2" data-placeholder="選択してください" data-allow-clear="1">
  <option value="01">豊洲</option>
  <option value="02">新宿</option>
  <option value="03">六本木</option>
  <option value="04" disabled>恵比寿</option>
</select>
<script>
$(function () {
  common.setSelect2('#set_select2_multi');
});
</script>

<select class="select2" id="set_select2_multi" multiple id="set_select2" data-placeholder="選択してください" data-allow-clear="1">
  <option value="01">豊洲</option>
  <option value="02">新宿</option>
  <option value="03">六本木</option>
  <option value="04" disabled>恵比寿</option>
</select>
<script>
$(function () {
  common.setSelect2('#set_select2_multi');
});
</script>

Multiselect

disabled

HTML

                            <select multiple="multiple" id="set_multiselect" style="display: none;">
  <option value="01">豊洲</option>
  <option value="02">新宿</option>
  <option value="03">六本木</option>
  <option value="04" disabled>恵比寿</option>
</select>
<script>
  common.setMultiSelect("#set_multiselect");
</script>

<select multiple="multiple" id="set_multiselect_d" style="display: none;" disabled>
  <option value="01">豊洲</option>
  <option value="02">新宿</option>
  <option value="03">六本木</option>
  <option value="04">恵比寿</option>
</select>
<script>
  common.setMultiSelect("#set_multiselect_d");
</script>

Textarea

disabled readonly

HTML

                            <textarea class="input-item mb-2" rows="1" cols="20"></textarea>
<textarea class="input-item mb-2" rows="2" cols="40"></textarea>
<textarea class="input-item mb-2" rows="4" cols="80"></textarea>
<textarea class="input-item mb-2" disabled></textarea>
<textarea class="input-item mb-2" readonly></textarea>

Check

チェック選択済チェック未選択チェック非活性チェック済非活性チェック中間

HTML

                            <label class="checkbox" for="checkbox1">
  <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox" checked />
  <span class="icons">
    <span class="icon-unchecked"></span>
    <span class="icon-checked"></span>
  </span>
  <span class="label">チェック選択済</span>
</label>
<label class="checkbox" for="checkbox2">
  <input type="checkbox" value="" id="checkbox2" data-toggle="checkbox" />
  <span class="icons">
    <span class="icon-unchecked"></span>
    <span class="icon-checked"></span>
  </span>
  <span class="label">チェック未選択</span>
</label>
<label class="checkbox" for="checkbox3">
  <input type="checkbox" value="" id="checkbox3" data-toggle="checkbox" disabled />
  <span class="icons">
    <span class="icon-unchecked"></span>
    <span class="icon-checked"></span>
  </span>
  <span class="label">チェック非活性</span>
</label>
<label class="checkbox" for="checkbox3">
  <input type="checkbox" value="" id="checkbox3" data-toggle="checkbox" disabled checked />
  <span class="icons">
    <span class="icon-unchecked"></span>
    <span class="icon-checked"></span>
  </span>
  <span class="label">チェック済非活性</span>
</label>

Radio

ラジオ選択済ラジオ未選択ラジオ非活性

HTML

                            <label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios" value="1" data-toggle="radio"
    checked />
  <span class="icons">
    <span class="icon-unchecked"></span>
    <span class="icon-checked"></span>
  </span>
  ラジオ選択済
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios" value="2" data-toggle="radio" />
  <span class="icons">
    <span class="icon-unchecked"></span>
    <span class="icon-checked"></span>
  </span>
  ラジオ未選択
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios" value="3" data-toggle="radio"
    disabled />
  <span class="icons">
    <span class="icon-unchecked"></span>
    <span class="icon-checked"></span>
  </span>
  ラジオ非活性
</label>

Swith

OFF

スイッチ切替

OFF

スイッチ切替

HTML

                          <label for="checkbox_switch">
  <div class="switch">
    <input type="checkbox" value="" id="checkbox_switch" data-toggle="checkbox" checked="">
    <div class="switch_container">
      <div class="switch_wrap">
        <span class="label checked">ON</span>
        <div class="circle"></div>
        <span class="label unchecked">OFF</span>
      </div>
    </div>
  </div>
  スイッチ切替
</label>
<label for="checkbox_switch2">
  <div class="switch">
    <input type="checkbox" value="" id="checkbox_switch2" data-toggle="checkbox">
    <div class="switch_container">
      <div class="switch_wrap">
        <span class="label checked">ON</span>
        <div class="circle"></div>
        <span class="label unchecked">OFF</span>
      </div>
    </div>
  </div>
  スイッチ切替
</label>

Segmented control

HTML

                          <div class="segment">
  <div class="segment__item">
    <input type="radio" class="segment__input" name="navi-segment-a" checked="">
    <div class="segment__button">指名</div>
  </div>
  <div class="segment__item">
    <input type="radio" class="segment__input" name="navi-segment-a">
    <div class="segment__button">フリー</div>
  </div>
</div>

<div class="segment">
  <div class="segment__item">
    <input type="radio" class="segment__input" name="navi-segment-b" checked="">
    <div class="segment__button">未選択</div>
  </div>
  <div class="segment__item">
    <input type="radio" class="segment__input" name="navi-segment-b">
    <div class="segment__button">電話予約</div>
  </div>
  <div class="segment__item">
    <input type="radio" class="segment__input" name="navi-segment-b" disabled="">
    <div class="segment__button">disabled</div>
  </div>
  <div class="segment__item">
    <input type="radio" class="segment__input" name="navi-segment-b">
    <div class="segment__button">次回予約</div>
  </div>
  <div class="segment__item">
    <input type="radio" class="segment__input" name="navi-segment-b">
    <div class="segment__button">直接来店</div>
  </div>
</div>

<div class="segment c">
  <div class="segment__item">
    <input type="radio" class="segment__input" name="navi-segment-c" checked="">
    <div class="segment__button">指名</div>
  </div>
  <div class="segment__item">
    <input type="radio" class="segment__input" name="navi-segment-c">
    <div class="segment__button">フリー</div>
  </div>
</div>

<style>
  .segment.c .segment__button {
    width: 80px;
  }
</style>

<div class="segment d">
  <div class="segment__item d">
    <input type="radio" class="segment__input" name="navi-segment-d" checked="">
    <div class="segment__button">未選択</div>
  </div>
  <div class="segment__item">
    <input type="radio" class="segment__input" name="navi-segment-d">
    <div class="segment__button">電話予約</div>
  </div>
  <div class="segment__item">
    <input type="radio" class="segment__input" name="navi-segment-d" disabled="">
    <div class="segment__button">disabled</div>
  </div>
  <div class="segment__item">
    <input type="radio" class="segment__input" name="navi-segment-d">
    <div class="segment__button">次回予約</div>
  </div>
  <div class="segment__item">
    <input type="radio" class="segment__input" name="navi-segment-d">
    <div class="segment__button">直接来店</div>
  </div>
</div>

<style>
  .segment.d .segment__button {
    width: 120px;
  }
</style>

<script>
  common.setSegmentSwitch();
</script>

Color Select

HTML

                          <div class="color-select">
  <div class="color-select__item">
    <input type="radio" class="color-select__input" name="navi-color-a" checked=""
      id="color-select1">
    <label for="color-select1" class="color-select__button color-select__button--1">
      <i class="fa fa-check-circle"></i>
    </label>
  </div>
  <div class="color-select__item">
    <input type="radio" class="color-select__input" name="navi-color-a" id="color-select2">
    <label for="color-select2" class="color-select__button color-select__button--2">
      <i class="fa fa-check-circle"></i>
    </label>
  </div>
  <div class="color-select__item">
    <input type="radio" class="color-select__input" name="navi-color-a" id="color-select3">
    <label for="color-select3" class="color-select__button color-select__button--3">
      <i class="fa fa-check-circle"></i>
    </label>
  </div>
  <div class="color__item">
    <input type="radio" class="color-select__input" name="navi-color-a" id="color-select4" 4>
    <label for="color-select4" class="color-select__button color-select__button--4">
      <i class="fa fa-check-circle"></i>
    </label>
  </div>
  <div class="color-select__item">
    <input type="radio" class="color-select__input" name="navi-color-a" id="color-select5">
    <label for="color-select5" class="color-select__button color-select__button--5">
      <i class="fa fa-check-circle"></i>
    </label>
  </div>
  <div class="color-select__item">
    <input type="radio" class="color-select__input" name="navi-color-a" id="color-select6">
    <label for="color-select6" class="color-select__button color-select__button--6">
      <i class="fa fa-check-circle"></i>
    </label>
  </div>
  <div class="color-select__item">
    <input type="radio" class="color-select__input" name="navi-color-a" id="color-select7">
    <label for="color-select7" class="color-select__button color-select__button--7">
      <i class="fa fa-check-circle"></i>
    </label>
  </div>
  <div class="color-select__item">
    <input type="radio" class="color-select__input" name="navi-color-a" id="color-select8">
    <label for="color-select8" class="color-select__button color-select__button--8">
      <i class="fa fa-check-circle"></i>
    </label>
  </div>
  <div class="color-select__item">
    <input type="radio" class="color-select__input" name="navi-color-a" id="color-select9">
    <label for="color-select9" class="color-select__button color-select__button--9">
      <i class="fa fa-check-circle"></i>
    </label>
  </div>
  <div class="color-select__item">
    <input type="radio" class="color-select__input" name="navi-color-a" id="color-select10">
    <label for="color-select10" class="color-select__button color-select__button--10">
      <i class="fa fa-check-circle"></i>
    </label>
  </div>
</div>
<style>
  .color-select__button--1 {
    background: #D02B2B;
    color: white;
  }

  .color-select__button--2 {
    background: #46A2D6;
    color: white;
  }

  .color-select__button--3 {
    background: #FAD339;
    color: white;
  }

  .color-select__button--4 {
    background: #4A4A4A;
    color: white;
  }

  .color-select__button--5 {
    background: #D02C7B;
    color: white;
  }

  .color-select__button--6 {
    background: #2A9259;
    color: white;
  }

  .color-select__button--7 {
    background: #673E0D;
    color: white;
  }

  .color-select__button--8 {
    background: #0A5DA6;
    color: white;
  }

  .color-select__button--9 {
    background: #FFA567;
    color: white;
  }

  .color-select__button--10 {
    background: #8A54AA;
    color: white;
  }
</style>

Datepicker

有効期間

有効期間:disabled

有効期間:readonly

有効期間:readonly 初期値あり

有効期間:focusでも起動

optionButton: ""

有効期間 option指定

minDate,maxDate

有効期間 option指定format

format

HTML

                          <input type="number" value="" class="datepicker dp-1 input-item-sm d-inline-block" placeholder="yyyymmdd" />
<i class="calendar"></i>

<input type="number" value="" class="datepicker dp-1 input-item-sm d-inline-block" placeholder="yyyymmdd" disabled />
<i class="calendar"></i>

<input type="number" value="" class="datepicker dp-1 input-item-sm d-inline-block"
  placeholder="yyyymmdd" readonly />
<i class="calendar"></i>

<input type="number" value="20200224" class="datepicker dp-1 input-item-sm d-inline-block"
  placeholder="yyyymmdd" readonly />
<i class="calendar"></i>
<script>
  $(function () {
    common.setDatepicker(".datepicker.dp-1");
  })
</script>

<input type="text" value="" class="datepicker dp-focus input-item-sm d-inline-block"
  data-datepicker-focus-event="true" placeholder="HHmm" />
<i class="calendar"></i>
<script>
  common.setDatepicker("input.dp-focus", { optionButton: "" });
</script>

<input type="number" value="" class="datepicker dp-opt input-item-sm d-inline-block"
  placeholder="yyyymmdd" />
<i class="calendar"></i>
<script>
  $(function () {
    common.setDatepicker(".datepicker.dp-opt", {
      minDate: moment().add(-7, "days"), //7日前から
      maxDate: moment().add(7, "days") //7日後まで
    });
  })
</script>

<input type="text" value="" class="datepicker dp-opt2 input-item-sm d-inline-block"
  placeholder="YYYY/MM/DD" />
<i class="calendar"></i>
<script>
  $(function () {
    common.setDatepicker(".datepicker.dp-opt2", {
      format: "YYYY/MM/DD"
    });
  })
</script>

MonthPicker

年月(YYYYMM)

年月(YYYY/MM)

HTML

                          <input type="number" value="" class="monthpicker mp1 input-item-sm d-inline-block" placeholder="yyyymm" />
<input type="number" value="" class="monthpicker mp2 input-item-sm d-inline-block" placeholder="yyyy/mm" />
<script>
// デフォルトはyyyymm形式で、yyyy/mm形式の場合はformat指定してください
common.setMonthicker(".monthpicker.mp1");
common.setMonthicker(".monthpicker.mp2", { format: "YYYY/MM" });
</script>

Timepicker

オプションは下記

http://eonasdan.github.io/bootstrap-datetimepicker/Options/

予約時間

予約時間:disabled

予約時間:readonly

予約時間:readonly 初期値あり

予約時間:focusでも起動

※ 個別に設定したい場合はinputタグにdata-timepicker-focus-event="true"をつける
※ 一括で設定したい場合は、setTimepickerの前にcommon.timepickerFocusEvent = true;を実行する

予約時間:翌日

inputタグに「next_day」を追加

予約時間時間限定(1~5)

{ enabledHours: [1, 2, 3, 4, 5] }

予約時間時間限定&翌日&step

{ enabledHours: [20,21,22,23,24,25] ,stepping: 15}
inputタグに「next_day」を追加

予約時間分単位10 stepping

{ stepping: 10 }

連動して値を置き換える処理を入れる(beforeReplaceTime)

予約時間（連動処理+1h）

予約時間（連動処理+1h、翌日）

HTML

                          <label>
  <input type="text" value="" class="timepicker tp-nomal input-item-sm d-inline-block"
    placeholder="HHmm" />
  <i class="calendar"></i>
</label>

<label>
  <input type="text" value="" class="timepicker tp-nomal input-item-sm d-inline-block"
    placeholder="HHmm" disabled />
  <i class="calendar"></i>
</label>

<label>
  <input type="text" value="" class="timepicker tp-nomal input-item-sm d-inline-block"
    placeholder="HHmm" readonly />
  <i class="calendar"></i>
</label>
<label>
  <input type="text" value="15:00" class="timepicker tp-nomal input-item-sm d-inline-block"
    placeholder="HHmm" readonly />
  <i class="calendar"></i>
</label>

<label>
  <input type="text" value="27:00"
    class="timepicker tp-nomal next_day input-item-sm d-inline-block" placeholder="HHmm" />
  <i class="calendar"></i>
</label>
<script type="text/javascript">
  // timepicker
  $(function () {
    common.setTimepicker({}, ".timepicker.tp-nomal");
  });
</script>

<label>
  <input type="text" value="" class="timepicker timepicker-1 input-item-sm d-inline-block"
    placeholder="HHmm" />
  <i class="calendar"></i>
</label>
<script type="text/javascript">
  // timepicker
  $(function () {
    common.setTimepicker({ enabledHours: [1, 2, 3, 4, 5] }, ".timepicker-1");
  });
</script>

<label>
  <input type="text" value="" class="timepicker timepicker-2 input-item-sm d-inline-block"
    placeholder="HHmm" />
  <i class="calendar"></i>
</label>

<script type="text/javascript">
  // timepicker
  $(function () {
    common.setTimepicker({ stepping: 10 }, ".timepicker-2");
  });
</script>

<label>
  <input type="text" value="11:00" class="timepicker tp-multi-1 input-item-sm d-inline-block"
    placeholder="HHmm" />
  <i class="calendar"></i>
</label>
<label>
  <input type="text" value="" class="timepicker tp-multi-2 input-item-sm d-inline-block"
    placeholder="HHmm" />
  <i class="calendar"></i>
</label>
<script>
common.setTimepicker({}, "input.tp-multi-1");
common.setTimepicker({}, "input.tp-multi-2", {
  beforeReplaceTime: (timeHHMM) => {
    console.log("beforeReplaceTime", timeHHMM);
    const targetHHMM = $("input.tp-multi-1")[0].value.replace(":", "");
    let hour = targetHHMM.substr(0, 2) ? parseInt(targetHHMM.substr(0, 2)) : 0;
    let minute = targetHHMM.substr(2, 2) ? parseInt(targetHHMM.substr(2, 2)) : 0;
    minute = ('00' + minute).slice(-2);
    timeHHMM = (hour + 1) + "" + minute;
    return timeHHMM
  }
});
</script>

Timepicker48h

48時間の入力に対応させた独自実装のコンポーネント

予約時間

default

予約時間

disabled

予約時間

readonly

予約時間

default 初期値あり

予約時間

{ stepping: 5, enabledHours: [9, 10, 11, 13, 14, 15, 16, 17] }

予約時間

focus

※ 個別に設定したい場合はinputタグにdata-timepicker-focus-event="true"をつける
※ 一括で設定したい場合は、setTimepickerの前にcommon.timepickerFocusEvent = true;を実行する

予約時間

focus, readonly

予約時間

連動初期値 optionFunc{beforeReplaceTime(timeHHMM)}

予約時間

連動初期値 optionFunc{beforeReplaceTime(timeHHMM)} focus

HTML

                          <label>
  <input type="text" value="" class="timepicker tp48-option input-item-sm d-inline-block" placeholder="HHmm" />
  <i class="calendar"></i>
</label>
<script>
  common.setTimepicker48h({
    stepping: 5,
    enabledHours: [9, 10, 11, 13, 14, 15, 16, 17]
  }, ".tp48-option")
</script>

File Upload

ファイル単一選択

ファイルを選択して下さい

ファイル複数選択（サムネイル表示）

ファイルを選択して下さい

ファイル複数選択（リスト表示）

ファイルを選択して下さい

disabled

ファイルを選択して下さい

bs-custom-file-input

ファイル選択の拡張として、プラグインbs-custom-file-inputが利用出来ます。

これにより、日本語ファイルの表示が正しく表示されます。

その他の機能はリンク先を参照ください。

https://cccabinet.jpn.org/bootstrap4/javascript/forms/file-browser#bs-custom-file-input

https://www.npmjs.com/package/bs-custom-file-input

HTML

                          <div class="form-inline">
  <div class="custom-file mr-2">
    <input type="file" class="custom-file-input" id="customFile" />
    <label class="custom-file-label" for="customFile" data-browse="参照">ファイルを選択して下さい</label>
  </div>
  <button class="btn-primary">アップロード</button>
</div>

Nav with Tabs

幅広い業種の店舗管理を支援するクラウド型モバイルPOSレジ

「POS＋(ポスタス)」は、ポスレジ機能はもちろんのこと、店舗の経営改善を行うための様々なデータの利活用、分析が可能です。また、海外出店対応、数多くのシステムとの連携、免税対応など、多彩な機能を低価格でご提供しています。

飲食店向け「POS＋ food（ポスタスフード）」、理美容室向け「POS＋ beauty（ポスタスビューティ）」、小売店向け「POS＋ retail（ポスタスリテール）」の、それぞれの業界の特性に合わせたラインナップをご用意することで、幅広い業種の店舗管理をご支援しています。

HTML

                          <!-- タブ部分 -->
<ul id="myTab" class="nav tabs" role="tablist">
  <li class="tab-item">
    <a href="#tab-a" id="a-tab" class="nav-link active" role="tab" data-toggle="tab"
      aria-controls="a-tab" aria-selected="true">A</a>
  </li>
  <li class="tab-item">
    <a href="#tab-b" id="b-tab" class="nav-link" role="tab" data-toggle="tab" aria-controls="b-tab"
      aria-selected="false">B</a>
  </li>
  <li class="tab-item">
    <a href="#tab-c" id="c-tab" class="nav-link" role="tab" data-toggle="tab" aria-controls="c-tab"
      aria-selected="false">C</a>
  </li>
</ul>
<!-- パネル部分 -->
<div id="myTabContent" class="tab-content m-3">
  <div id="tab-a" class="tab-pane active" role="tabpanel" aria-labelledby="a-tab">
    テキストA
  </div>
  <div id="tab-b" class="tab-pane" role="tabpanel" aria-labelledby="b-tab">
    テキストB
  </div>
  <div id="tab-c" class="tab-pane" role="tabpanel" aria-labelledby="c-tab">飲食店向け「POS＋
    テキストC
  </div>
</div>

Step1 title

Step2 title

Step3 title

Step4 title

HTML

                          <div class="row bs-wizard">
  <div class=" bs-wizard-step complete">
    <div class="text-center bs-wizard-stepnum">Step1 title</div>
    <div class="progress">
      <div class="progress-bar"></div>
    </div>
    <a href="#" class="bs-wizard-dot"></a>
  </div>

  <div class=" bs-wizard-step complete">
    <!-- complete -->
    <div class="text-center bs-wizard-stepnum">Step2 title</div>
    <div class="progress">
      <div class="progress-bar"></div>
    </div>
    <a href="#" class="bs-wizard-dot"></a>
  </div>

  <div class=" bs-wizard-step active">
    <!-- complete -->
    <div class="text-center bs-wizard-stepnum">Step3 title</div>
    <div class="progress">
      <div class="progress-bar"></div>
    </div>
    <a href="#" class="bs-wizard-dot"></a>
  </div>

  <div class=" bs-wizard-step disabled">
    <!-- disabled -->
    <div class="text-center bs-wizard-stepnum">Step4 title</div>
    <div class="progress">
      <div class="progress-bar"></div>
    </div>
    <a href="#" class="bs-wizard-dot"></a>
  </div>
</div>

Tables

Normal

Header1	Header2	Header3
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Small

Header1	Header2	Header3
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Extra Small

Header1	Header2	Header3
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

HTML

                          <table id="table" class="table">
<thead class="thead-light">
  <tr>
    <th>Header1</th>
    <th>Header2</th>
    <th>Header3</th>
    <th class="text-center">Header4</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td class="text-center">
      <a href=""><i class="fas fa-cog"></i></a>
    </td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td class="text-center">
      <a href=""><i class="fas fa-cog"></i></a>
    </td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td class="text-center">
      <a href=""><i class="fas fa-cog"></i></a>
    </td>
  </tr>
</tbody>
</table>

複数列ヘッダー

Header1	Header2	Header3		Header4
Header1	Header2	Header3-1	Header3-2	Header4-1	Header4-2
Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell

HTML

                          <table id="table" class="table multi-layer ">
<thead class="thead-light">
  <tr>
    <th rowspan="2">Header1</th>
    <th rowspan="2">Header2</th>
    <th colspan="2">Header3</th>
    <th colspan="2">Header4</th>
  </tr>
  <tr>
    <th>Header3-1</th>
    <th>Header3-2</th>
    <th>Header4-1</th>
    <th>Header4-2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</tbody>
</table>

Datatable

Header1	Header2	Header3
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

HTML

                            <table id="datatable-sample1" class="table">
<thead class="thead-light">
  <tr>
    <th>Header1</th>
    <th>Header2</th>
    <th>Header3</th>
    <th class="text-center no-sorting">Header4</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td class="text-center">
      <a href="#"><i class="fas fa-cog"></i></a>
    </td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td class="text-center">
      <a href="#"><i class="fas fa-cog"></i></a>
    </td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td class="text-center">
      <a href="#"><i class="fas fa-cog"></i></a>
    </td>
  </tr>
</tbody>
</table>

Datatableのオプション指定

Normal

                          
$(document).ready(function () {
    common.table = $("#datatable-sample1").dataTable({
        // 件数切替機能 無効
        lengthChange: false,
        // 検索機能 無効
        searching: false,
        // ソート機能 無効
        ordering: true,
        // ソート機能 初期状態
        // 例：order: [ [ 1, "asc" ] ]
        // 情報表示 無効
        info: false,
        // ページング機能 無効
        paging: false,
        //縦方向のスクロール 有効
        scrollY: "20vh",
        //横方向のスクロール　無効
        scrollX: false,
        //特定のカラムのソート制御
        columnDefs: [{ targets: "no-sorting",orderable: false }],
        //件数が少ない時に縦サイズを省略する
        scrollCollapse: true
    });
});

Datatable複数列ヘッダー

Header1	Header2	Header3
Header1	Header2	Header3-1	Header3-2
Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell

HTML

                          <table id="datatable-sample2" class="table multi-layer ">
<thead class="thead-light">
  <tr>
    <th rowspan="2">Header1</th>
    <th rowspan="2">Header2</th>
    <th colspan="2">Header3</th>
  </tr>
  <tr>
    <th>Header3-1</th>
    <th>Header3-2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</tbody>
</table>

Datatableデータエクスポート

Header1	Header2	Header3
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Datatableのオプション指定

データエクスポート

buttonsに指定する場合は、別途js/cssファイルの読み込みが必要です。

詳細はこちら

                            
$(document).ready(function () {
  common.table = $("#datatable-sample3").dataTable({
    // 件数切替機能 無効
    lengthChange: false,
    // 検索機能 無効
    searching: false,
    // ソート機能 無効
    ordering: true,
    // ソート機能 初期状態
    // 例：order: [ [ 1, "asc" ] ]
    // 情報表示 無効
    info: false,
    // ページング機能 無効
    paging: false,
    //縦方向のスクロール 有効
    scrollY: "20vh",
    //横方向のスクロール　無効
    scrollX: false,
    //特定のカラムのソート制御
    columnDefs: [{ targets: "no-sorting",orderable: false }],
    //件数が少ない時に縦サイズを省略する
    scrollCollapse: true,
    //ファイル出力
    dom: 'Bfrtip',
    buttons: [
      'copyHtml5',
      'excelHtml5',
      'csvHtml5',
      'pdfHtml5'
    ]
  });
});

Datatable fixedcolumns

Header1	Header2	Header3	Header4	Header5	Header6	Header7	Header8	Header9	Header10	Header11	Header12
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Datatableのオプション指定・js

fixedcolumns

                              
$(document).ready(function () {
  common.table = $("#datatable-sample4").dataTable({
    // 件数切替機能 無効
    lengthChange: false,
    // 検索機能 無効
    searching: false,
    // ソート機能 無効
    ordering: true,
    // ソート機能 初期状態
    // 例：order: [ [ 1, "asc" ] ]
    // 情報表示 無効
    info: false,
    // ページング機能 無効
    paging: false,
    //横方向のスクロール 有効
    scrollX: true,
    //縦方向のスクロール 有効
    scrollY: "20vh",
    //列固定：2列
    fixedColumns: {
      leftColumns: 2,
    },
    //件数が少ない時に縦サイズを省略する
    scrollCollapse: true,
    //特定のカラムの制御
    columnDefs: [{ targets: [0, 1], width: 100 },
    { targets: [2, 3, 4], width: 80 }]
  });
});
//hover対応
$(document).on({
  mouseenter: function () {
    trIndex = $(this).index() + 1;
    $("table.example-datatable-4").each(function (index) {
      $(this).find("tr:eq(" + trIndex + ")").each(function (index) {
        $(this).find("td").addClass("hover");
      });
    });
  },
  mouseleave: function () {
    trIndex = $(this).index() + 1;
    $("table.example-datatable-4").each(function (index) {
      $(this).find("tr:eq(" + trIndex + ")").each(function (index) {
        $(this).find("td").removeClass("hover");
      });
    });
  }
}, ".example-datatable-4 tr");
$(window).on("resize", function () {
  common.table.fnAdjustColumnSizing();
});

Datatable rowreorder

Seq.	Name	Age
1	Ben Affleck	47
2	Christian Bale	45
3	Adam West	88
4	Michael Keaton	68

Datatableのオプション指定

rowreorder

reorderに指定する場合は、別途jsファイルの読み込みが必要です。

詳細はこちら

                                                
$(document).ready(function () {
  common.table = $("#datatable-sample5").dataTable({
    // 件数切替機能 無効
    lengthChange: false,
    // 検索機能 無効
    searching: false,
    // ソート機能 無効
    ordering: true,
    // ソート機能 初期状態
    // 例：order: [ [ 1, "asc" ] ]
    // 情報表示 無効
    info: false,
    // ページング機能 無効
    paging: false,
    //縦方向のスクロール 有効
    scrollY: "20vh",
    //横方向のスクロール　無効
    scrollX: false,
    //件数が少ない時に縦サイズを省略する
    scrollCollapse: true,
    //rowreorder
    rowReorder: {
      selector:'td:nth-child(4)'
    },
    //特定のカラムのソート制御
    columnDefs: [{ targets: "no-sorting",orderable: false }],
  });
});

Datatable pagenation

Seq.	Name	Age
1	Ben Affleck	47
2	Christian Bale	45
3	Adam West	88
4	Michael Keaton	68
5	Tsukino Usagi	14
6	Mizuno Ami	14
7	Hino Rei	14
8	Aino Minako	14
9	AAA	45
10	BBB	21
11	CCC	25
12	DDD	36

Datatableのオプション指定

pagenation

                          
  $(document).ready(function () {
    common.table = $("#datatable-sample7").dataTable({
      // 件数切替機能 無効
      lengthChange: false,
      // 検索機能 無効
      searching: false,
      // ソート機能 無効
      ordering: true,
      // ソート機能 初期状態
      // 例：order: [ [ 1, "asc" ] ]
      // 情報表示 無効
      info: false,
      // ページング機能 有効
      paging: true,
      // 初期表示件数
      pageLength: 4,
      //縦方向のスクロール 有効
      scrollY: "25vh",
      //横方向のスクロール　無効
      scrollX: false,
      //件数が少ない時に縦サイズを省略する
      scrollCollapse: true,
      //ページングタイプ
      pagingType: "full_numbers",
      //ページ送りをアイコンに設定
      oLanguage: {
        oPaginate: { 
          "sFirst": "<i class='fas fa-angle-double-left'></i>",
          "sLast": "<i class='fas fa-angle-double-right'></i>",
          "sNext": "<i class='fa fa-angle-right'></i>",
          "sPrevious": "<i class='fa fa-angle-left'></i>"
        }
      }
    });
  });

Datatable empty

Header1	Header2	Header3

Datatableのオプション指定

empty

                              
$(document).ready(function () {
  common.table = $("#datatable-sample6").dataTable({
    // 件数切替機能 無効
    lengthChange: false,
    // 検索機能 無効
    searching: false,
    // ソート機能 無効
    ordering: true,
    // ソート機能 初期状態
    // 例：order: [ [ 1, "asc" ] ]
    // 情報表示 無効
    info: false,
    // ページング機能 無効
    paging: false,
    //縦方向のスクロール 有効
    scrollY: "20vh",
    //横方向のスクロール　無効
    scrollX: false,
    //特定のカラムのソート制御
    columnDefs: [{ targets: "no-sorting",orderable: false }],
    //件数が少ない時に縦サイズを省略する
    scrollCollapse: true,
    //0件表示の時の文言をカスタムする
    "language": {
      "emptyTable": "何もないよ"
    }
  });
});

その他Datatable操作についてはこちら：Datatable reference

Cards

Normal

タイトル

コンテンツ

HTML

                          <div class="card">
  <div class="card-header">タイトル</div>
  <div class="card-body">
    コンテンツ
  </div>
</div>

List

タイトル

リストの項目
リストの項目

HTML

                          <div class="card">
  <div class="card-header">タイトル</div>
  <div class="card-body">
    コンテンツ
  </div>
</div>

チェックボックスグループ

2列表記

001:チェック項目 002:チェック項目 003:チェック項目 004:チェック項目 005:チェック項目 006:チェック項目

HTML

                          <div class="form-area-wrap">
<div class="form-area">
  <label class="checkbox" for="checkbox5">
    <input type="checkbox" value="" id="checkbox5" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">001:チェック項目</span>
  </label>
  <label class="checkbox" for="checkbox6">
    <input type="checkbox" value="" id="checkbox6" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">002:チェック項目</span>
  </label>
  <label class="checkbox" for="checkbox7">
    <input type="checkbox" value="" id="checkbox7" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">003:チェック項目</span>
  </label>
  <label class="checkbox" for="checkbox8">
    <input type="checkbox" value="" id="checkbox8" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">004:チェック項目</span>
  </label>
  <label class="checkbox" for="checkbox9">
    <input type="checkbox" value="" id="checkbox9" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">005:チェック項目</span>
  </label>
  <label class="checkbox" for="checkbox10">
    <input type="checkbox" value="" id="checkbox10" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">006:チェック項目</span>
  </label>
</div>
</div>

1列表記

001:チェック項目 002:チェック項目 003:チェック項目

HTML

                          <div class="form-area-wrap w1">
<div class="form-area">
  <label class="checkbox" for="checkbox5">
    <input type="checkbox" value="" id="checkbox5" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">001:チェック項目</span>
  </label>
  <label class="checkbox" for="checkbox6">
    <input type="checkbox" value="" id="checkbox6" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">002:チェック項目</span>
  </label>
  <label class="checkbox" for="checkbox7">
    <input type="checkbox" value="" id="checkbox7" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">003:チェック項目</span>
  </label>
</div>
</div>

チェックボックス、セレクトボックスグループ

項目1

項目2

項目3

項目4

項目5

001:チェック項目 002:チェック項目 003:チェック項目 004:チェック項目 005:チェック項目 006:チェック項目

HTML

                          <div class="form-area-wrap">
<div class="form-area-control">
  <div class="control-item">
    <label class="col-form-label">項目1</label>
    <select class="input-item mr-2">
      <option value="" selected="">選択してください</option>
      <option value="000">選択1</option>
      <option value="000">選択2</option>
    </select>
  </div>
  <div class="control-item">
    <label class="col-form-label">項目2</label>
    <select class="input-item mr-2">
      <option value="" selected="">選択してください</option>
      <option value="000">選択2</option>
      <option value="000">選択2</option>
    </select>
  </div>
  <div class="control-item">
    <label class="col-form-label">項目3</label>
    <select class="input-item mr-2">
      <option value="" selected="">選択してください</option>
      <option value="000">選択3</option>
      <option value="000">選択3</option>
    </select>
  </div>
  <div class="control-item">
    <label class="col-form-label">項目4</label>
    <select class="input-item mr-2">
      <option value="" selected="">選択してください</option>
      <option value="000">選択4</option>
      <option value="000">選択4</option>
    </select>
  </div>
  <div class="control-item">
    <label class="col-form-label">項目5</label>
    <select class="input-item mr-2">
      <option value="" selected="">選択してください</option>
      <option value="000">選択5</option>
      <option value="000">選択5</option>
    </select>
  </div>
</div>
<div class="form-area">
  <label class="checkbox" for="checkbox_g1">
    <input type="checkbox" value="" id="checkbox_g1" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">001:チェック項目</span>
  </label>
  <label class="checkbox" for="checkbox_g2">
    <input type="checkbox" value="" id="checkbox_g2" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">002:チェック項目</span>
  </label>
  <label class="checkbox" for="checkbox_g3">
    <input type="checkbox" value="" id="checkbox_g3" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">003:チェック項目</span>
  </label>
  <label class="checkbox" for="checkbox_g4">
    <input type="checkbox" value="" id="checkbox_g4" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">004:チェック項目</span>
  </label>
  <label class="checkbox" for="checkbox_g5">
    <input type="checkbox" value="" id="checkbox_g5" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">005:チェック項目</span>
  </label>
  <label class="checkbox" for="checkbox">
    <input type="checkbox" value="" id="checkbox" data-toggle="checkbox">
    <span class="icons">
      <span class="icon-unchecked"></span>
      <span class="icon-checked"></span>
    </span>
    <span class="label">006:チェック項目</span>
  </label>
</div>
</div>

top

right

left

bottom

HTML

                          <span class="col-sm-3">top</span><span class="help-tooltip" data-toggle="tooltip"
data-placement="top" title="" data-original-title="Tooltip message"></span>

<span class="col-sm-3">right</span><span class="help-tooltip" data-toggle="tooltip"
data-placement="right" title="" data-original-title="Tooltip message"></span>

<span class="col-sm-3">left</span><span class="help-tooltip" data-toggle="tooltip"
data-placement="left" title="" data-original-title="Tooltip message"></span>

<span class="col-sm-3">bottom</span><span class="help-tooltip" data-toggle="tooltip"
data-placement="bottom" title="" data-original-title="Tooltip message"></span>

Badge

NEW NEW NEW NEW NEW NEW NEW

HTML

                          <span class="badge-pill-primary">NEW</span>
<span class="badge-pill-secondary">NEW</span>
<span class="badge-pill-success">NEW</span>
<span class="badge-pill-danger">NEW</span>
<span class="badge-pill-warning">NEW</span>
<span class="badge-pill-light">NEW</span>
<span class="badge-pill-dark">NEW</span>

Modals

HTML

                          <button class="btn-secondary-extend" data-toggle="modal" data-target="#myModal-default">
  default
</button>
<button class="btn-secondary-extend" data-toggle="modal" data-target="#myModal-small">
  small
</button>
<button class="btn-secondary-extend" data-toggle="modal" data-target="#myModal-large">
  large
</button>

<!-- モーダルの設定 -->
<!--default初め-->
<div class="modal" id="myModal-default" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title" id="exampleModalLabel">
          モーダルのタイトル
        </div>
        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        モーダル本文
      </div>
      <div class="modal-footer">
        <button class="btn-negative" data-dismiss="modal" aria-hidden="true">
          キャンセル
        </button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--default終わり-->

<!--sm初め-->
<div class="modal" id="myModal-small" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">
          モーダルのタイトル
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        モーダル本文
      </div>
      <div class="modal-footer justify-content-center">
        <button class=" btn-negative" data-dismiss="modal" aria-hidden="true">
          キャンセル
        </button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--sm終わり-->
<!--lg初め-->
<div class="modal" id="myModal-large" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">
          モーダルのタイトル
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        モーダル本文
      </div>
      <div class="modal-footer justify-content-center">
        <button class=" btn-negative" data-dismiss="modal" aria-hidden="true">
          キャンセル
        </button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--lg終わり-->

Collapse

一括選択

example

example text

HTML

                          <div class="sub-buttons mb-2">
  <a href="#example-1" role="button" class="expand-button" data-toggle="collapse"
    aria-controls="example-1" aria-expanded="false">一括選択</a>
</div>
<div class="collapse" id="example-1">
  <div class="card">
    <div class="card-header">example</div>
    <div class="card-body">
      example text
    </div>
  </div>
</div>

Alerts

Default alert

Success alert

Info alert

Warning alert

Danger alert

HTML

                          <div class="sub-title-lv1">Default alert</div>
<div class="alert-success" role="alert">Success alert</div>
<div class="alert-info" role="alert">Info alert</div>
<div class="alert-warning" role="alert">Warning alert</div>
<div class="alert-danger" role="alert">Danger alert</div>

Dismissible alert

注意!　このアラートはあなたの注意が必要です。

HTML

                          <div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>注意!</strong>　このアラートはあなたの注意が必要です。
  <button type="button" class="close" data-dismiss="alert" aria-label="閉じる">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Breadcrumbs

HTML

                          <ul class="breadcrumbs ">
  <li><a href="#" class="">親ページ</a></li>
  <li><a href="#" class=""><span>子ページ</span></a></li>
</ul>

Alerts

Confirm

HTML

                          <button id="btn01" class="btn-info">info</button>
<script>
  $("#btn01").click(function () {
    $.swal("基本のアラート");
  });
</script>
<button id="btn02" class="btn-danger">error</button>
<script>
  $("#btn02").click(function () {
    $.swal_error("エラーのアラート");
  });
</script>
<button id="btn03" class="btn-success">success</button>
<script>
  $("#btn03").click(function () {
    $.swal_success("成功のアラート");
  });
</script>
<button id="btn04" class="btn-warning">warning</button>
<script>
  $("#btn04").click(function () {
    $.swal_warning("警告のアラート");
  });
</script>

<button id="btn05" class="btn-info">info</button>
<script>
  $("#btn05").click(function () {
    $.swal_confirm("確認のアラート")
      .then((ok) => {
        if (ok) {
          console.log("okの処理");
        } else {
          console.log("ngの処理");
        }
      });
  });
</script>

POS+ LOGO

基本形

ダウンロード

POS+ SERVICE LOGO

POS+food

POS+retail

POS+beauty

POS+lite

POS+connect

POS+pay

POS+timerecorder

POS+QSC

POS+engagement

FAVICON

各種サービス

管理画面

GRID

2 カラムレイアウト

3 カラムレイアウト

COLOR

TYPOGRAPHY

Header 1

Header 2

COMPONENTS

Alignment

Text Color

テキストカラー適用ルール

Button

ボタン適用ルール

Form

連動して値を置き換える処理を入れる(beforeReplaceTime)

Nav with Tabs

Step navigation

Tables

Cards

Tooltip

Badge

Modals

Collapse

Alerts

Breadcrumbs

Alerts

Alerts

Confirm