dtable-ui-component 5.2.4 → 5.2.5
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 +35 -10
- package/lib/ImagePreviewerLightbox/index.css +13 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[document](https://seatable.github.io/dtable-ui-component/docs/)
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Font icons
|
|
6
6
|
|
|
7
7
|
When using dtable-ui-component component library, you need to import dtable-font font icon.
|
|
8
8
|
|
|
@@ -10,23 +10,48 @@ When using dtable-ui-component component library, you need to import dtable-font
|
|
|
10
10
|
2. If the dtable-font font icon is not referenced in the application, you need to import the corresponding font icon when using dtable-ui-component
|
|
11
11
|
|
|
12
12
|
```js
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
import { CollaboratorEditor } from 'dtable-ui-component';
|
|
14
|
+
import 'dtable-ui-component/assets/dtable-font.css';
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Internationalization (I18n)
|
|
15
18
|
|
|
16
|
-
|
|
19
|
+
If your UI component requires localization, you need to call the localization function.
|
|
20
|
+
|
|
21
|
+
```js
|
|
22
|
+
import { setLocale } from 'dtable-ui-component/lib/lang';
|
|
23
|
+
|
|
24
|
+
let lang = 'en';
|
|
25
|
+
setLocale(lang);
|
|
17
26
|
```
|
|
18
27
|
|
|
19
|
-
##
|
|
28
|
+
## On-demand loading of components
|
|
29
|
+
|
|
30
|
+
If you want to use on-demand loading, you need to install the following third-party libraries.
|
|
31
|
+
|
|
32
|
+
~~~bash
|
|
33
|
+
npm install babel-plugin-import --save-dev
|
|
34
|
+
~~~
|
|
20
35
|
|
|
21
|
-
|
|
36
|
+
then add the following content to the ` .babelrc` file of your project
|
|
22
37
|
|
|
23
38
|
```js
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
39
|
+
{
|
|
40
|
+
"plugins": [
|
|
41
|
+
[
|
|
42
|
+
"import", {
|
|
43
|
+
"libraryName": "dtable-ui-component",
|
|
44
|
+
"libraryDirectory": "lib",
|
|
45
|
+
"camel2DashComponentName": false,
|
|
46
|
+
"camel2UnderlineComponentName": false
|
|
47
|
+
},
|
|
48
|
+
"dtable-ui-component"
|
|
49
|
+
],
|
|
50
|
+
]
|
|
51
|
+
}
|
|
27
52
|
```
|
|
28
53
|
|
|
29
|
-
Long Text Formatter
|
|
54
|
+
## Long Text Formatter
|
|
30
55
|
|
|
31
56
|
If your project only uses a simple long text formatter, you can reference the SimpleLongTextFormatter component.
|
|
32
57
|
|
|
@@ -3,6 +3,19 @@
|
|
|
3
3
|
outline: none;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
+
.ril__outer .ril__toolbarItem {
|
|
7
|
+
height: 50px;
|
|
8
|
+
color: #fff;
|
|
9
|
+
display: inline-block;
|
|
10
|
+
font-size: 120%;
|
|
11
|
+
line-height: 50px;
|
|
12
|
+
max-width: 100%;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
padding: 0;
|
|
15
|
+
text-overflow: ellipsis;
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
}
|
|
18
|
+
|
|
6
19
|
.ril-caption .ril__builtinButton {
|
|
7
20
|
width: 24px;
|
|
8
21
|
}
|