material-components-vue
Version:
Material Design components for Vue.js
69 lines (51 loc) • 1.7 kB
Markdown
## TopAppBar
Actually the mdc-web component enforces users to set a navigation icon, so be sure to set an icon
in the navigation slot!
### Markup
```html
<m-top-app-bar>
<m-icon
icon="menu"
slot="navigation"/>
<span>Title</span>
<m-icon
icon="file_download"
slot="actions"/>
</m-top-app-bar>
```
### Props & events
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| collapsed | Boolean | false | collapsed bar (must be short too) |
| short | Boolean | false | short bar |
| prominent | Boolean | false | prominent app bar style (could not be short too) |
| dense | Boolean | false | dense app bar style (could not be short too) |
| Event | Description |
|------|------|
| onNavigation | will be dispatched when navigation item is clicked |
### Slots
| Slot | Description |
|------|-------------|
| default | top app bar title |
| navigation | navigation section icons |
| actions | actions section icons |
## TopAppBarFixedAdjust
### Markup
```html
<m-top-app-bar-fixed-adjust dense>
Some content
</m-top-app-bar-fixed-adjust>
```
### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| short | Boolean | false | content adjustment for short top-app-bar |
| dense | Boolean | false | content adjustment for dense top-app-bar |
| prominent | Boolean | false | content adjustment for prominent top-app-bar |
| denseProminent | Boolean | false | content adjustment for dense and prominent top-app-bar |
### Slots
| Slot | Description |
|------|-------------|
| default | content |
### Reference
- https://github.com/material-components/material-components-web/tree/master/packages/mdc-top-app-bar