@codelic/console

Console について

VSCodeのプラグインについて

これらのプラグインをインストールしてください：

• johnsoncodehk.volar
• esbenp.prettier-vscode
• syler.sass-indented

※注意:

1. 必ずVSCode の拡張機能: Volar をインストールし、有効にしてください。
2. VSCode の拡張機能: Vetur がインストールされている場合、必ず Vetur を無効にしてください。

環境構築

これらの components には Google Font の material icons を使用するものがあります。使用の際は head タグに以下の link タグを配置してください

<link
  href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone"
  rel="stylesheet"
/>

配色について

この components では以下のカスタムプロパティで共通のメインカラーなどを設定しているものがあります。 プロジェクトごとにメインカラーなどが決定した際は以下の記載に合わせた設定を行ってください:

• --q-primary : メインカラー
• --q-secondary : アクセントカラー（タブのバッジなどの色）
• --q-positive : その他必要な配色があった際
• --q-negative : キャンセルボタンなど否定的な場合

ex) 以下のように設定してください(sass でも設定可)

<style>
  :root {
    --q-primary: blue;
    --q-secondary: green;
  }
</style>