1.0.0 • Published 2 years ago
Straw
Flashaim 針對 LINE Audience 開發之API的 Narrowcast 推播 Library
相依版本
Angular 12+
Angular material 12+
Setup
Angular Library Setup
npm install flashaim-straw
Uninstall
Angular Library Uninstall
npm uninstall flashaim-straw
Import module
匯入模組
import {StrawModule} from "flashaim-straw";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
...
StrawModule,
...
],
})
<st-straw [accessToken]="{{accessToken}}" [channelId]="{{channelId}}" [config]="{{config}}"></st-straw>
模組參數
| Name | Type | Required | Description |
|---|
| @Input()accessToken | string | * | Access Token |
| @Input()channelId | string | * | Channel ID |
| @Input()config | Config | * | 細部控制參數設定 |
Config
| Name | Type | Required | Description |
|---|
| apiDomain | ApiDomainConfig | * | API Domain |
| sidenav | SidenavConfig | | 客製化Sidenav |
| theme | ThemeConfig | | 客製化CSS style |
| tags | Tags[] | * | 標籤 |
| msgPrice | number | * | 單則推播訊息價格 |
ApiDomainConfig
SidenavConfig
| Name | Type | Required | Description |
|---|
| mode | 'over' or 'push' or 'side' | | Sidenav Mode，參照Material Sidenav:MatDrawerMode |
| fixedTopGap | number | | sidenav和top的間距 |
Tags
| Name | Type | Required | Description |
|---|
| description | string | * | 標籤名稱 |
| users_id | string[] | * | 標籤的LINE User id |
| selected | boolean | | 傳入true可預設被選取 |
ThemeConfig
| Name | Type | Required | Description |
|---|
| mainColor | string | | 文字主色系文字顏色，需填入符合hexadecimal之完整色碼，例：#000000 |
| mainBackgroundColor | string | | 深色背景顏色，需填入符合hexadecimal之完整色碼，例：#000000 |
| btnStyle | {key:string} | | 一般按鈕CSS style，需符合CSS規則 |
| focusBtnStyle | {key:string} | | 重點按鈕CSS style，需符合CSS規則 |
Config Example
config: Config = {
apiDomain: {
api: '...',
media: '...'
},
sidenavMode: {
mode:'side',
fixedTopGap:0
},
tags: [
{description: "...", users_id: [ "..."]},
...
],
msgPrice: 0.5,
theme: {
btnStyle: {
...
},
focusBtnStyle: {
...
},
mainColor: "#??????",
mainBackgroundColor: "#??????"
}
};
Btn Style Example
focusBtnStyle:{color:'#000000',borderRadius:'15px'}