チャット・ToDo・天気

ダッシュボード向けのチャット、ToDo、天気のウィジェット。

Chat、TodoList、Weather

Chat、TodoList、Weather

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-lg-4"><ThlCard title="Chat"><ThlChat :messages="messages" composer @send="send" /></ThlCard></div>
  <div class="thl-col-12 thl-col-lg-4"><ThlCard title="To do"><ThlTodoList :items="todos" addable @toggle="toggle" @remove="remove" @add="add" /></ThlCard></div>
  <div class="thl-col-12 thl-col-lg-4"><ThlWeather city="Hà Nội" :temp="28" condition="Partly cloudy" :days="[{ day: 'Mon', temp: 27, icon: 'sun' }, { day: 'Tue', temp: 25, icon: 'cloud-rain' }, { day: 'Wed', temp: 26, icon: 'cloud' }]" /></div>
</div>

React

<Chat messages={messages} onSend={send} />
<TodoList items={todos} addable onToggle={toggle} onRemove={remove} onAdd={add} />
<WeatherWidget city="Hà Nội" temp={28} condition="Partly cloudy" days={days} />

Angular

<thl-chat [messages]="messages()" composer (send)="send($event)" />
<thl-todo-list [items]="todos()" addable (toggle)="toggle($event)" (remove)="remove($event)" (add)="add($event)" />
<thl-weather city="Hà Nội" [temp]="28" condition="Partly cloudy" [days]="days" />

API

Chat

<ThlChat> · import { ThlChat } from '@thl-ui/vue'

Prop	型	デフォルト
messages*	array	—
composer	boolean	—

イベント: send

TodoList

<ThlTodoList> · import { ThlTodoList } from '@thl-ui/vue'

Prop	型	デフォルト
items*	array	—
addable	boolean	—

イベント: toggleremoveadd

Weather

<ThlWeather> · import { ThlWeather } from '@thl-ui/vue'

Prop	型	デフォルト
city	string	—
temp	number	—
condition	string	—
icon	string	"cloud-sun"
days	array	—