使用React构建的多标签添加输入控件

React based Add Tags widget

css, tag, widget

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1804
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const App = () => {
	const selectedTags = tags => {
		console.log(tags);
	};
	return (
		<div className="App">
			<TagsInput selectedTags={selectedTags} />
		</div>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Overpass");
* {
    box-sizing: border-box;
    font-family: "Overpass", sans-serif;
}
body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Overpass", sans-serif;
}
.tags-input {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    min-height: 48px;
    width: 480px;
    padding: 0 8px;
    border: 1px solid #d6d8da;
    border-radius: 6px;
}
.tags-input:focus-within {
    border: 1px solid #0052cc;
}
.tags-input ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 8px 0 0 0;
}
.tags-input ul li {
    width: auto;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 0 8px;
    font-size: 14px;
    list-style: none;
    border-radius: 6px;
    margin: 0 8px 8px 0;
    background: #0052cc;
}
.tags-input ul li span {
    margin-top: 3px;
}
.tags-input ul li i {
    font-size: 14px;
    margin-left: 8px;
    color: #0052cc;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.tags-input input {
    border: none;
    height: 46px;
    font-size: 14px;
    padding: 4px 0 0 0;
}
.tags-input input:focus {
    outline: transparent;
}

body{background: white;}

HTML

React based Add Tags widget

css, tag, widget

编辑器支持Emmet

快捷键

React based Add Tags widget

css, tag, widget

使用CSS3构建的React框架的图标

使用CSS3 placeholder-shown过滤器（选择器）实现的浮动输入框标签

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：