Skip to content

Commit

Permalink
Merge pull request #587 from oceanbase/zhuyue-dev-master
Browse files Browse the repository at this point in the history
improve(design): Breadcrumb style
  • Loading branch information
dengfuping authored May 10, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 32c8dc7 + 0a43641 commit a8abb1f
Showing 7 changed files with 128 additions and 1 deletion.
4 changes: 4 additions & 0 deletions .dumirc.ts
Original file line number Diff line number Diff line change
@@ -124,6 +124,10 @@ export default defineConfig({
{ title: 'Typography 排版', link: '/components/typography' },
],
},
{
title: '导航',
children: [{ title: 'Breadcrumb 面包屑', link: '/components/breadcrumb' }],
},
{
title: '布局',
children: [
22 changes: 22 additions & 0 deletions packages/design/src/breadcrumb/demo/basic.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react';
import { Breadcrumb } from '@oceanbase/design';

const App: React.FC = () => (
<Breadcrumb
items={[
{
href: '',
title: 'User',
},
{
href: '',
title: 'User List',
},
{
title: 'User Detail',
},
]}
/>
);

export default App;
28 changes: 28 additions & 0 deletions packages/design/src/breadcrumb/demo/icon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import { Breadcrumb } from '@oceanbase/design';
import { UserOutlined } from '@oceanbase/icons';

const App: React.FC = () => (
<Breadcrumb
items={[
{
href: '',
title: (
<>
<UserOutlined />
<span>User</span>
</>
),
},
{
href: '',
title: 'User List',
},
{
title: 'User Detail',
},
]}
/>
);

export default App;
45 changes: 45 additions & 0 deletions packages/design/src/breadcrumb/demo/menu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React, { useState } from 'react';
import { Breadcrumb } from '@oceanbase/design';

const App: React.FC = () => {
const [selectedKey, setSelectedKey] = useState('1');
const menuItems = [
{
key: '1',
label: 'Jackson',
},
{
key: '2',
label: 'John',
},
{
key: '3',
label: 'Lucy',
},
];
return (
<Breadcrumb
items={[
{
href: '',
title: 'User',
},
{
title: 'User List',
},
{
title: menuItems.find(item => item.key === selectedKey).label,
menu: {
items: menuItems,
selectedKeys: [selectedKey],
onClick: ({ key }) => {
setSelectedKey(key);
},
},
},
]}
/>
);
};

export default App;
22 changes: 22 additions & 0 deletions packages/design/src/breadcrumb/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
---
title: Breadcrumb 面包屑
nav:
title: 基础组件
path: /components
demo:
cols: 2
---

- 🔥 完全继承 antd [Breadcrumb](https://ant.design/components/breadcrumb-cn) 的能力和 API,可无缝切换。
- 💄 定制主题和样式,符合 OceanBase Design 设计规范。

## 代码演示

<!-- prettier-ignore -->
<code src="./demo/basic.tsx" title="基本"></code>
<code src="./demo/icon.tsx" title="带图标"></code>
<code src="./demo/menu.tsx" title="带下拉菜单"></code>

## API

- 详见 antd Breadcrumb 文档: https://ant.design/components/breadcrumb-cn
2 changes: 1 addition & 1 deletion packages/design/src/cascader/index.md
Original file line number Diff line number Diff line change
@@ -18,4 +18,4 @@ demo:

## API

- 详见 antd InputNumber 文档: https://ant.design/components/input-number-cn
- 详见 antd Cascader 文档: https://ant.design/components/cascader-cn
6 changes: 6 additions & 0 deletions packages/design/src/theme/default.ts
Original file line number Diff line number Diff line change
@@ -81,6 +81,12 @@ const defaultTheme: ThemeConfig = {
wireframe: false,
},
components: {
Breadcrumb: {
fontSize: 12,
// @ts-ignore
// fontHeight is internal token
fontHeight: 20,
},
InputNumber: {
handleVisible: true,
},

0 comments on commit a8abb1f

Please sign in to comment.