python - ipywidgets 按钮上的自定义文本位置

Question

我正在尝试在到达所有边缘的按钮上放置一个“+”号。这是一个最小的例子，来自一个 Jupyter 笔记本，首先是一个样式：

%%html
<style>
.button_style{
    font-size:155px;
    color: black;
}
</style>

和按钮本身：

import ipywidgets as ipyw
button = ipyw.Button(description='+', style={'button_color':'blue'},    
                     layout=ipyw.Layout(width='80px', height='80px'))
button.add_class("button_style")

如您所见，我尝试使字体大小足够大以达到按钮边缘。但问题是文本没有与按钮的中间对齐：

我玩过,等选项text-align，但它们都影响整个按钮，即它们平移或变形整个蓝色方块，而不仅仅是其中的文本。left-paddingleft-margin

有没有办法做到这一点？理想情况下，我能够改变十字架的中心，但总是让它到达所有边缘，并且不会让十字架本身变得超级胖。但也欢迎不太理想的解决方案。

更新：

所以我正在寻找的结果是这样的：

可以配置中心以及理想情况下线条的粗细。用 '+' 来实现结果并不重要，只要按钮看起来像这样并且仍然可以用 改变背景颜色style={'button_color': ..}。

标签： pythoncssipywidgets

Answer 1

正如@johannchopin 提到的，这可以通过伪元素来完成。我建议一个与他类似但没有内部.custom-plusdiv 的解决方案。这样做更好，因为它允许您按ipywidgets原样使用并添加样式。

这将允许您ipywidgets像这样使用按钮：

风格

%%html
<style>
.button_style {
  --size: 80px;
  --line-color: black;
  --line-color-horizontal: var(--line-color);
  --line-color-vertical: var(--line-color);
  --line-stroke: calc(0.125 * var(--size));
  --line-stroke-horizontal: var(--line-stroke);
  --line-stroke-vertical: var(--line-stroke);
  --line-distance: calc(0.2 * var(--size));
  --line-distance-right: var(--line-distance);
  --line-distance-bottom: var(--line-distance);
  --line-hover: lightblue;
  --background: blue;
  --background-hover: var(--background);
  color: black;
  padding: 0;
  background: var(--background);
  width: var(--size);
  height: var(--size);
  position: relative;
  border: none;
  cursor: pointer;
}

.button_style:hover {
  background: var(--background-hover);
}

.button_style:hover::before, .button_style:hover::after {
  background: var(--line-hover);
}

.button_style::before, .button_style::after {
  position: absolute;
  content: "";
  transition: background 250ms;
}

.button_style::before {
  left: 0;
  bottom: var(--line-distance-bottom);
  width: 100%;
  height: var(--line-stroke-horizontal);
  background: var(--line-color-horizontal);
}

.button_style::after {
  right: var(--line-distance-right);
  top: 0;
  height: 100%;
  width: var(--line-stroke-vertical);
  background: var(--line-color-vertical);
}
</style>

定义

import ipywidgets as ipyw
button = ipyw.Button(description='+', style={'--size':'80px', '--background': 'blue' })
button.add_class("button_style")

您可能还可以删除布局选项来定义按钮的大小，因为它是可选的，并且我们已经使用 CSS 变量 ( --size) 设置了大小。此外，使用 CSS 变量，我们可以设置背景颜色，甚至可以在悬停时更改颜色（参见我的代码片段）。

.button_style {
  --size: 80px;
  --line-color: black;
  --line-color-horizontal: var(--line-color);
  --line-color-vertical: var(--line-color);
  --line-stroke: calc(0.125 * var(--size));
  --line-stroke-horizontal: var(--line-stroke);
  --line-stroke-vertical: var(--line-stroke);
  --line-distance: calc(0.2 * var(--size));
  --line-distance-right: var(--line-distance);
  --line-distance-bottom: var(--line-distance);
  --line-hover: lightblue;
  --background: blue;
  --background-hover: var(--background);
  color: black;
  padding: 0;
  background: var(--background);
  width: var(--size);
  height: var(--size);
  position: relative;
  border: none;
  cursor: pointer;
}

.button_style:hover {
  background: var(--background-hover);
}

.button_style:hover::before,
.button_style:hover::after {
  background: var(--line-hover);
}

.button_style::before,
.button_style::after {
  position: absolute;
  content: "";
  transition: background 250ms;
}

.button_style::before {
  left: 0;
  bottom: var(--line-distance-bottom);
  width: 100%;
  height: var(--line-stroke-horizontal);
  background: var(--line-color-horizontal);
}

.button_style::after {
  right: var(--line-distance-right);
  top: 0;
  height: 100%;
  width: var(--line-stroke-vertical);
  background: var(--line-color-vertical);
}

<button class="button_style"></button>

<button class="button_style" style="--line-distance: 35px; --background: purple; --line-hover: white"></button>

<button class="button_style" style="--line-distance-bottom: 10px; --line-distance-right: 65px; --background: hsl(348, 100%, 61%); --line-color: hsl(48, 100%, 67%); --line-hover: white"></button>

<button class="button_style" style="--line-distance-bottom: 20px; --line-distance-right: 20px; --background: orange; --line-stroke-horizontal: 25px; --line-hover: orange; --background-hover: black"></button>

<div style="margin: 1em 0">
  <button class="button_style" style="--size: 40px"></button>
</div>