diff --git a/src/BootstrapBlazor.Server/Components/Samples/Inputs.razor b/src/BootstrapBlazor.Server/Components/Samples/Inputs.razor index 00f975a613a..499511f1a7d 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Inputs.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Inputs.razor @@ -222,4 +222,33 @@ + +
+
+ +
+
+
+
+ +
+
+
+
+ + + + +
+
+ + + + +
+
+
+ diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 64872a4fbea..f1e8eed7059 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -2780,7 +2780,9 @@ "InputsFormatStringSetting": "Set up", "InputsFormatStringTips": "The BootstrapInput component binds byte[] array and formats it as an example of base64 encoded string", "UseInputEvent": "Whether use oninput event when bind-value", - "IsTrim": "automatically trim white space when entering content" + "IsTrim": "automatically trim white space when entering content", + "ClearableTitle": "Clearable", + "ClearableIntro": "By setting the Clearable=\"true\" parameter, a small Clear button will be displayed when the component gains focus or when the mouse hovers over it." }, "BootstrapBlazor.Server.Components.Samples.InputNumbers": { "InputNumbersTitle": "InputNumber", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 19cc87cf5dc..9711b659ec7 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -2780,7 +2780,9 @@ "InputsFormatStringSetting": "设置", "InputsFormatStringTips": "BootstrapInput 组件绑定 byte[] 数组,格式化成 base64 编码字符串示例", "UseInputEvent": "是否在文本框输入值时触发", - "IsTrim": "是否自动去除空格" + "IsTrim": "是否自动去除空格", + "ClearableTitle": "清除", + "ClearableIntro": "通过设置 Clearable=\"true\" 参数,使组件获得焦点或者鼠标悬浮时显示一个 清除 小按钮" }, "BootstrapBlazor.Server.Components.Samples.InputNumbers": { "InputNumbersTitle": "InputNumber 组件", diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 46b5ff3f9b1..047f0af70a4 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@ - 9.2.0-beta01 + 9.2.0 diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.scss b/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.scss index a1ea2c7166d..771d3452904 100644 --- a/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.scss +++ b/src/BootstrapBlazor/Components/Input/BootstrapInput.razor.scss @@ -14,7 +14,7 @@ color: var(--bb-border-hover-color); cursor: pointer; position: absolute; - right: 11px; + right: 10px; display: none; } diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInputGroup.razor.scss b/src/BootstrapBlazor/Components/Input/BootstrapInputGroup.razor.scss index f690285b3ab..ccac3533f6e 100644 --- a/src/BootstrapBlazor/Components/Input/BootstrapInputGroup.razor.scss +++ b/src/BootstrapBlazor/Components/Input/BootstrapInputGroup.razor.scss @@ -2,6 +2,7 @@ > .datetime-picker, > .select, > .switch, + > .bb-clearable-input, > .auto-complete { width: 1%; flex: 1 1 auto; @@ -39,6 +40,20 @@ } } } + + > .bb-clearable-input:not(:first-child) { + > input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + + > .bb-clearable-input:not(:last-child) { + > input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } } .input-group-xs {