ポジション

素早くポジションを設定します。

Position values

レスポンシブではありませんが、Position クラスを利用できます。

Arrange elements

edge positioning attribute を使用して、要素を簡単に配置できます。 形式は position="{position}"です。

property は次のいずれかです。

  • top - for the vertical top position
  • start - for the horizontal left position (in LTR)
  • bottom - for the vertical bottom position
  • end - for the horizontal right position (in LTR)

position は次のいずれかです。

  • 0 - for 0 edge position
  • 50 - for 50% edge position
  • 100 - for 100% edge position
vue
<template>
 <b-div position="relative">
  <b-div
   position="absolute"
   :top="0"
   :start="0"
  />
  <b-div
   position="absolute"
   :top="0"
   :end="0"
  />
  <b-div
   position="absolute"
   :top="50"
   :start="50"
  />
  <b-div
   position="absolute"
   :bottom="50"
   :end="50"
  />
  <b-div
   position="absolute"
   :bottom="0"
   :start="0"
  />
  <b-div
   position="absolute"
   :bottom="0"
   :end="0"
  />
 </b-div>
</template>

Center elements

transform utility attribute translate="middle"を使用して要素を中央に配置することもできます。

このクラスは、translateX(-50%) および translateY(-50%) を要素に適用します。edge positioning utilities と組み合わせて、要素を絶対的に中央に配置できます。

vue
<template>
 <b-div position="relative">
  <b-div
   position="absolute"
   :top="0"
   :start="0"
   translate="middle"
  />
  <b-div
   position="absolute"
   :top="0"
   :start="50"
   translate="middle"
  />
  <b-div
   position="absolute"
   :top="0"
   :start="100"
   translate="middle"
  />
  <b-div
   position="absolute"
   :top="50"
   :start="0"
   translate="middle"
  />
  <b-div
   position="absolute"
   :top="50"
   :start="50"
   translate="middle"
  />
  <b-div
   position="absolute"
   :top="50"
   :start="100"
   translate="middle"
  />
  <b-div
   position="absolute"
   :top="100"
   :start="0"
   translate="middle"
  />
  <b-div
   position="absolute"
   :top="100"
   :start="50"
   translate="middle"
  />
  <b-div
   position="absolute"
   :top="100"
   :start="100"
   translate="middle"
  />
 </b-div>
</template>

translate="middle-x" または translate="middle-y" クラスを追加することにより、要素は水平方向または垂直方向にのみ配置できます。

vue
<template>
 <b-div position="relative">
  <b-div
   position="absolute"
   :top="0"
   :start="0"
  />
  <b-div
   position="absolute"
   :top="0"
   :start="50"
   translate="middle-x"
  />
  <b-div
   position="absolute"
   :top="0"
   :end="0"
  />
  <b-div
   position="absolute"
   :top="50"
   :start="0"
   translate="middle-y"
  />
  <b-div
   position="absolute"
   :top="50"
   :start="50"
   translate="middle"
  />
  <b-div
   position="absolute"
   :top="50"
   :end="0"
   translate="middle-y"
  />
  <b-div
   position="absolute"
   :bottom="0"
   :start="0"
  />
  <b-div
   position="absolute"
   :bottom="0"
   :start="50"
   translate="middle-x"
  />
  <b-div
   position="absolute"
   :bottom="0"
   :end="0"
  />
 </b-div>
</template>

Examples

実際の例を次に示します。

vue
<template>
 <b-button
  color="primary"
  position="relative"
 >
  Mails
  <Badge
   position="absolute"
   top="0"
   start="100"
   rounded="pill"
   background-color="secondary"
   translate="middle"
  >
   +99
   <b-span
    class="visually-hidden"
    visually-hidden
   >
    unread messages
   </b-span>
  </Badge>
 </b-button>

 <b-button
  color="secondary"
  position="relative"
  rounded="pill"
 >
  Marker

  <b-svg
   width="1em"
   height="1em"
   viewBox="0 0 16 16"
   position="absolute"
   top="100"
   start="50"
   fill="var(--bs-secondary)"
   translate="middle"
   margin="t-1"
  >
   <path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
  </b-svg>
 </b-button>

 <b-button
  color="primary"
  position="relative"
 >
  Alerts
  <Badge
   position="absolute"
   top="0"
   start="100"
   translate="middle"
   border
   border-color="light"
   rounded="circle"
   background-color="danger"
   padding="2"
  >
   <b-span
    class="visually-hidden"
    visually-hidden
   >
    unread messages
   </b-span>
  </Badge>
 </b-button>
</template>

既存のコンポーネントとともに使用して、新しいコンポーネントを作成できます。 $position-values 変数にエントリを追加することで、その機能を拡張できます。

vue
<template>
 <b-div
  position="relative"
  margin="4"
 >
  <Progress style="height: 1px">
   <ProgressBar
    :value="50"
   />
  </Progress>
  <b-button
   position="absolute"
   :top="0"
   :start="0"
   translate="middle"
   color="primary"
   size="sm"
   rounded="pill"
   style="width: 2rem; height: 2rem"
  >
   1
  </b-button>
  <b-button
   position="absolute"
   :top="0"
   :start="50"
   translate="middle"
   color="primary"
   size="sm"
   rounded="pill"
   style="width: 2rem; height: 2rem"
  >
   2
  </b-button>
  <b-button
   position="absolute"
   :top="0"
   :start="100"
   translate="middle"
   color="secondary"
   size="sm"
   rounded="pill"
   style="width: 2rem; height: 2rem"
  >
   3
  </b-button>
 </b-div>
</template>

Position Components

position="{position}" のショートカットとして <Relative /> や <Absolute />を使用することもできます。

vue
<template>
 <Relative>
  <Absolute
   :top="0"
   :start="0"
   translate="middle"
  />
  <Absolute
   :top="0"
   :start="50"
   translate="middle"
  />
  <Absolute
   :top="0"
   :start="100"
   translate="middle"
  />
  <Absolute
   :top="50"
   :start="0"
   translate="middle"
  />
  <Absolute
   :top="50"
   :start="50"
   translate="middle"
  />
  <Absolute
   :top="50"
   :start="100"
   translate="middle"
  />
  <Absolute
   :top="100"
   :start="0"
   translate="middle"
  />
  <Absolute
   :top="100"
   :start="50"
   translate="middle"
  />
  <Absolute
   :top="100"
   :start="100"
   translate="middle"
  />
 </Relative>
</template>

See Also