問題を報告するこのページを編集

設定

BootstrapVueは、コンポーネントのデフォルト値などをカスタマイズするためのいくつかのオプションを提供します。

デフォルトの設定

BootstrapVueは、デフォルトのBootstrap v4.x構成用に事前設定されています。ブレークポイントは、xs、sm、md、lg、およびxlの標準ブレークポイント名であると想定しています。また、さまざまなBootstrapVueコンポーネントには、デフォルトのバリアントとテキストコンテンツを持つpropsがあります。

BootstrapVueには、デフォルト設定を変更するためのいくつかのメソッドが用意されています。

BootstrapVueを<script>タグ経由で使用する場合、デフォルトを変更することはできないことに注意してください。

デフォルト設定

デフォルトのブレークポイント名は、breakpointsプロパティに格納され、その他すべての共有コンポーネント構成（formControlsなど）は以下にリストされています。

コンポーネント固有のデフォルトは、PascalCaseの名前でキーが付けられ、propsはcamelCaseプロパティとして定義されます。

{
  // Breakpoint configuration
  "breakpoints": ["xs", "sm", "md", "lg", "xl"],

  // Shared component configuration
  "formControls": {
    "disabled": undefined,
    "required": false,
    "form": undefined,
    "autofocus": false,
    "plain": false,
    "size": undefined
  },
  "formOptionControls": {
    "options": [],
    "valueField": "value",
    "textField": "text",
    "htmlField": "html",
    "disabledField": "disabled"
  },
  "formRadioCheckGroups": {
    "validated": false,
    "ariaInvalid": false,
    "stacked": false,
    "buttons": false,
    "buttonVariant": undefined,
    "plain": false
  },
  "formRadioCheckControls": {
    "value": undefined,
    "checked": undefined,
    "inline": false,
    "button": false,
    "buttonVariant": undefined,
    "ariaLabel": undefined,
    "ariaLabelledby": undefined,
    "plain": false
  },
  "formState": {
    "state": null
  },
  "formTextControls": {
    "value": "",
    "ariaInvalid": false,
    "readonly": false,
    "plaintext": false,
    "autocomplete": undefined,
    "placeholder": undefined,
    "formatter": undefined,
    "lazyFormatter": false,
    "trim": false,
    "number": false,
    "lazy": false,
    "debounce": 0
  },

  // Component configuration
  "BAlert": {
    "variant": "info"
    // ...
  }
  // ...
}

新しい設定値の設定

Vue.use(BootstrapVue)を使用する場合、オプションで、デフォルト値を置き換える新しい値を指定する構成オブジェクトを渡すことができます。たとえば、新しいブレークポイント名（<b-col>や<b-form-group>などのコンポーネントに適切なプロパティを生成します）を定義したい場合、新しいブレークポイントが['aa', 'bb', 'cc', 'dd']であるとすると、<b-col>はsm、md、lg、xlのpropsの代わりにbb、cc、およびddのpropsを持つようになります（<b-form-group>のlabel-cols-{breakpoint}およびlabel-align-{breakpoint}propsも同様です）。

import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue, {
  breakpoints: [`xs`, 'sm', 'md', 'lg', 'xl', 'xxl']
})

または、<b-button>と<b-alert>のデフォルトのバリアントを変更する場合。

import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue, {
  BAlert: { variant: 'danger' },
  BButton: { variant: 'primary' }
})

Vue.useへの構成オプションとして提供される値は、デフォルト値とマージされます。

注: カスタムブレークポイントを定義する場合は、名前を短く（2〜3文字）してください。少なくとも2つのブレークポイント名を定義する必要があります。ブレークポイント名は、カスタムBootstrap SCSSで定義されているブレークポイント名と一致している必要があります。ブレークポイント名は、さまざまなコンポーネントで使用される非ブレークポイントのprops名と競合してはなりません（つまり、to、colなどを避けてください）。

個々のコンポーネントグループプラグインのインポートによる設定

