mirror of
https://github.com/thejakubruzicka/MNotes.git
synced 2025-07-10 22:44:05 +02:00
141 lines
3.7 KiB
Markdown
141 lines
3.7 KiB
Markdown
|
# Divider
|
||
|
|
||
|
<!--*
|
||
|
# Document freshness: For more information, see go/fresh-source.
|
||
|
freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
|
||
|
tag: 'docType:reference'
|
||
|
*-->
|
||
|
|
||
|
<!-- go/md-divider -->
|
||
|
|
||
|
<!-- [TOC] -->
|
||
|
|
||
|
A [divider](https://m3.material.io/components/divider)<!-- {.external} --> is a thin line
|
||
|
that groups content in lists and containers.
|
||
|
|
||
|
Dividers can reinforce tapability, such as when used to separate list items or
|
||
|
define tappable regions in an accordion.
|
||
|
|
||
|

|
||
|
|
||
|
* [Design article](https://m3.material.io/components/divider) <!-- {.external} -->
|
||
|
* [API Documentation](#api)
|
||
|
* [Source code](https://github.com/material-components/material-web/tree/main/divider)
|
||
|
<!-- {.external} -->
|
||
|
|
||
|
## Usage
|
||
|
|
||
|
Use full width dividers to separate larger sections of unrelated content.
|
||
|
|
||
|

|
||
|
|
||
|
```html
|
||
|
<section>
|
||
|
<p>Lorem ipsum...</p>
|
||
|
<md-divider></md-divider>
|
||
|
<p>Lorem ipsum...</p>
|
||
|
</section>
|
||
|
```
|
||
|
|
||
|
### Inset dividers
|
||
|
|
||
|
Use inset dividers to separate related content within a section.
|
||
|
|
||
|

|
||
|
|
||
|
```html
|
||
|
<section>
|
||
|
<p>Material 2</p>
|
||
|
<md-divider inset></md-divider>
|
||
|
<p>Material 3</p>
|
||
|
</section>
|
||
|
```
|
||
|
|
||
|
Inset dividers are equally indented from both sides of the screen by default.
|
||
|
Use `inset-start` or `inset-end` to change this.
|
||
|
|
||
|

|
||
|
|
||
|
```html
|
||
|
<section>
|
||
|
<p>Material 2</p>
|
||
|
<md-divider inset-start></md-divider>
|
||
|
<p>Material 3</p>
|
||
|
</section>
|
||
|
```
|
||
|
|
||
|
## Accessibility
|
||
|
|
||
|
Dividers are decorative by default and not announced by assistive technology.
|
||
|
|
||
|
Add a
|
||
|
[`role="separator"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role)<!-- {.external} -->
|
||
|
attribute to non-decorative dividers that should be announced.
|
||
|
|
||
|
```html
|
||
|
<ul>
|
||
|
<li>Item one</li>
|
||
|
<md-divider inset></md-divider>
|
||
|
<li>Item two</li>
|
||
|
<md-divider role="separator"></md-divider>
|
||
|
<li>Item three</li>
|
||
|
<md-divider inset></md-divider>
|
||
|
<li>Item four</li>
|
||
|
</ul>
|
||
|
```
|
||
|
|
||
|
## Theming
|
||
|
|
||
|
Divider supports [theming](../theming/README.md) and can be customized with CSS
|
||
|
custom property tokens.
|
||
|
|
||
|
### Tokens
|
||
|
|
||
|
Token | Default value
|
||
|
------------------------ | --------------------------------
|
||
|
`--md-divider-color` | `--md-sys-color-outline-variant`
|
||
|
`--md-divider-thickness` | `1px`
|
||
|
|
||
|
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-divider.scss)
|
||
|
<!-- {.external} -->
|
||
|
|
||
|
### Example
|
||
|
|
||
|

|
||
|
|
||
|
```html
|
||
|
<style>
|
||
|
:root {
|
||
|
--md-sys-color-outline-variant: #BEC9C8;
|
||
|
--md-divider-thickness: 2px;
|
||
|
}
|
||
|
</style>
|
||
|
|
||
|
<section>
|
||
|
<p>Lorem ipsum...</p>
|
||
|
<md-divider></md-divider>
|
||
|
<p>Lorem ipsum...</p>
|
||
|
</section>
|
||
|
```
|
||
|
|
||
|
<!-- auto-generated API docs start -->
|
||
|
|
||
|
## API
|
||
|
|
||
|
|
||
|
### MdDivider <code><md-divider></code>
|
||
|
|
||
|
#### Properties
|
||
|
|
||
|
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||
|
|
||
|
| Property | Attribute | Type | Default | Description |
|
||
|
| --- | --- | --- | --- | --- |
|
||
|
| `inset` | `inset` | `boolean` | `false` | Indents the divider with equal padding on both sides. |
|
||
|
| `insetStart` | `inset-start` | `boolean` | `false` | Indents the divider with padding on the leading side. |
|
||
|
| `insetEnd` | `inset-end` | `boolean` | `false` | Indents the divider with padding on the trailing side. |
|
||
|
|
||
|
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||
|
|
||
|
<!-- auto-generated API docs end -->
|