Sentiment-widgets NPM

Sentiment-Widget is a web-widget, it can work in original html file, it is easy to use.

快速上手

1.引入打包js文件

创建一个html文件，在头部引入需要的我们以及打包好的js文件

<!doctype html>
<html lang='en'>
<head>
  ...
  <title>Document</title>
  <script type="module" src="https://unpkg.com/sentiment-widgets/dist/esm/demo.js"></script>
</head>
  ...
</html>

2. 使用 `<sentiment-widget>`标签

<!doctype html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport'
        content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <title>Document</title>
  <script type="module" src="https://unpkg.com/sentiment-widget/dist/esm/demo.js"></script>
</head>
<body>
<sentiment-widget></sentiment-widget>
</body>
</html>

3.自定义属性

type-prop：可选项为incident和address，分别对应关键事件和关键地址，默认值为incident
lang-prop：可选项为zh和en，分别对应中文（繁体）和英文，默认值为zh
websocket-enable: 是否开启websocket订阅服务，如果要开启请将该值置为on，否则不需要设置此值

例如：

不开启websocket订阅服务的，初始化显示incident关键事件，采用英文界面的小组件为：

<sentiment-widget type-prop='incident' lang-prop='en'></sentiment-widget>
或者
<sentiment-widget lang-prop='en'></sentiment-widget>

开启websocket订阅服务，初始化显示address关键地址，采用英文界面的小组件为：
```
<sentiment-widget websocket-enable='on' type-prop='adress' lang-prop='en'></sentiment-widget>
```
开启websocket订阅服务后，只有有新记录到来，就会即时更新

4.自定义字体

建议使用Cerebri Sans字体，在<head>标签中加入style @font-face

<!doctype html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport'
        content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <title>Document</title>
  <script type="module" src="https://unpkg.com/sentiment-widgets@1.0.6/dist/esm/demo.js"></script>
  <style>
    @font-face {
      font-family: 'Cerebri Sans';
      src: url("https://unpkg.com/sentiment-widgets@1.0.6/dist/esm/assets/CerebriSansPro-Bold.ttf") format("truetype");
      font-style: normal;
      font-weight: bold;
    }
  </style>
</head>
<body>
<sentiment-widget websocket-enable='on' type-prop='incident' lang-prop='en'></sentiment-widget>
</body>
</html>

如果想要修改为自定义的字体，请保持font-family属性不变，只需修改src里url的网络字体地址即可。

@stencil/core

@everything-registry/sub-chunk-2733

2 years ago

2 years ago

2 years ago

2 years ago