This page is about version 3.174.0 of the app, which is not the most recent version. The latest stable version is 3.175.0.
The notification
component displays text content in a bar style (notification.bar
) or inline (notification.inline
). This Component can be imported and used by any VTEX app.
![{"base64":" ","img":{"width":1888,"height":733,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1082858,"url":"https://user-images.githubusercontent.com/67270558/147773765-0a7f00d6-69ce-44fa-98fc-4b1824faa2bf.png"}}](https://user-images.githubusercontent.com/67270558/147773765-0a7f00d6-69ce-44fa-98fc-4b1824faa2bf.png)
Configuration
- Import the
vtex.store-components
app to your theme's dependencies in themanifest.json
file as in the following example:
_10 "dependencies": {_10 "vtex.store-components": "3.x"_10 }
- Add the
notification
block to any template of your choice. For example:
_10 "store.home": {_10 "blocks": [_10+ "notification.bar",_10 "carousel#home",_10 "shelf#home"_10 ]_10 },
- Then, declare the
notification
block using the props stated in the Props table.
Props
Prop name | Type | Description | Default value |
---|---|---|---|
content | String | Text to be used in the bar. | '' |
classes | CustomCSSClasses | Overrides default CSS handles. To better understand how this prop works, check this document. Note that this is only helpful if you're using this block as a React component. | undefined |
Customization
To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.
CSS Handles |
---|
notificationBarContainer |
notificationBarInner |
notificationContent |