mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-09-08 21:30:50 +02:00
Code Issues Releases Wiki Activity

feat: Input addon

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-21 09:36:24 +07:00
parent 203c6f299c
commit f6f295fb72
8 changed files with 129 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
contents/_includes/patterns/input-addon.njk Normal file
View File

@@ -0,0 +1,9 @@
<div class="input-addon">
<div class="input-addon__addon input-addon__addon--prepended">{% circle "md" %}</div>
<input type="text" class="input-addon__input" />
</div>
<div class="input-addon">
<input type="text" class="input-addon__input" />
<div class="input-addon__addon input-addon__addon--appended">{% circle "md" %}</div>
</div>

1
contents/index.njk
View File

@@ -91,6 +91,7 @@ eleventyExcludeFromCollections: true
{% pattern "Chip" %}{% include "patterns/chip.njk" %}{% endpattern %}
{% pattern "Custom checkbox button" %}{% include "patterns/custom-checkbox-button.njk" %}{% endpattern %}
{% pattern "Custom radio button" %}{% include "patterns/custom-radio-button.njk" %}{% endpattern %}
{% pattern "Input addon" %}{% include "patterns/input-addon.njk" %}{% endpattern %}
</div>
</div>

81
contents/input-addon.md Normal file
View File

@@ -0,0 +1,81 @@
---
layout: layouts/post.njk
title: Input addon
description: Create an input add-on with CSS flexbox
keywords: css flexbox, css input add-on
---
## HTML
```html
<!-- Add-on prepended -->
<div class="input-addon">
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--prepended">
...
</div>
<!-- Input -->
<input type="text" class="input-addon__input" />
</div>
<!-- Add-on appended -->
<div class="input-addon">
<!-- Input -->
<input type="text" class="input-addon__input" />
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--appended">
...
</div>
</div>
<!-- Appended and prepended add-ons -->
<div class="input-addon">
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--prepended">
...
</div>
<!-- Input -->
<input type="text" class="input-addon__input" />
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--appended">
...
</div>
</div>
```
## CSS
```css
.input-addon {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
display: flex;
}
.input-addon__input {
border: none;
/* Take the remaining width */
flex: 1;
}
.input-addon__addon {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.input-addon__addon--prepended {
border-right: 1px solid #d1d5db;
}
.input-addon__addon--appended {
border-left: 1px solid #d1d5db;
}
```
{% demo %}{% include "patterns/input-addon.njk" %}{% enddemo %}