検索バーのデザインを変更し、自社にあった検索バーにすることが可能です。
※ 足りないプロパティ設定など順次追加しておりますので、必要なプロパティがあればお問い合わせください。
Placeholderの文言変更
Placeholderの文言を変更する場合は
placeholder を設定してください
SmartSearch.initialize({
smartSearchKey: "xxxxxx-ec20-415f-a613-cd5c321c04da",
elementId: "smart_search",
placeholder: "AIでドキュメント検索",
searchBarStyle: {},
});JavaScript
スタイリングの変更
検索バーのスタイリングを変更する場合は
searchBarStyle を設定してください設定できる内容については下記 SearchBarStyleパラメータ一覧 を参照してください。
SmartSearch.initialize({
smartSearchKey: "xxxxxx-ec20-415f-a613-cd5c321c04da",
elementId: "smart_search",
searchBarStyle: {
iconSize: "16px",
iconMargin: "0 0 0 0",
height: "40px",
width: "200px",
fontSize: "16px",
borderWidth: "1px",
borderColor: "rgb(229, 231, 235)",
borderRadius: "6px",
},
});JavaScript
SearchBarStyleパラメータ一覧
| Key | Description | 例 |
|---|---|---|
iconSize |
検索バー内の虫眼鏡アイコンのサイズ | 16px |
iconMargin |
検索バー内の虫眼鏡アイコンのマージン | 0 0 0 0 |
height |
検索バーの高さ | 40px |
width |
検索バーの横幅 | 200px |
fontSize |
検索バー内の虫眼鏡アイコンとPlaceholderのサイズ | 16px |
borderWidth |
検索バーの枠線の太さ | 1px |
borderColor |
検索バーの枠線の色 | rgb(229, 231, 235) |
borderRadius |
検索バーの角丸の丸み | 6px |
コメント
0件のコメント
サインインしてコメントを残してください。