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

feat: Breadcrumb

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-21 14:44:30 +07:00
parent d166d682ea
commit 638f0c0df0
7 changed files with 81 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
contents/_includes/covers/breadcrumb.njk Normal file
View File

@@ -0,0 +1,6 @@
<div class="breadcrumb">
<div class="breadcrumb__item">A</div>
<div class="breadcrumb__item">B</div>
<div class="breadcrumb__item">C</div>
<div class="breadcrumb__item">D</div>
</div>

47
contents/breadcrumb.md Normal file
View File

@@ -0,0 +1,47 @@
---
layout: layouts/post.njk
title: Breadcrumb
description: Create a breadcrumb with CSS flexbox
keywords: css breadcrumb, css flexbox
---
## HTML
```html
<div class="breadcrumb">
<!-- Breadcrumb item -->
<div class="breadcrumb__item">...</div>
<!-- Repeat other items -->
...
</div>
```
## CSS
```css
.breadcrumb {
/* Content is centered vertically */
align-items: center;
display: flex;
}
.breadcrumb__item {
margin: 0 0.5rem;
/* Used to position the separator between items */
position: relative;
}
.breadcrumb__item:not(:last-child)::after {
/* Absolute position */
position: absolute;
right: 0;
top: 0;
transform: translate(0.5rem, 0px);
content: '/';
}
```
{% demo %}{% include "covers/breadcrumb.njk" %}{% enddemo %}

7
contents/index.njk
View File

@@ -122,5 +122,12 @@ eleventyExcludeFromCollections: true
</div>
</div>
<div class="category">
<h2 class="category__name">Navigation</h2>
<div class="category__posts">
{% pattern "Breadcrumb" %}{% include "covers/breadcrumb.njk" %}{% endpattern %}
</div>
</div>
{% include "follow.njk" %}
</div>

76
pages/breadcrumb/index.tsx
View File

@@ -1,76 +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 Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<PatternLayout pattern={Pattern.Breadcrumb}>
<Head>
<meta name="description" content="Create a breadcrumb with CSS flexbox" />
<meta name="og:description" content="Create a breadcrumb with CSS flexbox" />
<meta name="twitter:description" content="Create a breadcrumb with CSS flexbox" />
<meta name="keywords" content="css breadcrumb, css flexbox" />
</Head>
<BrowserFrame
html={`
<div class="breadcrumb">
<!-- Breadcrumb item -->
<a>...</a>
<!-- Separator -->
<div class="breadcrumb__separator">/</div>
<!-- Repeated items and separators -->
...
</div>
`}
css={`
.breadcrumb {
/* Content is centered vertically */
align-items: center;
display: flex;
}
.breadcrumb__separator {
margin: 0 8px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ alignItems: 'center', display: 'flex' }}>
<div style={{ width: '128px' }}>
<Rectangle height={16} />
</div>
<div style={{ color: '#d1d5db', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '32px' }}>
<Rectangle height={16} />
</div>
<div style={{ color: '#d1d5db', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '64px' }}>
<Rectangle height={16} />
</div>
<div style={{ color: '#d1d5db', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '32px' }}>
<Rectangle height={16} />
</div>
</div>
</div>
</BrowserFrame>
</PatternLayout>
);
};
export default Details;

50
patterns/breadcrumb/Cover.tsx
View File

@@ -1,50 +0,0 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
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',
display: 'flex',
height: '32px',
justifyContent: 'center',
width: '80%',
}}
>
<div style={{ width: '20%' }}>
<Rectangle />
</div>
<div style={{ color: '#000', margin: '0 4px' }}>/</div>
<div style={{ width: '20%' }}>
<Rectangle />
</div>
<div style={{ color: '#000', margin: '0 4px' }}>/</div>
<div style={{ width: '20%' }}>
<Rectangle />
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

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

20
styles/patterns/_breadcrumb.scss Normal file
View File

@@ -0,0 +1,20 @@
.breadcrumb {
/* Content is centered vertically */
align-items: center;
display: flex;
}
.breadcrumb__item {
margin: 0 0.5rem;
position: relative;
}
.breadcrumb__item:not(:last-child)::after {
/* Absolute position */
position: absolute;
right: 0;
top: 0;
transform: translate(0.5rem, 0px);
content: '/';
}