@asyncapi/react-component 1.0.0-next.32 → 1.0.0-next.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +65 -0
- package/browser/index.js +6 -6
- package/browser/standalone/index.js +10 -10
- package/browser/standalone/without-parser.js +8 -8
- package/browser/without-parser.js +4 -4
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -126,6 +126,7 @@ For a list and description of features offered by the AsyncAPI React component,
|
|
|
126
126
|
|
|
127
127
|
## Styles
|
|
128
128
|
|
|
129
|
+
### Default styles
|
|
129
130
|
To use default styles import them as follows:
|
|
130
131
|
|
|
131
132
|
``` js
|
|
@@ -134,6 +135,70 @@ import "@asyncapi/react-component/styles/default.css";
|
|
|
134
135
|
import "@asyncapi/react-component/styles/default.min.css";
|
|
135
136
|
```
|
|
136
137
|
|
|
138
|
+
### Custom styles
|
|
139
|
+
The AsyncAPI React component does not set any global fonts. This component allows the usage of your custom `font-family` and other styling.
|
|
140
|
+
|
|
141
|
+
This can be done by defining the styles in a file or inline using a `<style>` tag in the `<head>` section of the page where you are using AsyncAPI React component.
|
|
142
|
+
|
|
143
|
+
Example custom styles (defined in the `styles/custom.css` file):
|
|
144
|
+
```css
|
|
145
|
+
html {
|
|
146
|
+
-moz-tab-size: 4;
|
|
147
|
+
-o-tab-size: 4;
|
|
148
|
+
tab-size: 4;
|
|
149
|
+
line-height: 1.15;
|
|
150
|
+
-webkit-text-size-adjust: 100%;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
body {
|
|
154
|
+
margin: 0;
|
|
155
|
+
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
|
|
156
|
+
}
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
If you are using the component in a project that uses a bundler like Webpack, don't forget to import the custom styles.
|
|
160
|
+
|
|
161
|
+
``` js
|
|
162
|
+
import "styles/custom.css";
|
|
163
|
+
import "@asyncapi/react-component/styles/default.min.css";
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
If you are using the [standalone bundle](./docs/usage/standalone-bundle.md), you can put the custom styles as a style sheet link or as an inline style in the `<head>` section of the HTML code:
|
|
167
|
+
|
|
168
|
+
```html
|
|
169
|
+
<head>
|
|
170
|
+
<!-- Custom style sheet -->
|
|
171
|
+
<link rel="stylesheet" href="./styles/custom.css">
|
|
172
|
+
|
|
173
|
+
<!-- OR as inline style -->
|
|
174
|
+
<style>
|
|
175
|
+
html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%};
|
|
176
|
+
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji};
|
|
177
|
+
</style>
|
|
178
|
+
|
|
179
|
+
<link rel="stylesheet" href="https://unpkg.com/@asyncapi/react-component@1.0.0-next.32/styles/default.min.css">
|
|
180
|
+
|
|
181
|
+
...
|
|
182
|
+
</head>
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
### Custom logo
|
|
186
|
+
|
|
187
|
+
The AsyncAPI component supports the option to use a custom logo. By using the `x-logo` custom extension in the [InfoObject](https://github.com/asyncapi/spec/blob/master/spec/asyncapi.md#infoObject), a logo will be shown in the top left corner.
|
|
188
|
+
|
|
189
|
+
> **NOTE**: The logo will only appear if the [sidebar option](./docs/configuration/config-modification.md#definition) is enabled.
|
|
190
|
+
|
|
191
|
+
```yaml
|
|
192
|
+
asyncapi: 2.2.0
|
|
193
|
+
info:
|
|
194
|
+
title: Account Service
|
|
195
|
+
version: 1.0.0
|
|
196
|
+
description: This service is in charge of processing user signups.
|
|
197
|
+
x-logo: 'https://raw.githubusercontent.com/asyncapi/spec/master/assets/logo.png'
|
|
198
|
+
channels:
|
|
199
|
+
...
|
|
200
|
+
```
|
|
201
|
+
|
|
137
202
|
## Playground
|
|
138
203
|
|
|
139
204
|
This repository comes in with a [Playground application](https://asyncapi.github.io/asyncapi-react/). Test it to see the component in action and play with it before you use it in your application.
|