Git Product home page Git Product logo

alibabacloud-console-components's Introduction

@alicloud/console-components

console-components 是针对阿里云控制台场景的 React 组件库,基于Alibaba Fusion组件库实现。该项目的代号为Wind

Wind 是阿里云控制台视觉规范的实现者,帮助阿里内部以及生态伙伴的开发者,更快地编写的阿里云控制台应用,无需为视觉规范而困扰。在保障阿里云控制台的体验一致性的同时,降低用户开发成本。

使用指南

快速开始

最小使用示例

Edit wind-demo-basic

常见概念解释

请阅读常见概念

共建

  • 基础组件维护在aliyun/cloud-design仓库,与混合云、云效等组件库使用同一套工程体系和基础代码。
  • 业务组件维护在本仓库package/rc-*目录中。

详情请阅读贡献指南

alibabacloud-console-components's People

Contributors

alibaba-oss avatar boelroy avatar csr632 avatar fringey avatar pushiming avatar std4453 avatar webengineerli avatar yofine avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

alibabacloud-console-components's Issues

如何使用路由

请问如何使用applayout和路由系统?有没有案例?谢谢

SlidePanel应该支持用户指定mask的挂载节点

直接挂在在当前节点下面有很多局限性,比如会受到父节点overflow、z-index的影响。
默认还是保持现有行为,增加一个props.maskContainer。用户可以把body元素传给它。

目前弹层能力是SlidePanel自己实现的,未来如果使用Overlay组件来重构(提供弹层能力)就更好了。

React18 support

React18 have released for more then 1 year, React18 bring lots of awesome features. Please support React18 ~

重构rc-table

rc-table的答疑比较多,需要梳理一下table的场景,实现一个更加容易使用和扩展的表格组件。

  • 提高灵活性,覆盖更多的场景。减少答疑量。
  • 提供ts类型支持

在完全重构之前,提供一个.d.ts来提供ts支持。

下拉列表级联选择后无法动态清除内容

省份选择Zhejiang 城市会切换到hangzhou,但选择hubei后,城市下拉列表仍然展示hangzhou,参考fussion,选择省份后清除城市, setCityData([]),但没有效果。

demo地址:

fusion下拉列表级联没有问题:https://fusion-demo.alibaba-inc.com/demos/next/select

import React, { useState, useCallback } from 'react'
import { Select } from '@alicloud/console-components'
import styled from 'styled-components'

const provinceDataSource = ['Zhejiang', 'Hubei', 'Jiangsu']
const cityDataSource = {
Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
Hubei: ['Wuhan', 'Yichang', 'Jingzhou'],
Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
}

const SWrapper = styled.divbackground-color: #f8f8f8; padding: 16px; .next-select { margin-right: 10px; }

const Demo5 = () => {
const [cityData, setCityData] = useState([])
const [province, setProvince] = useState(undefined)
const [city, setCity] = useState(undefined)
const [disabled, setDisabled] = useState(true)

const handleProvinceChange = useCallback(value => {
const cities = cityDataSource[value]
setCityData([])
setCityData(cities)
setProvince(value)
setDisabled(!cities)
}, [])

const handleCityChange = useCallback(value => {
setCity(value)
}, [])

return (



)
}
export default Demo5

rc-truncate 去掉关闭按钮;优化换行方式;

tooltip去掉关闭按钮:
image

优化换行方式:

image

浏览器默认不会在单词中间换行,需要提供给用户设置tooltip内部样式的props,从而用户可以给tooltip设置cssword-break:all,在单词中间换行

拜托把官网好好做做。。太掉价了

只看了前两个组件,就一堆问题,瞬间没有继续看下去的想法了
animate组件demo点了都没反应
徽标组件一堆bug
气泡提示出来了还随着页面滚动。。。
没眼看。。。
代码还没看,但是从官网来说,这轮子造的不好
image
image
image

chrome80出现Intl.DateTimeFormat的bug,intl需要改变实现

new Intl.DateTimeFormat('en-US', {
  hour12: false,
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hourCycle: 'h12'
}).format(1583079993000)

chrome79:
image
chrome80:
image

相关帖子:https://support.google.com/chrome/thread/29828561?hl=en

我们的intl.date使用了Intl.DateTimeFormat这个api,导致chrome80用户会把0点展示成24点。intl.date需要改为使用moment来实现这个功能,顺便整合以前内部的wind-rc-datetime组件。

中文内容不会自动根据内容调整列宽度,但是英文内容可以

import React from 'react'
import { Table } from '@alicloud/console-components'

const dataSource = () => {
const result = []
for (let i = 0; i < 5; i++) {
result.push({
title: {
name: aaa ${3 + i}.0 你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**,
},
id: 100306660940 + i,
time: 200000000000000000000 + i,
})
}
return result
}
const render = (value, index, record) => {
return Remove({record.id})
}

const Demo1 = () => (

<Table.Column title="Time" dataIndex="time" />
<Table.Column cell={render} />
)

export default Demo1

中文内容demo地址

import React from "react";
import { Table } from "@alicloud/console-components";

const dataSource = () => {
const result = [];
for (let i = 0; i < 5; i++) {
result.push({
title: {
name: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ${3 + i}.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
},
id: 100306660940 + i,
time: 200000000000000000000 + i
});
}
return result;
};
const render = (value, index, record) => {
return Remove({record.id});
};

const Demo1 = () => (

<Table.Column title="Time" dataIndex="time" />
<Table.Column cell={render} />
);

export default Demo1;

英文内容demo地址

疑问?

请问这是刚刚开始开源吗?后期会持续维护吗?breezr 我看是内部构建工具,后期有开源计划吗?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.