ボーダー

ボーダーを使って要素のボーダーと角丸を素早く適用します。画像、ボタン、その他の要素に最適です。

Boder

Borders を使って、要素の線を追加・削除します。すべての境界線を一回の指定で適用できます。

Additive

vue
<template>
 <b-div
  border
  border-color="primary"
 />
 <b-div
  border="top"
  border-color="primary"
 />
 <b-div
  border="end"
  border-color="primary"
 />
 <b-div
  border="bottom"
  border-color="primary"
 />
 <b-div
  border="start"
  border-color="primary"
 />
</template>

<style lang="scss" scoped>
div {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: #f5f5f5;
}
</style>

Subtractive

vue
<template>
 <b-div
  border-subtractive
  border-color="primary"
 />
 <b-div
  border-subtractive="top"
  border-color="primary"
 />
 <b-div
  border-subtractive="end"
  border-color="primary"
 />
 <b-div
  border-subtractive="bottom"
  border-color="primary"
 />
 <b-div
  border-subtractive="start"
  border-color="primary"
 />
</template>

<style lang="scss" scoped>
div {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: #f5f5f5;
  border-style: solid;
}
</style>

Color

ビルドインされたテーマカラーを Border 色に指定できます。

vue
<template>
 <b-div
  border
  border-color="primary"
 />
 <b-div
  border
  border-color="primary-subtle"
 />
 <b-div
  border
  border-color="secondary"
 />
 <b-div
  border
  border-color="secondary-subtle"
 />
 <b-div
  border
  border-color="success"
 />
 <b-div
  border
  border-color="success-subtle"
 />
 <b-div
  border
  border-color="danger"
 />
 <b-div
  border
  border-color="danger-subtle"
 />
 <b-div
  border
  border-color="warning"
 />
 <b-div
  border
  border-color="warning-subtle"
 />
 <b-div
  border
  border-color="info"
 />
 <b-div
  border
  border-color="info-subtle"
 />
 <b-div
  border
  border-color="light"
 />
 <b-div
  border
  border-color="light-subtle"
 />
 <b-div
  border
  border-color="dark"
 />
 <b-div
  border
  border-color="dark-subtle"
 />
 <b-div
  border
  border-color="black"
 />
 <b-div
  border
  border-color="white"
 />
</template>

<style lang="scss" scoped>
div {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: #f5f5f5;
}
</style>

Width

vue
<template>
 <b-div
  border
  border-width="1"
 />
 <b-div
  border
  border-width="2"
 />
 <b-div
  border
  border-width="3"
 />
 <b-div
  border
  border-width="4"
 />
 <b-div
  border
  border-width="5"
 />
</template>

<style lang="scss" scoped>
div {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: #f5f5f5;
}
</style>

Radius

要素にクラスを追加して、簡単に角を丸めることができます。

vue
<template>
 <b-div
  border
  rounded
 />
 <b-div
  border
  rounded="top"
 />
 <b-div
  border
  rounded="end"
 />
 <b-div
  border
  rounded="bottom"
 />
 <b-div
  border
  rounded="start"
 />
 <b-div
  border
  rounded="circle"
 />
 <b-div
  border
  rounded="pill"
 />
</template>

<style lang="scss" scoped>
div {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: #f5f5f5;
}

.rounded-pill {
  width: 7rem;
}
</style>

Sizes

角丸を大きくしたり小さくしたりするには、スケーリングクラスを使用します。サイズは0から5まであり、ユーティリティAPIを変更することで設定することができます。

vue
<template>
 <b-div
  border
  :rounded-size="0"
 />
 <b-div
  border
  :rounded-size="1"
 />
 <b-div
  border
  :rounded-size="2"
 />
 <b-div
  border
  :rounded-size="3"
 />
</template>

<style lang="scss" scoped>
div {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: #f5f5f5;
}
</style>

Extend

Extend color

blue
blue
100
blue
200
blue
300
blue
400
blue
500
blue
600
blue
700
blue
800
blue
900
indigo
indigo
100
indigo
200
indigo
300
indigo
400
indigo
500
indigo
600
indigo
700
indigo
800
indigo
900
purple
purple
100
purple
200
purple
300
purple
400
purple
500
purple
600
purple
700
purple
800
purple
900
pink
pink
100
pink
200
pink
300
pink
400
pink
500
pink
600
pink
700
pink
800
pink
900
red
red
100
red
200
red
300
red
400
red
500
red
600
red
700
red
800
red
900
orange
orange
100
orange
200
orange
300
orange
400
orange
500
orange
600
orange
700
orange
800
orange
900
yellow
yellow
100
yellow
200
yellow
300
yellow
400
yellow
500
yellow
600
yellow
700
yellow
800
yellow
900
green
green
100
green
200
green
300
green
400
green
500
green
600
green
700
green
800
green
900
teal
teal
100
teal
200
teal
300
teal
400
teal
500
teal
600
teal
700
teal
800
teal
900
cyan
cyan
100
cyan
200
cyan
300
cyan
400
cyan
500
cyan
600
cyan
700
cyan
800
cyan
900

See Also