iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
1
Elastic Stack on Cloud

少女人妻的30天Elastic系列 第 13

【少女人妻的30天Elastic】Day 13 : Elastic App Search_用 Search UI 做搜尋頁面_趴水

Aloha!我是少女人妻 Uerica!這幾天都一直下雨,家裡的狗狗都快發霉了~大家應該都以為狗狗需要奔跑玩拋接遊戲才能消耗精力吧,其實玩嗅聞遊戲 ( 藏零食或玩具給狗狗找 ) 或益智玩具 ( 嗅聞墊、寵物桌遊等 ) 不但能消耗狗狗精力、體力,還能穩定狗狗情緒喔!~!


今天要來講解, SearchProvider 的部分,在 configurationOptions 定義後,資料在 Layout 的表現就要在 SearchProvider 這邊定義了~

SearchProvider

export default function App() {
  return (
    <SearchProvider config={configurationOptions}>
      <div className="App">
        <Layout
			header={<SearchBox />}
			bodyContent={<Results titleField="name" urlField="image_url" />}
			sideContent={
				<div>
				<Sorting
					label={"Sort by"}
					sortOptions={[
					{
						name: "Relevance",
						value: "",
						direction: ""
					},
					{
						name: "Name",
						value: "name",
						direction: "asc"
					}
					]}
				/>
				<Facet field="user_score" label="User Score" />
				<Facet field="critic_score" label="Critic Score" />
				<Facet field="genre" label="Genre" />
				<Facet field="publisher" label="Publisher" isFilterable={true} />
				<Facet field="platform" label="Platform" />
				</div>
			}
			bodyHeader={
				<>
				<PagingInfo />
				<ResultsPerPage />
				</>
			}
			bodyFooter={<Paging />}
			/>
      </div>
    </SearchProvider>
  );
}
  1. 傳遞 configurationOptions 給 SearchProvider
  2. configurationOptions 中在Facet有定義五個部分,所以在SearchProvider中我們也要創建五個Facet組件
  3. 將 search ui 中提供的 ui 組件設定並寫入 Layout 對應區塊

在前面我們從 @elastic/react-search-ui import 了下列基本組件 :

  • SearchBox : 搜尋框
  • Results : 搜尋結果顯示
  • PagingInfo : 在當前頁面上顯示信息
  • ResultsPerPage : 下拉選單選擇每頁顯示多少筆資料,可選20、40、60筆
  • Paging : 分頁
  • Facet : 以數據類型的方式過濾和瀏覽數據。
  • Sorting : 以自定義方式排序

import 後,可以將組件放置到 Layout 中。 Layout 將頁面分成多個區塊 :

  • header : 搜索框
  • bodyContent : 搜尋結果區塊
  • sideContent : 側邊欄,其中包含 facet 和 sort 選項
  • bodyHeader : 與搜尋結果相關的訊息,位於 bodyContent 上方,例如當前頁面和每頁結果筆數
  • bodyFooter : bodyContent 下方,分頁資訊,可在頁面之間快速導航

今天就到這邊瞜,感謝大家閱讀,接下來會開始介紹Search UI 有哪些與 App Search API 可以使用瞜~我要去吸狗了,掰掰大家明天見~


上一篇
【少女人妻的30天Elastic】Day 12 : Elastic App Search_用 Search UI 做搜尋頁面_趴兔
下一篇
【少女人妻的30天Elastic】Day 14 : Elastic App Search_Search UI 組件屬性使用
系列文
少女人妻的30天Elastic30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
benson_chen
iT邦新手 5 級 ‧ 2020-09-28 15:15:57

少女人妻 fighting ~

被發現啦~ XD

我要留言

立即登入留言