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

feat: Button with icon

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-21 08:39:59 +07:00
parent bb0403f0fd
commit 3b15c786cf
7 changed files with 70 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
contents/_includes/patterns/button-with-icon.njk Normal file
View File

@@ -0,0 +1,4 @@
<button class="button-with-icon">
{% circle "md" %}
<div class="button-with-icon__label">{% lines "hor", 5 %}</div>
</button>

40
contents/button-with-icon.md Normal file
View File

@@ -0,0 +1,40 @@
---
layout: layouts/post.njk
title: Button with icon
description: Create an icon button with CSS flexbox
keywords: css flexbox, css icon button
---
## HTML
```html
<button class="button-with-icon">
<!-- Icon -->
...
<!-- Label -->
<div class="button-with-icon__label">
...
</div>
</button>
```
## CSS
```css
.button-with-icon {
/* Center the content */
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}
.button-with-icon__label {
margin-left: 0.5rem;
}
```
{% demo %}
{% include "patterns/button-with-icon.njk" %}
{% enddemo %}

7
contents/index.njk
View File

@@ -84,5 +84,12 @@ eleventyExcludeFromCollections: true
</div> </div>
</div> </div>
<div class="category">
<h2 class="category__name">Input</h2>
<div class="category__posts">
{% pattern "Button with icon" %}{% include "patterns/button-with-icon.njk" %}{% endpattern %}
</div>
</div>
{% include "follow.njk" %} {% include "follow.njk" %}
</div> </div>

73
pages/button-with-icon/index.tsx
View File

@@ -1,73 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<PatternLayout pattern={Pattern.ButtonWithIcon}>
<Head>
<meta name="description" content="Create an icon button with CSS flexbox" />
<meta name="og:description" content="Create an icon button with CSS flexbox" />
<meta name="twitter:description" content="Create an icon button with CSS flexbox" />
<meta name="keywords" content="css flexbox, css icon button" />
</Head>
<BrowserFrame
html={`
<button class="button">
<!-- Icon -->
...
<!-- Label -->
...
</button>
`}
css={`
.button {
/* Center the content */
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '256px' }}>
<button
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '8px',
display: 'flex',
height: '64px',
padding: '8px',
width: '100%',
}}
>
<div style={{ marginRight: '8px' }}>
<Circle size={32} />
</div>
<Rectangle />
</button>
</div>
</div>
</BrowserFrame>
</PatternLayout>
);
};
export default Details;

40
patterns/button-with-icon/Cover.tsx
View File

@@ -1,40 +0,0 @@
import * as React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
padding: '8px',
width: '100%',
}}
>
<div style={{ marginRight: '4px' }}>
<Circle />
</div>
<Rectangle />
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

@@ -16,6 +16,7 @@
@import './patterns/avatar'; @import './patterns/avatar';
@import './patterns/avatar-list'; @import './patterns/avatar-list';
@import './patterns/badge'; @import './patterns/badge';
@import './patterns/button-with-icon';
@import './patterns/card'; @import './patterns/card';
@import './patterns/centering'; @import './patterns/centering';
@import './patterns/close-button'; @import './patterns/close-button';

18
styles/patterns/_button-with-icon.scss Normal file
View File

@@ -0,0 +1,18 @@
.button-with-icon {
/* Center the content */
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
/* Demo */
background: #fff;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
width: 8rem;
}
.button-with-icon__label {
flex: 1;
margin-left: 0.5rem;
}