diff --git a/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor b/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor index 2ef6c7dcc6c..81d48ab15f5 100644 --- a/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor +++ b/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor @@ -1,6 +1,12 @@ @inject IStringLocalizer Localizer - + @code { private List SearchableColumns { get; set; } = new List { "menu", "title", "subTitle", "demos.title", "demos.raw" }; diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 299ffa48748..f8d373dc6b5 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -4470,7 +4470,10 @@ "BootstrapBlazor.Server.Components.Components.GlobalSearch": { "SearchPlaceHolder": "search", "SearchStatus": "Powered by BootstrapBlazor", - "SearchResultPlaceHolder": "Type something to search" + "SearchResultPlaceHolder": "Type something to search", + "EnterKeyText": "to Select", + "ArrowKeyText": "to Navigate", + "EscKeyText": "to Close" }, "BootstrapBlazor.Server.Components.Components.Header": { "DownloadText": "Download", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index af83c3b2335..9a982a4d04a 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -4470,7 +4470,10 @@ "BootstrapBlazor.Server.Components.Components.GlobalSearch": { "SearchPlaceHolder": "搜索", "SearchStatus": "Powered by BootstrapBlazor", - "SearchResultPlaceHolder": "键入要搜索的内容" + "SearchResultPlaceHolder": "键入要搜索的内容", + "EnterKeyText": "选择", + "ArrowKeyText": "导航", + "EscKeyText": "关闭" }, "BootstrapBlazor.Server.Components.Components.Header": { "DownloadText": "Download", diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index f5b3e208cab..916b2274adb 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@ - 9.1.9-beta10 + 9.1.9 diff --git a/src/BootstrapBlazor/wwwroot/scss/root.scss b/src/BootstrapBlazor/wwwroot/scss/root.scss index bd282850d9a..5587aa92cb2 100644 --- a/src/BootstrapBlazor/wwwroot/scss/root.scss +++ b/src/BootstrapBlazor/wwwroot/scss/root.scss @@ -76,6 +76,49 @@ a, a:hover, a:focus { --bs-popover-body-padding-y: 0.5rem; } +.bb-g-search { + --bb-global-search-input-margin-left: .5rem; + --bb-global-search-border-color: rgba(255,255,255,.5); + --bb-global-search-color: rgba(255,255,255,.5); + --bb-global-search-border-hover-color: rgba(255,255,255); + --bb-global-search-padding: 0.25rem 0.75rem; + --bb-global-search-width: 168px; + display: flex; + align-items: center; + color: var(--bb-global-search-color); + border: var(--bs-border-width) solid var(--bb-global-search-border-color); + border-radius: var(--bs-border-radius); + padding: var(--bb-global-search-padding); + width: var(--bb-global-search-width); + transition: border-color .3s linear; + + &:hover { + border: var(--bs-border-width) solid var(--bb-global-search-border-hover-color); + } + + > input { + width: 100%; + background-color: transparent; + border: none; + line-height: 1.5; + padding: 0; + margin-left: var(--bb-global-search-input-margin-left); + cursor: pointer; + + &::placeholder { + color: var(--bb-global-search-border-color); + } + } + + > i { + cursor: pointer; + } +} + +.search-dialog-mask { + display: none; +} + ::view-transition-old(root) { animation: none; }