我想给字体真棒的Facebook图标上色。如果我这样做background-color:
body {
font-size: 5em;
background: #555
}
.fa-facebook-square {
color: blue;
background-color: #fff;
}Run Code Online (Sandbox Code Playgroud)
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-facebook-square"></i>Run Code Online (Sandbox Code Playgroud)
它在边缘周围增加了白色,并且看起来不太好。是否有一个简单的解决方案,以一种很好的方式将图标中的“ f”仅着色(以便边缘周围的颜色保持透明)?
谢谢
我正在使用 html fileinput 使用 reactjs 上传文件,但是一旦我上传了一个文件,我就无法调用该函数来上传另一个文件,当然除非我刷新页面。
我的代码的简化版本是:
class Matrice extends React.Component {
constructor(props) {
super(props);
this.fileInput = null;
}
uploadQuestion = async e => {
console.log("uploading question");
if (e.target.files[0]) {
const form = new FormData();
let type;
if (e.target.files[0].type == "image/jpeg") type = ".jpg";
if (e.target.files[0].type == "image/png") type = ".png";
if (e.target.files[0].type == "image/gif") type = ".gif";
// const fileName = this.props.current + type;
form.append("files", e.target.files[0]); //filename
form.append("ref", "exam"); // model
form.append("refId", this.props.match.params.id); // id
form.append("field", "media"); // name …Run Code Online (Sandbox Code Playgroud) 我将一个按钮限制在屏幕底部,但不幸的是,屏幕底部边框和按钮底部边框之间有一个小间隙:
我的 XML:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/navigationTabs"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_constraintTop_toTopOf="parent"
app:tabMinWidth="100dp"
app:tabRippleColor="@null"
/>
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="BUTTON"
android:layout_margin="0dp"
app:layout_constraintBottom_toBottomOf="parent"/>
<LinearLayout
android:id="@+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@+id/navigationTabs" />
</androidx.constraintlayout.widget.ConstraintLayout>
Run Code Online (Sandbox Code Playgroud)
造成这种差距的原因是什么?我怎样才能摆脱它?
我用 Bootstrap 创建了一个简单的导航菜单。它在纯 javascript 中运行良好,但是在将其调整为 react 时,汉堡包图标不起作用(单击时没有任何反应)。我安装了引导程序
npm install --save bootstrap
Run Code Online (Sandbox Code Playgroud)
然后将 bootstrap css 添加到 public 文件夹中的 index.html 中:
link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
Run Code Online (Sandbox Code Playgroud)
我的jsx如下:
<nav className="navbar navbar-expand-sm navbar-dark bg-dark">
<div className="container">
<button className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span className="navbar-toggler-icon"></span></button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link to="/app/portfolio" className="nav-link">PORTFOLIO</Link>
</li>
<li className="nav-item">
<Link to="/app/about" className="nav-link">ABOUT</Link>
</li>
<li className="nav-item">
<Link to="#create-head-section" className="nav-link" style={{fontStyle: 'italic'}}>Personal art</Link>
</li>
<li className="nav-item">
<Link to="#share-head-section" className="nav-link">CONTACT</Link>
</li>
</ul>
</div>
</div>
</nav>
Run Code Online (Sandbox Code Playgroud)
同样,除了汉堡包图标不起作用外,一切看起来都很好。
当我手动编写突变查询(在 graphql 插件中)时,它正在工作:
mutation {
createExam(input: {
data: {
name: "myName"
desription: "ggg"
questions: [{gf: "hello"}]
time: 2
subjects: ["5c468e2d61670b25b46ccdfe"]
}
}) {
exam {
name
desription
time
}
}
}
Run Code Online (Sandbox Code Playgroud)
但是如果我编码它并传递完全相同的数组,我会得到一个完全相同对象的数组,我得到 [null, null]
let parsedQuestion = [{gf: "hello"}];
const response = await strapi.request('POST', '/graphql', {
data: {
query: `mutation {
createExam(input: {
data: {
name: "` + examInfo.newExamName + `"
desription: "` + examInfo.newExamDescription + `"
time: ` + Number(examInfo.newExamTime) + `,
questions: `+ parsedQuestion + `,
subjects: ["` …Run Code Online (Sandbox Code Playgroud) 我在前面使用 React 构建了一个项目,在后面使用 Strapi(基于 Node.js)构建了一个项目。
在客户端,我试图像这样访问我的 api url:
const apiUrl = process.env.API_URL || 'http://localhost:1337'
const strapi = new Strapi(apiUrl);
Run Code Online (Sandbox Code Playgroud)
但是 process.env.API_URL 是未定义的。如果我记录 process.env,我得到的只是一个包含以下内容的对象:
NODE_ENV: "development"
PUBLIC_URL: ""
Run Code Online (Sandbox Code Playgroud)
如何访问我的 api_url ?我猜有一个我应该自己定义 API_URL 的文件?
我正在学习变基,并看到了在功能分支上进行变基然后将其合并到主分支中的工作流程(作为示例):
git checkout feature
git rebase master
git checkout master
git merge feature
Run Code Online (Sandbox Code Playgroud)
然而,我看到最后一个命令的另一个类似选项是(而不是“git merge feature”):
git rebase feature
Run Code Online (Sandbox Code Playgroud)
在这种情况下,最后一部分有何不同?结果不会是与 master 之上的功能提交相同的线性时间线吗?
我想要一个自定义按钮来选择接收类型属性:
export interface ButtonProps {
children: React.ReactNode;
onClick?: (e: React.MouseEvent<HTMLElement>) => void;
type: ??
}
export const Button: React.FunctionComponent<ButtonProps> = ({ children, ...buttonProps }) => {
return <StyledButton {...buttonProps}>{children}</StyledButton>;
};
export default Button;
Run Code Online (Sandbox Code Playgroud)
与正在运行的“onClick”相同。我尝试填写的任何类型,它仍然会引发错误。type 属性的正确类型是什么?
我用来flat()计算嵌套数组内空或未定义项目的数量。
[[undefined, 4], [4]]
Run Code Online (Sandbox Code Playgroud)
flat在此数组上使用将返回 3 个项目:
然而在这个数组上:
[[], [], []]
Run Code Online (Sandbox Code Playgroud)
使用flat将返回一个空数组。
有没有办法使用它来返回 3 个未定义的项目?
我正在使用标准的 jQuery 上传图片,我希望将其用作标题的背景图片。Background-image 应该接收 'url' 而不是 'src' 属性,那么还有可能获得吗?
jQuery代码:
function uploadImage(input){
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#home-section').attr('background-image...???', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
Run Code Online (Sandbox Code Playgroud)
#home-section是提供给标题的 id。我知道我也可以使用常规的 img 标签,然后使用 z-indexes 使其像背景图像一样运行,但这是唯一的选择吗?
我有一个选择下拉菜单:
<select onChange={(e)=> console.log(e.target.id)} id="cars" name="carlist" form="carform" >
<option id="a" value="volvo">
Volvo
</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>Run Code Online (Sandbox Code Playgroud)
我想a在从下拉列表中选择“volvo”时获取ID,从而获取选项的ID ,我该如何实现?
我尝试获取 id 的原因是因为此下拉列表可以有多个具有相同名称的选项(它们将用一条线分隔)
javascript ×4
reactjs ×4
android ×2
html ×2
strapi ×2
css ×1
css3 ×1
file-upload ×1
filereader ×1
font-awesome ×1
git ×1
git-branch ×1
git-merge ×1
git-rebase ×1
google-play ×1
graphql ×1
jquery ×1
json ×1
node.js ×1
responsive ×1
typescript ×1