websemantics / awesome-ant-design Goto Github PK

如图所示，我将 layout 的代码分离成 LoSider.vue LoContent.vue LoFooter.vue LoHeader.vue 4个文件。

但是在渲染以后出现了三个 LoFooter。

Message组件提示信息可以换行吗

我需要使用 nz-select 的 nz-option 时, 将 enum 枚举出来, 放在 nzValue / nzLabel 上, 但是 nzLabel 我想显示中文, 比方:

export enum MyType { Public = 0, Private = 1 } // 希望能在 Label 显示为 "公开, 私有"

<nz-option *ngFor="let x of this.MyTypeList" [nzValue]="x" [nzLabel]="this.Convert(x)">
<nz-option *ngFor="let x of this.MyTypeList" [nzValue]="x">{{ x | myTypePipe }}

ngFor 都没问题, nzValue 也正确 (0, 1). 但是 nzLabel 用了以上两种方法都无法正确.
其中第一种方式 -> 另外做一个 Convert function, 貌似根本编译不过, (试过用 member funciton 也试过用 static function 都不行)
第二种方法能过 但是下拉选单中看不到 Label. (产生的 option 的数量正确, 但是就是看不见. 貌似所有的 Label 都是空字符串, 但事实上在 pipe 中用 console.log 检查过都有正确转换)

再补充一点, 若不考虑转换成中文, nz-option 的 nzValue: 0, 1 以及 nz Label 显示 Public, Private 都没问题
若是定义成 export enum MyType { Public = '公开', Private = '私有' } 也能显示出中文, 但是 value 就不再是 0/1. 而且与数据库相关, 我需要保持使用的都是 0/1 以及 Public/Private

哪位大佬知道这个示例网站（https://preview.pro.ant.design/）的源码在哪里？跪求链接

I am sorry about this, React Grid is deprecated, I mark this component as deprecated in both npm and github.

Hello,

I am using ANT Designs Select...Option Multiple in my Next.js - a React.js Framework-based Project. but I'm facing an issue that I have added Select...Option Tag in a Bootstrap Modal, and when I type the option in Select Inputbox, the Suggestions are being shown under the modal, which is not visible on the screen/user.

anyone can tell me how to solve this problem, please.

please help me.

Hello, there anybody combine Dnd and editable row?

Hello, I am looking into Ant Design now with very little knowledge of the ecosystem so this repo is a great resource. Thanks for developing it!

I noticed that some of the articles were from a few years ago, and anyone looking into Ant and comes across this project will probably want to read an article in that list.

I will look for some newer articles written in 2018 and post them if they seem like good reads. If someone else knows of some, then please update that list. In my opinion, it is the most important section for a newbie trying to evaluate the Ant Design project.

写法是这样的：https://codesandbox.io/embed/antd-reproduction-template-pyg3j

报错如下：
(node:99704) UnhandledPromiseRejectionWarning: D:\学习\React\EDS\node_modules\antd\es\locale\zh_CN.js:1
import Pagination from "rc-pagination/es/locale/zh_CN";
^^^^^^^^^^

SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Module._compile (D:\学习\React\EDS\node_modules\pirates\lib\index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Object.newLoader [as .js] (D:\学习\React\EDS\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (D:\学习\React\EDS\src\ssr/App.js:5:1)
(node:99704) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:99704) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

ctrl+点击可以跳转到文件，路径是没问题的，再说这事antd内部引用的啊，也不是babel的问题，其他的引用编译就没问题。。

How can i put element between Menu.item when i work with version >=4.20.0

For example, in older version i can do this
"<*Menu >"
"<*Menu.Item >Home</Menu.Item>"
"<h1 >List</h1>"
"<Menu.Item >Search</Menu.item>"
"</Menu >"

in new version if i create a list and do " items={items}" in Menu component, how can i put element h1 between Menu Item

Hi there,

I have used a table feature from the antd with the latest version in react js with nextjs.

"antd": "^5.2.1",
"react": "17.0.2",
"next": "10.2.3",

import "antd/dist/reset.css"
import { Table } from 'antd';

While creating the build it is giving me tsc related issues like stated below in node_modules and I have recreated node_modules again (so you will see node_modules_old folder) -
`

I am sharing the tsconfig.json file with the current version below -

Can anyone please suggest if this is a known issue or am I missing something here?

Thanks in advance!

I am allrady set my root like this, the root warrning disapear

root.render(
  <Provider store={store}>
    <HashRouter>
      <App />
    </HashRouter>
  </Provider>
)

But when I use Antd ,this has apear again
react_devtools_backend.js:3973 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
    at Home (http://localhost:3000/static/js/bundle.js:3979:63)
    at Routes (http://localhost:3000/static/js/bundle.js:94030:5)
    at main
    at Basic (http://localhost:3000/static/js/bundle.js:21683:25)
    at Adapter (http://localhost:3000/static/js/bundle.js:21666:37)
    at section
    at BasicLayout (http://localhost:3000/static/js/bundle.js:21698:34)
    at Adapter (http://localhost:3000/static/js/bundle.js:21666:37)
    at section
    at BasicLayout (http://localhost:3000/static/js/bundle.js:21698:34)
    at Adapter (http://localhost:3000/static/js/bundle.js:21666:37)
    at App (http://localhost:3000/static/js/bundle.js:703:63)
    at Router (http://localhost:3000/static/js/bundle.js:93963:15)
    at HashRouter (http://localhost:3000/static/js/bundle.js:93472:5)
    at Provider (http://localhost:3000/static/js/bundle.js:90613:20)

在使用 antd4.16.1版本 Radio 组件时 出现了 ant-radio-wrapper 样式里面 white-space 属性丢失的情况，项目是前后端未分离的项目，单独运行前端就不会出现这种情况，用docker运行项目就会。

Hi, I use Antd all of the time and I am currently working on a boilerplate to use in my projects https://github.com/elmarti/meteor-antd-boilerplate An example is deployed to Heroku (https://antdmeteor.herokuapp.com) , I'm still working on getting 100% test coverage and more UI stuff, but the key Meteor quirks have been dealt with.

在ModalForm中加了一个EditableTable ，给EditableTable设置了一个比较大的maxLength,结果加到10行的时候，新加的行就变成灰色的了，加不了了，请问有没有大佬知道是什么原因呢？是受限于ModalForm的高度吗？

[email protected] lint:js /**/adp-demo
eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src

src/pages/account/settings/index.tsx:57:6
⚠ 57:6 React Hook useLayoutEffect has a missing dependency: resize. Either include it or remove the dependency array. Mutable values like dom.current aren't valid dependencies because mutating them doesn't re-render the component. react-hooks/exhaustive-deps

src/pages/account/center/_mock.ts:1:1
✖ 1:1 Definition for rule import/no-extraneous-dependencies was not found. import/no-extraneous-dependencies

src/pages/account/settings/_mock.ts:1:1
✖ 1:1 Definition for rule import/no-extraneous-dependencies was not found. import/no-extraneous-dependencies

src/pages/form/advanced-form/_mock.ts:1:1
✖ 1:1 Definition for rule import/no-extraneous-dependencies was not found. import/no-extraneous-dependencies

src/pages/form/basic-form/_mock.ts:1:1
✖ 1:1 Definition for rule import/no-extraneous-dependencies was not found. import/no-extraneous-dependencies

src/pages/form/step-form/_mock.ts:1:1
✖ 1:1 Definition for rule import/no-extraneous-dependencies was not found. import/no-extraneous-dependencies

src/pages/list/basic-list/_mock.ts:1:1
✖ 1:1 Definition for rule import/no-extraneous-dependencies was not found. import/no-extraneous-dependencies

src/pages/list/card-list/_mock.ts:1:1
✖ 1:1 Definition for rule import/no-extraneous-dependencies was not found. import/no-extraneous-dependencies

src/pages/list/search/applications/_mock.ts:1:1
✖ 1:1 Definition for rule import/no-extraneous-dependencies was not found. import/no-extraneous-dependencies

src/pages/list/search/articles/_mock.ts:1:1
✖ 1:1 Definition for rule import/no-extraneous-dependencies was not found. import/no-extraneous-dependencies

src/pages/list/table-list/_mock.ts:1:1
✖ 1:1 Definition for rule import/no-extraneous-dependencies was not found. import/no-extraneous-dependencies

src/pages/user/register/_mock.ts:1:1
✖ 1:1 Definition for rule import/no-extraneous-dependencies was not found.

I am trying to render an InputNumber component via antd with rule required AND validate status mechanism. my code:
<Form.Item label='My Name' rules={[{ required: true }]} initialValue={someInitialValue} hasFeedback validateStatus={fieldValidationStatus} help={fieldValidationMessage} name='my_name' ><InputNumber value={fieldValue} onChange={(e) => {setFieldValue(e)}} onBlur={(e) => {handleOnBlurField(e.target.value)}} /></Form.Item>

The issue is that the required rule is just not working..if I remove the help property it will work but I want all of them works together.

I want to use the Link for the menus which have hash change as URL. When using Anchor from antd on Modal of antd, its actually closing the Modal. May be Link tries to re-render the webpage. Is there any way to prevent?

Drawer组件不兼容ie吗

May I shamelessly advocate my personal project, a Python library for creating And Design Pro interfaces (with pure python), to this beautiful list? ^_^

https://github.com/bigeyex/python-adminui

图片上传后，有查看和删除功能，删除前是否能弹出提示，以免误删除。

Hi,

i want to collapse all nodes in react tree when i clicked a button.

Thanks.

在preact + react-jsonschema-form的使用中，在‘ui:widget’的自定义组件中使用antd的任何一个组件，都会报错“Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'context')”

pagination = {false} 后 ，在有滚动条的情况下为什么thead跟tbody就对不齐

请问一下我在使用 antd 中 "antd": "^3.21.4" 版本的 message 组件，绑定了一个 button，在点击时触发 message，设置了 duration（单独设置/设置 global 都试过），但是我如果 ctrl s 时移动鼠标，或者在 button 中点击之后不移动鼠标，会导致设置的 duration 失效，message 长时间不消失，这个问题应该怎么去解决

请问有人也遇到过这个问题吗，antd版本为9.3.3，angular10

export const ModalConfirm = (props: Props) => {
  const {
    title,
    typeColor = 'info',
    cancelText = 'Huỷ',
    okText = 'Xác nhận',
    handleConfirm,
    content,
    okButtonProps,
    ...restProps
  } = props;

  return Modal.confirm({
    ...restProps,
    cancelText,
    className: `wrap-modal-confirm wrap-btn modal-${typeColor}`,
    title: title,
    content: content,
    centered: true,
    open: false,
    async onOk(): Promise<void> {
      await handleConfirm?.();
    },
    okText,
    okButtonProps: { ...okButtonProps, className: `btn-${typeColor} ` },
    cancelButtonProps: { className: `ant-btn-primary btn-grey` },
  });
};
export const InfoPopup = (props: Props) => ModalConfirm({ ...props, icon: <InfoCircleFilled />, typeColor: 'info' });
export const ErrorPopup = (props: Props) => ModalConfirm({ ...props, icon: <WarningFilled />, typeColor: 'error' });
export const WarningPopup = (props: Props) =>
  ModalConfirm({ ...props, icon: <ExclamationCircleFilled />, typeColor: 'primary' });
export const SuccessPopup = (props: Props) =>
  ModalConfirm({ ...props, icon: <CheckCircleFilled />, typeColor: 'success' });

use component

  const handleDeleteRole = () => {
            return ErrorPopup({
              title: 'Bạn có chắc chắn muốn xóa?',
              width: 480,
              okButtonProps: {
                htmlType: 'submit',
              },
              content: (
                <Form onFinish={SubmitDelete}>
                  <p>Thao tác thực hiện xoá vai trò này khỏi danh sách quản lý các vai trò.</p>
                  <p>vui lòng nhập lý do.</p>
                  <Form.Item name={'note'} rules={[{ required: true, message: 'Vui loại nhap lý do' }]}>
                    <TextArea
                      className="text-area-content"
                      autoSize={{ minRows: 6 }}
                      onChange={(e) => handleOnChangeNode(e.target.value)}
                      placeholder="Nhập lý do..."
                    />
                  </Form.Item>
                </Form>
              ),
              handleConfirm: () => SubmitDelete({ id: record?.id }),
            });
          };

上图是我发现在tab组件中有一个button元素，class名为.ant-tabs-nav-more，这个button元素的style在运行过程中一直变化，一会儿出现一会儿消失。
此时如果tab组件宽度设为fit-content或者auto，组件宽度就会一直变化。不想写死tab宽度，请问有什么解决办法吗

Does this project has all the credibility to be included?

https://github.com/maifeeulasad/react-pipeline

This is a deployment-ready boilerplate, using:

• React
• TS
• AntD
• Vite
• Tailwind

This can be a good push for the beginners, who want to run.

Ready to send a PR.

Hi, awesome "awesome" project ;) !

Umm.. Is there an antd electron boilerplate?

That would be nice to include too.

Or an idea for someone out there.

Thanks!

使用时代码如下：

使用的treeData数据格式如下：

控制台输出结果如下

请教一下这个bug产生的原因 0.0

https://github.com/dog-days/r2 seems to be deprecated. It is linked from the readme as a framework using antd. Maybe it should be removed?

用了ReuseTabs组件，在vs2022中页面标签排列方式是竖着的，怎么调整为横着显示？