@dnanpm/styleguide

DNA Styleguide寄存器提供了各种DNA项目中使用的一组组件和主题对象.

安装

在应添加DNA样式指南的仓库中运行安装命令

npm install @dnanpm/styleguide

文档

[注] 需要访问DNA Cloud URL!

交互式文档和API

见最新版本 DNA 样式指南 用于主题文档、 API 和组件的交互式文档.

更改日志

见 更改日志 用于当前主要版本修改,或 Changelog 归档 对于旧的主要版本的修改.

移徙指南

见 移徙指南 用于了解如何在DNA样式指南的主要版本之间迁移的更多信息.

贡献指南

见 贡献指南 关于如何为DNA样式指南做出贡献的更多信息.

用法实例

主题

import { theme as defaultTheme } from '@dnanpm/styleguide';

const color = {
    ...defaultTheme.color,
    background: '#000000',
};

const iconSize = {
    default: '0.75em',
    defaultMobile: '2em',
};

const theme = {
    ...defaultTheme,
    colors,
    iconSize,
};

export type ThemeInterface = typeof theme;
export default theme;

import theme from './theme';

class MyApp {
    public render() {
        const { Component, pageProps } = this.props;

        return (
            <ThemeProvider theme={theme}>
                <Component {...pageProps} />
            </ThemeProvider>
        );
    }
}

构成部分

import { ButtonPrimary } from '@dnanpm/styleguide';

interface Props {
    myProp?: string;
}

const MyComponent = ({
    myProp,
}: Props) => {
    return (
        <ButtonPrimary>{myProp || 'Lorem Ipsum'}</ButtonPrimary>
    );
};

export default MyComponent;