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

feat: Floating label

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-21 11:29:54 +07:00
parent 216febdb63
commit 31ee4ad4f0
7 changed files with 105 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
contents/_includes/patterns/floating-label.njk Normal file
View File

@@ -0,0 +1,4 @@
<div class="floating-label">
<input placeholder="Placeholder" class="floating-label__input" />
<label class="floating-label__label">Placeholder</label>
</div>

61
contents/floating-label.md Normal file
View File

@@ -0,0 +1,61 @@
---
layout: layouts/post.njk
title: Floating label
description: Create a floating label with CSS
keywords: css floating label, placeholder shown
---
## HTML
```html
<div class="floating-label">
<!-- The input -->
<input placeholder="Placeholder" class="floating-label__input" />
<!-- The label -->
<label class="floating-label__label">Placeholder</label>
</div>
```
## CSS
```css
.floating-label {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
position: relative;
}
.floating-label__input {
border: none;
padding: 0.5rem;
height: 100%;
}
/*
Show the label at desired position when the
placeholder of input isn't shown
*/
.floating-label__input:not(:placeholder-shown) + .floating-label__label {
background: #fff;
transform: translate(0, -200%);
opacity: 1;
}
.floating-label__label {
/* Position the label */
left: 1rem;
position: absolute;
top: 100%;
/* Hide it by default */
opacity: 0;
transition: all 200ms;
padding: 0 0.5rem;
}
```
Type something in the input to see how the label is shown up.
{% demo %}{% include "patterns/floating-label.njk" %}{% enddemo %}

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 "Floating label" %}{% include "patterns/floating-label.njk" %}{% endpattern %}
{% pattern "Input addon" %}{% include "patterns/input-addon.njk" %}{% endpattern %}
{% pattern "Radio switch" %}{% include "patterns/radio-switch.njk" %}{% endpattern %}
{% pattern "Rating" %}{% include "patterns/rating.njk" %}{% endpattern %}

106
pages/floating-label/index.tsx
View File

@@ -1,106 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import { Pattern } from '../../constants/Pattern';
const Details: React.FC<{}> = () => {
return (
<PatternLayout pattern={Pattern.FloatingLabel}>
<Head>
<meta name="description" content="Create a floating label with CSS" />
<meta name="og:description" content="Create a floating label with CSS" />
<meta name="twitter:description" content="Create a floating label with CSS" />
<meta name="keywords" content="css floating label, placeholder shown" />
</Head>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Type something in the input to see how the label is shown up.
</div>
<BrowserFrame
html={`
<div class="container">
<!-- The input -->
<input placeholder="Placeholder" class="container__input" />
<!-- The label -->
<label class="container__label">Placeholder</label>
</div>
`}
css={`
.container {
position: relative;
}
/*
Show the label at desired position when the
placeholder of input isn't shown
*/
.container__input:not(:placeholder-shown) + .container__label {
background: #fff;
transform: translate(0, -50%);
opacity: 1;
}
.container__label {
/* Position the label */
left: 8px;
position: absolute;
top: 0;
/* Hide it by default */
opacity: 0;
transition: all 200ms;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
className="p-floating-container"
style={{
border: '1px solid #d1d5db',
borderRadius: '4px',
padding: '0 1px',
position: 'relative',
width: '200px',
}}
>
<input
id="floating-label-input"
placeholder="Placeholder"
type="text"
style={{
borderColor: 'transparent',
padding: '8px',
width: '100%',
}}
/>
<label
htmlFor="floating-label-input"
style={{
left: '8px',
padding: '0 8px',
position: 'absolute',
top: 0,
transition: 'all 200ms',
}}
>
Placeholder
</label>
</div>
</div>
</BrowserFrame>
</PatternLayout>
);
};
export default Details;

45
patterns/floating-label/Cover.tsx
View File

@@ -1,45 +0,0 @@
import * as React from 'react';
import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid #d1d5db',
borderRadius: '4px',
height: '32px',
position: 'relative',
width: '100%',
}}
>
<div
style={{
backgroundColor: '#BBB',
height: '8px',
left: '8px',
padding: '0 8px',
position: 'absolute',
top: 0,
transform: 'translate(0, -50%)',
width: '40%',
}}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

@@ -38,6 +38,7 @@
@import './patterns/feature-list';
@import './patterns/fixed-at-corner';
@import './patterns/fixed-at-side';
@import './patterns/floating-label';
@import './patterns/folder-structure';
@import './patterns/full-background';
@import './patterns/initial-avatar';

38
styles/patterns/_floating-label.scss Normal file
View File

@@ -0,0 +1,38 @@
.floating-label {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
position: relative;
/* Demo */
padding: 0px 1px;
height: 2.5rem;
}
.floating-label__input {
border: none;
padding: 0.5rem;
height: 100%;
}
/*
Show the label at desired position when the
placeholder of input isn't shown
*/
.floating-label__input:not(:placeholder-shown) + .floating-label__label {
background: #fff;
transform: translate(0, -200%);
opacity: 1;
}
.floating-label__label {
/* Position the label */
left: 1rem;
position: absolute;
top: 100%;
/* Hide it by default */
opacity: 0;
transition: all 200ms;
padding: 0 0.5rem;
}