rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Add new .overflow-x, .overflow-y, and object-fit utilities

Browse Source 
Overflow utilities are self-explanatory.

The object-fit property is used to specify how an `<img>` or `<video>` should be resized to fit its container. Offers a responsive alternative to using `background-image` for a resizable fill/fit image.
This commit is contained in:
Daniel O 2022-07-26 11:53:21 +01:00 committed by Mark Otto
parent d1d1f490ed
commit 0129d35796
6 changed files with 170 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
scss/_utilities.scss
View File

@ -22,6 +22,20 @@ $utilities: map-merge(
)
),
// scss-docs-end utils-float
// Object Fit utilities
// scss-docs-start utils-object-fit
"object-fit": (
responsive: true,
property: object-fit,
values: (
contain: contain,
cover: cover,
fill: fill,
scale: scale-down,
none: none,
)
),
// scss-docs-end utils-object-fit
// Opacity utilities
// scss-docs-start utils-opacity
"opacity": (
@ -40,6 +54,14 @@ $utilities: map-merge(
property: overflow,
values: auto hidden visible scroll,
),
"overflow-x": (
property: overflow-x,
values: auto hidden visible scroll,
),
"overflow-y": (
property: overflow-y,
values: auto hidden visible scroll,
),
// scss-docs-end utils-overflow
// scss-docs-start utils-display
"display": (

62
site/content/docs/5.2/utilities/object-fit.md Normal file
View File

@ -0,0 +1,62 @@
---
layout: docs
title: Object fit
description: Use the object fit utilities to sets how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `<img>` or `<video>`, should be resized to fit its container.
group: utilities
toc: true
---
## How it works
Change the value of the [`object-fit` property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with our responsive `object-fit` utility classes. This property tells the content to fill the container in a variety of ways; such as <i>"preserve that aspect ratio"</i> or <i>"stretch up and take up as much space as possible"</i>.
Classes for the value of `object-fit` are named using the format `.object-fit-{value}`. Choose from the following values
- `contain`
- `cover`
- `fill`
- `scale` (for scale-down)
- `none`
## Examples
Add the `object-fit-{value}` class to the [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element):
{{< example class="d-flex overflow-auto" >}}
{{< placeholder width="20%" height="120" class="object-fit-contain border rounded" text="Object Fit Contain" markup="img" >}}
{{< placeholder width="20%" height="120" class="object-fit-cover border rounded" text="Object Fit Cover" markup="img" >}}
{{< placeholder width="20%" height="120" class="object-fit-fill border rounded" text="Object Fit Fill" markup="img" >}}
{{< placeholder width="20%" height="120" class="object-fit-scale border rounded" text="Object Fit Scale Down" markup="img" >}}
{{< placeholder width="20%" height="120" class="object-fit-none border rounded" text="Object Fit None" markup="img" >}}
{{< /example >}}
## Responsive
Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need.
{{< example class="d-flex overflow-auto" >}}
{{< placeholder width="20%" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" >}}
{{< placeholder width="20%" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" >}}
{{< placeholder width="20%" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" >}}
{{< placeholder width="20%" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" >}}
{{< placeholder width="20%" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" >}}
{{< /example >}}
## Video Tags
Just like `<img>` tags, the `.object-fit-{value}` and responsive `.object-fit-{breakpoint}-{value}` utilities also work on `<video>` tags.
```html
<video src="..." class="object-fit-contain" autoplay></video>
<video src="..." class="object-fit-cover" autoplay></video>
<video src="..." class="object-fit-fill" autoplay></video>
<video src="..." class="object-fit-scale" autoplay></video>
<video src="..." class="object-fit-none" autoplay></video>
```
### Utilities API
Object fit utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-object-fit" file="scss/_utilities.scss" >}}

64
site/content/docs/5.2/utilities/overflow.md
View File

@ -3,8 +3,11 @@ layout: docs
title: Overflow
description: Use these shorthand utilities for quickly configuring how content overflows an element.
group: utilities
toc: true
---
## Overflow
Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
<div class="bd-example d-md-flex">
@ -29,6 +32,67 @@ Adjust the `overflow` property on the fly with four default values and classes.
<div class="overflow-scroll">...</div>
```
## Vertical and Horizontal Overflow
Specify how the overflowing content within the horizontal direction <i>(x-axis)</i> or vertical direction <i>(y-axis)</i> of the element should behave. Classes can be combined for various effects as you need.
### Overflow-x
Adjust the `overflow-x` property with four default values and classes. These will only affect the overflow of content horizontally:
<div class="bd-example d-md-flex">
<div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
<div><code>.overflow-x-auto</code> example on an element</div>
<div> with set width and height dimensions.</div>
</div>
<div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div><code>.overflow-x-hidden</code> example</div>
<div>on an element with set width and height dimensions.</div>
</div>
<div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div><code>.overflow-x-visible</code> example </div>
<div>on an element with set width and height dimensions.</div>
</div>
<div class="overflow-x-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div><code>.overflow-x-scroll</code> example on an element</div>
<div> with set width and height dimensions.</div>
</div>
</div>
```html
<div class="overflow-x-auto">...</div>
<div class="overflow-x-hidden">...</div>
<div class="overflow-x-visible">...</div>
<div class="overflow-x-scroll">...</div>
```
### Overflow-y
Adjust the `overflow-y` property with four default values and classes. These will only affect the overflow of content vertically:
<div class="bd-example d-md-flex">
<div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-auto</code> example on an element with set width and height dimensions.
</div>
<div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-hidden</code> example on an element with set width and height dimensions.
</div>
<div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-visible</code> example on an element with set width and height dimensions.
</div>
<div class="overflow-y-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-scroll</code> example on an element with set width and height dimensions.
</div>
</div>
```html
<div class="overflow-y-auto">...</div>
<div class="overflow-y-hidden">...</div>
<div class="overflow-y-visible">...</div>
<div class="overflow-y-scroll">...</div>
```
Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
## Sass

1
site/data/sidebar.yml
View File

@ -123,6 +123,7 @@
- title: Flex
- title: Float
- title: Interactions
- title: Object fit
- title: Opacity
- title: Overflow
- title: Position

4
site/layouts/shortcodes/example.html
View File

@ -17,6 +17,7 @@
{{- $show_markup := .Get "show_markup" | default true -}}
{{- $show_preview := .Get "show_preview" | default true -}}
{{- $input := .Inner -}}
{{- $content := .Inner -}}
<div class="bd-example-snippet bd-code-snippet">
{{- if eq $show_preview true -}}
@ -40,7 +41,8 @@
</div>
{{- end -}}
{{- $content := replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>\n` `<img src="..." class="$1" alt="...">` $input -}}
{{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?/>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE ` (class=" *?")` "" $content -}}
{{- highlight (trim $content "\n") $lang "" -}}
{{- end -}}

14
site/layouts/shortcodes/placeholder.html
View File

@ -4,11 +4,12 @@
`args` are all optional and can be one of the following:
* title: Used in the SVG `title` tag - default: "Placeholder"
* text: The text to show in the image - default: "width x height"
* class: Class to add to the `svg` - default: "bd-placeholder-img"
* class: Class to add to the `svg` or `img` - default: "bd-placeholder-img"
* color: The text color (foreground) - default: "#dee2e6"
* background: The background color - default: "#868e96"
* width: default: "100%"
* height: default: "180px"
* markup: If it should render `svg` or `img` tags - default: "svg"
*/ -}}
{{- $grays := $.Site.Data.grays -}}
@ -26,8 +27,19 @@
{{- $show_title := not (eq $title "false") -}}
{{- $show_text := not (eq $text "false") -}}
{{- $markup := .Get "markup" | default "svg" -}}
{{- if eq $markup "img" -}}
<img class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" alt="{{ $title }} : {{ $text }}" width="{{ $width }}" height="{{ $height }}" src="data:image/svg+xml,%3Csvg style='font-size: 1.125rem; font-family:system-ui,-apple-system,%22Segoe UI%22,Roboto,%22Helvetica Neue%22,%22Noto Sans%22,%22Liberation Sans%22,Arial,sans-serif,%22Apple Color Emoji%22,%22Segoe UI Emoji%22,%22Segoe UI Symbol%22,%22Noto Color Emoji%22; -webkit-user-select: none; -moz-user-select: none; user-select: none; text-anchor: middle;' width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E
{{- if $show_title }}%3Ctitle%3E{{ $title }}%3C/title%3E{{ end -}}
%3Crect width='100%25' height='100%25' fill='%23dee2e6'%3E%3C/rect%3E
{{- if $show_text }}%3Ctext x='50%25' y='50%25' fill='%23868e96' dy='.3em'%3E{{ $text }}%3C/text%3E{{ end -}}
%3C/svg%3E" />
{{- else -}}
<svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
{{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
<rect width="100%" height="100%" fill="{{ $background }}"/>
{{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
</svg>
{{- end -}}