andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed: Indentation Issue

Browse Source
This commit is contained in:
Praveen Bisht
2019-10-02 12:53:34 +05:30
committed by GitHub
parent c105ff1247
commit e3fee26203
1 changed files with 77 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
snippets/TagInput.md
View File

@ -14,102 +14,103 @@ Renders an input field to add tags.
```css
.tag-input {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
min-height: 48px;
width: 480px;
padding: 0 8px;
border: 1px solid rgb(214, 216, 218);
border-radius: 6px;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
min-height: 48px;
width: 480px;
padding: 0 8px;
border: 1px solid rgb(214, 216, 218);
border-radius: 6px;
}
.tag-input input {
flex: 1;
border: none;
height: 46px;
font-size: 14px;
padding: 4px 0 0 0;
&:focus {
outline: transparent;
}
flex: 1;
border: none;
height: 46px;
font-size: 14px;
padding: 4px 0 0;
&:focus {
outline: transparent;
}
}
#tags {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 8px 0 0 0;
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 8px 0 0;
}
.tag {
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;
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;
}
.tag span {
margin-top: 3px;
margin-top: 3px;
}
.tag i {
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 14px;
margin-left: 8px;
color: #0052cc;
border-radius: 50%;
background: #fff;
cursor: pointer;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 14px;
margin-left: 8px;
color: #0052cc;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
```
```jsx
function TagInput() {
const [tags, setTags] = React.useState(['NodeJs', 'MongoDB'])
const removeTags = indexToRemove => {
setTags([...tags.filter((_, index) => index !== indexToRemove)])
}
const addTags = event => {
if (event.target.value !== '') {
setTags([...tags, event.target.value])
event.target.value = ''
}
}
return (
<div className='tags-input'>
<ul id='tags'
{tags.map((tag, index) => (
<li key={index} className='tag'
<span>{tag}</span>
<i
onClick={() => removeTags(index)}
>
x
</i>
</li>
))}
</ul>
<input
type='text'
onKeyUp={event =>
event.key === 'Enter' ? addTags(event) : null
}
placeholder='Press enter to add tags'
/>
</div>
)
const [tags, setTags] = React.useState(['NodeJs', 'MongoDB'])
const removeTags = indexToRemove => {
setTags([...tags.filter((_, index) => index !== indexToRemove)])
}
const addTags = event => {
if (event.target.value !== '') {
setTags([...tags, event.target.value])
event.target.value = ''
}
}
return (
<div className='tags-input'>
<ul id='tags'
{tags.map((tag, index) => (
<li key={index} className='tag'
<span>{tag}</span>
<i
onClick={() => removeTags(index)}
>
x
</i>
</li>
))}
</ul>
<input
type='text'
onKeyUp={event =>
event.key === 'Enter' ? addTags(event) : null
}
placeholder='Press enter to add tags'
/>
</div>
)
}
```