個々のコンポーネントプラグインをインポートするときに、（上記と同じ構成構造を使用して）構成を指定することもできます。構成は、インポートする最初のコンポーネントにのみ提供する必要がありますが、後続の各構成は、以前に提供された構成とマージされます。

ブレークポイント名は、コンポーネント固有のブレークポイントpropsを生成するために必要なため、コンポーネントを使用する前に定義する必要があることに注意してください。ブレークポイント固有のpropsを持つコンポーネントが使用されると、その後のブレークポイントへの変更は反映されません。

例1（最も推奨されない方法）

import { LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue'

// Supply configs via each plugin as it is `Vue.use()`'d
Vue.use(LayoutPlugin, { breakpoints: ['xs', 'sm', 'lg', 'xl', 'xxl'] })
Vue.use(AlertPlugin, { BAlert: { variant: 'danger' } })
Vue.use(ButtonPlugin, { BButton: { variant: 'primary' } })

例2

import { LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue'

// Supply complete config to first `Vue.use()`'d plugin
Vue.use(LayoutPlugin, {
  breakpoints: ['xs', 'sm', 'lg', 'xl', 'xxl'],
  BAlert: { variant: 'danger' },
  BButton: { variant: 'primary' }
})
Vue.use(AlertPlugin)
Vue.use(ButtonPlugin)

例3（最も推奨される方法）

import { BVConfigPlugin, LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue'

// Supply complete config to the BVConfigPlugin helper plugin
Vue.use(BVConfigPlugin, {
  breakpoints: ['xs', 'sm', 'lg', 'xl', 'xxl'],
  BAlert: { variant: 'danger' },
  BButton: { variant: 'primary' }
})

// Then use component plugins
Vue.use(LayoutPlugin)
Vue.use(AlertPlugin)
Vue.use(ButtonPlugin)

個々のコンポーネントをインポートする場合の例4（推奨される方法）

import { BVConfigPlugin, BAlert, BButton, BRow, BCol } from 'bootstrap-vue'

// Supply complete config to the BVConfig helper plugin
Vue.use(BVConfigPlugin, {
  breakpoints: ['xs', 'sm', 'lg', 'xl', 'xxl'],
  BAlert: { variant: 'danger' },
  BButton: { variant: 'primary' }
})

// Then install components globally
Vue.component('BAlert', BAlert)
Vue.component('BButton', BButton)
Vue.component('BRow', BRow)
Vue.component('BCol', BCol)

// Or register components as local to your custom component
export default {
  name: 'MyComponent',
  components: {
    BAlert,
    BButton,
    BRow,
    BCol
  }
  // ...
}

注意点: Vueはプラグインを一度だけインストールします。別のコンポーネントプラグインによってすでにインポートされているプラグインをインポートすると、コンポーネントプラグインに渡された構成はマージされません。上記の例3および例4に示すように、BVConfigPluginヘルパープラグインを使用して完全な構成を設定するのが最善です。BVConfigPluginプラグインは、アプリのメインエントリポイントで、コンポーネントプラグインまたはVue.use()またはVue.component()または個々のコンポーネントの前に使用する必要があります。

Nuxt.jsモジュールを介した設定

構成オブジェクトをBootstrapVue Nuxt.jsモジュールに渡す方法については、はじめにのドキュメントを参照してください。

コンソール警告の無効化

BootstrapVueは、非推奨のpropsを使用しようとしたり、特定のpropsに無効な値を渡したりすると、（console.warn()を介して）警告します。これらの警告は、アプリケーションが正しいpropsと値を使用していることを確認するために提供されています。

BootstrapVueは、本番モード（NODE_ENV=production）で警告を自動的に無効にします。他のシナリオで警告を無効にしたい場合は（推奨されません）、次のプロセス環境変数を設定することで無効にできます。

process.env.BOOTSTRAP_VUE_NO_WARN = true

警告を無視すると、非推奨のpropsが削除されたBootstrapVueの将来のリリースを使用する際に、プロジェクトが失敗/破損する可能性があります。

プロジェクトを本番環境に移行する前に、警告を修正する必要があります！