mirror of
https://github.com/bitwarden/browser
synced 2025-12-17 08:43:33 +00:00
103 lines
2.7 KiB
Plaintext
103 lines
2.7 KiB
Plaintext
import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./section.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
```ts
|
|
import { SectionComponent, SectionHeaderComponent } from "@bitwarden/components";
|
|
```
|
|
|
|
# Section
|
|
|
|
Sections are simple containers that apply a responsive bottom margin and utilize the semantic
|
|
`section` HTML element.
|
|
|
|
```html
|
|
<bit-section>
|
|
<div>Lots of amazing content!</div>
|
|
</bit-section>
|
|
```
|
|
|
|
To remove the bottom margin (for example, if the section is the last item on the page), you can pass
|
|
the `disableMargin` input.
|
|
|
|
```html
|
|
<bit-section disableMargin></bit-section>
|
|
```
|
|
|
|
<Canvas>
|
|
<Story of={stories.Default} />
|
|
</Canvas>
|
|
|
|
## Section Header
|
|
|
|
Sections often contain a heading. Use `bit-section-header` inside of the `bit-section`.
|
|
|
|
```html
|
|
<bit-section>
|
|
<bit-section-header>
|
|
<h1 bitTypography="h1">I'm a section header</h1>
|
|
</bit-section-header>
|
|
<div>Section content here!</div>
|
|
</bit-section>
|
|
```
|
|
|
|
### Section Header Padding
|
|
|
|
When placed inside of a section with a `bit-card` or `bit-item` as the immediate next sibling (or
|
|
nested in the immediate next sibling), the section header will automatically apply bottom and x-axis
|
|
padding to align the header with the border radius of the card/item.
|
|
|
|
```html
|
|
<bit-section>
|
|
<bit-section-header>
|
|
<h2 bitTypography="h6">I'm a section header</h2>
|
|
<button bitIconButton="bwi-star" size="small" slot="end"></button>
|
|
</bit-section-header>
|
|
<bit-card>
|
|
<h3 bitTypography="h3">I'm card content</h3>
|
|
</bit-card>
|
|
</bit-section>
|
|
```
|
|
|
|
<Canvas>
|
|
<Story of={stories.HeaderWithPadding} />
|
|
</Canvas>
|
|
|
|
If placed inside of a section without a `bit-card` or `bit-item`, or with a `bit-card`/`bit-item`
|
|
that is not a descendant of the immediate next sibling, the padding is not applied.
|
|
|
|
<Canvas>
|
|
<Story of={stories.HeaderWithoutPadding} />
|
|
</Canvas>
|
|
|
|
### Section Header Content Slots
|
|
|
|
`bit-section-header` contains the following slots to help position the content:
|
|
|
|
| Slot | Description |
|
|
| ------------ | ------------------------------- |
|
|
| default | title text of the header |
|
|
| `slot="end"` | placed at the end of the header |
|
|
|
|
#### Default slot
|
|
|
|
Anything passed to the default slot will display as part of the title. The title should be a
|
|
`bitTypography` element, usually an `h2` styled as an `h6`.
|
|
|
|
Title suffixes (typically an icon or icon button) can be added as well. A gap is automatically
|
|
applied between the children of the default slot.
|
|
|
|
<Canvas>
|
|
<Story of={stories.HeaderVariants} />
|
|
</Canvas>
|
|
|
|
#### End slot
|
|
|
|
The `end` slot will typically be used for text or an icon button.
|
|
|
|
<Canvas>
|
|
<Story of={stories.HeaderEndSlotVariants} />
|
|
</Canvas>
|