时间戳

首页 > 解决方案 > 在切换文本时保持恒定的按钮宽度。（CSS 中没有固定宽度）

javascript - 在切换文本时保持恒定的按钮宽度。（CSS 中没有固定宽度）

问题描述

我有一个带有固定填充且没有固定宽度的按钮组件。这个按钮在很多地方都有使用，我希望按钮根据按钮上显示的文本来改变宽度。

我现在正在尝试向按钮添加一个切换微调器，因此当用户单击按钮时，文本消失并显示微调器。我遇到的问题是按钮不断调整大小，因为微调器的宽度与文本不同

export const Buttons = styled.button`
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
`

这些是我当前的按钮样式。

标签： javascriptcssreactjs

解决方案

如果您不想/可以修复按钮宽度，一个选项（可能不是最好的，但它会起作用）您可以尝试在加载微调器时使按钮文本透明，并将该微调器绝对定位在按钮内. 例如，你可以有类似的东西：

<button>
   <span class="text">Press here</button>
   <span class="spinner"></spinner>
</button>

//CSS
.spinner { 
   //Your CSS styles here
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate3d(-50%, -50%, 0);
   display: none;
 }

当你不加载任何东西时，你.spinner应该被隐藏（例如，不显示）；当您想显示它时，只需更改该显示属性；并使span.text文本透明。尺寸将始终保持不变，您将获得所需的效果。

button.loading .text {
   color: transparent;
}

button.loading .spinner {
   display: block;
}

这种解决方法应该可行，也许不是最好的方法，而是一种方法：D

推荐阅读