Question

我正在尝试创建一个继续按钮，该按钮在悬停状态下显示向右箭头。我也希望箭头居中。

我尝试添加class CPictureCtrl : public CStatic { public: CPictureCtrl() {} ~CPictureCtrl() {} protected: virtual void PreSubclassWindow() { CStatic::PreSubclassWindow(); ModifyStyle(0, SS_OWNERDRAW); } virtual void DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct){} private: };

######Demo of running with three columns
val inputDFOne = spark.sql("select cast('John Smith' as string) as Name, cast('99' as long) as Age, cast('Bob Road' as string) as Address")
val stageOneRDDOne = inputDFOne.rdd
val stageTwoMapOne = stageOneRDDOne.map(x=> (x(0).toString, x(1).toString.toLong, x(2).toString))
val stageThreeDFOne = stageTwoMapOne.toDF(inputDFOne.columns:_*)
stageThreeDFOne.show(1,false)

######Demo of running with four columns
val inputDFTwo = spark.sql("select cast('John Smith' as string) as Name, cast('99' as long) as Age, cast('Bob Road' as string) as Address, cast('Sea-Land' as string) as State")
val stageOneRDDTwo = inputDFTwo.rdd
val stageTwoMapTwo = stageOneRDDTwo.map(x=> (x(0).toString, x(1).toString.toLong, x(2).toString, x(3).toString))
val stageThreeDFTwo = stageTwoMapTwo.toDF(inputDFTwo.columns:_*)
stageThreeDFTwo.show(1,false)

######Building the Statements to be used below
val stageCommandString = "x(0).toString, x(1).toString.toLong, x(2).toString, x(3).toString"
val stageCommandArray = Array("x(0).toString", "x(1).toString.toLong", "x(2).toString", "x(3).toString")

######This yields a single column that is just the command string in the DF
val stageMapAttempOne = stageOneRDDTwo.map(x=> (stageCommandString))
val stageDFAttemptOne = stageMapAttempOne.toDF()
stageDFAttemptOne.show(1,false)

######This errors with 'error: no `: _*' annotation allowed here'
val stageMapAttempTwo = stageOneRDDTwo.map(x=> (stageCommandArray:_*))
val stageDFAttemptTwo = stageMapAttempTwo.toDF()
stageDFAttemptTwo.show(1,false)

######This is a hard-code attempt however it yields only the elements of the array in four columns
val stageMapAttempThree = stageOneRDDTwo.map(x=> (stageCommandArray(0),stageCommandArray(1),stageCommandArray(2),stageCommandArray(3)))
val stageDFAttemptThree = stageMapAttempThree.toDF()
stageDFAttemptThree.show(1,false)

######This yields a single column that is just the command string in the DF
val stageMapAttempFour = stageOneRDDTwo.map(x=> (stageCommandArray))
val stageDFAttemptFour = stageMapAttempFour.toDF()
stageDFAttemptFour.show(1,false)

######This yields a single column that is just the command string in the DF
val stageMapAttempFive = stageOneRDDTwo.map(x=> stageCommandArray)
val stageDFAttemptFive = stageMapAttempFive.toDF()
stageDFttemptFive.show(1,false)

######This yields a single column that is just the command string in the DF with "()" on outside
val stageMapAttempSix = stageOneRDDTwo.map(x=> "(" + stageCommandString + ")")
val stageDFAttemptSix = stageMapAttempSix.toDF()
stageDFAttemptSix.show(1,false)

######This yields a single column that is just the command string in the DF with "()" on outside
val stageMapAttempSeven = stageOneRDDTwo.map(x=> "(x(0).toString, x(1).toString.toLong, x(2).toString, x(3).toString)")
val stageDFAttemptSeven = stageMapAttempSeven.toDF()
stageDFAttemptSeven.show(1,false)

######This is a hard-code attempt however it yields only the elements of the array in four columns
val stageMapAttempEight = stageOneRDDTwo.map(x=> ("x(0).toString", "x(1).toString.toLong", "x(2).toString", "x(3).toString"))
val stageDFAttemptEight = stageMapAttempEight.toDF()
stageDFAttemptEight.show(1,false)

.icon-arrow-right:before {content: "&rarr";}

我希望箭头处于悬停状态时位于按钮文本的右侧。我也希望箭头以按钮文字居中。

Answer 1

将伪元素变成所需的三角形：

orig_string = 'I am a string in python'

from textwrap import wrap

print(wrap(orig_string, 10))

这使用了令人敬畏的透明边框技巧，使元素框显示为三角形。更改边框宽度以更改三角形的大小，请注意带有颜色的边框的宽度是透明边的两倍。您可以使用这些值来微调您喜欢的三角形。

我还更改了您在按钮中放置文本的方式：

['I am a', 'string in', 'python']

通过这种方式使用行高，您可以确保您的文本将以任何字体大小垂直位于按钮的中心。

查看完整的工作示例：

.icon-arrow-right:before {
  margin-top: 21px;
  content: "";
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-left: 14px solid white;
  border-bottom: 7px solid transparent;
}

.btn {
  padding: 0 80px; /* padding on sides only */
  height: 64px; /* height of the button you want */
  line-height: 58px; /* same as height minus the border-top and border-bottom */
  border: 3px solid #fff;
}

Answer 2

我已将箭头top:50%;transform:translateY(-50%);垂直居中。我从.btn伪元素中删除了行高度和高度CSS，因为不需要它们。我刚刚使用了>作为箭头，但是您可以使用fontawesome之类的图标来获得漂亮的图标。

body {
  background: #00b894;
}

.btn {
  font-size: 14px;
  background: none;
  padding: 25px 80px;
  display: inline-block;
  margin: 15px 30px;
  position: relative;
  border: 3px solid #fff;
  color: #fff;
  overflow: hidden;
  transition: all 0.3s;
}


.btn:before {
  position: absolute;
  font-size: 125%;
  color: #fff;
  transition: all 0.3s;
  left: 130%;
  top:50%;
  transform:translateY(-50%);
}

.icon-arrow-right:before {
  content: ">";
}

.btn:hover:before {
  left: 80%;
}

<button class="btn icon-arrow-right">Continue</button>

Answer 3

只需扩展@BugsArePeopleToo的答案，即可使用borders和ans变换来保持OP想要的“>”形状。

body {
  background: #00b894;
}

.btn {
  font-size: 14px;
  background: none;
  padding: 0 80px; /* padding on sides only */
  height: 64px; /* height of the button you want */
  line-height: 58px; /* same as height minus the border-top and border-bottom */
  display: inline-block;
  margin: 15px 30px;
  position: relative;
  border: 3px solid #fff;
  color: #fff;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
}


.btn:before {
  position: absolute;
  height: 100%;
  font-size: 125%;
  line-height: 3.5;
  color: #fff;
  transition: all 0.3s;
  left: 130%;
  top: 0;
}

.icon-arrow-right:before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  position:absolute;
  top:50%;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  transform:translateY(-50%) rotate(45deg);
}

.btn:hover:before {
  left: 80%;
}

<button class="btn icon-arrow-right">Continue</button>

在CSS动画中使用向右箭头的最佳方法

3 个答案: