阿姆斯特丹样式组件 UI

这是样式组件的 React 执行

安装

通过运行将此软件包添加到您的工程中 :

npm install @amsterdam/asc-ui

使用量

咨询 带有组件故事本的演示站点 查看可用的组件和示例

现有样式的基本调整

import styled from 'styled-components'
import { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'

const StyledList = styled(List)`
  background-color: ${themeColor('tint', 'level5')};

  @media screen and ${breakpoint('min-width', 'laptopM')} {
    background-color: ${themeColor('tint', 'level1')};
  }

  ${styles.ListItemStyle} {
    color: ${themeColor('primary')};
  }

  `

<ThemeProvider>
  <StyledList>
    <ListItem href="/">Item1</ListItem>
    <ListItem href="/">Item2</ListItem>
  </StyledList>
</ThemeProvider>

样式列表组件的背景颜色有: tint.level5 宽度小于 laptopM 断点和 tint.level1 宽度大于 laptopM 在默认主题中定义了颜色和断点

每个组件都暴露出其样式,可以在另一个组件中使用一个(类)选择器. 这些样式的命名惯例是: <component-name> - > (中文) styles.<component-name>Style。例如,列表项目有样式。 ListStyle 选择器 . 我们使用曝光选择器将链接列表项目的颜色更改为 primary 主题颜色。 在这种情况下,我们不需要创建一个新的StyledLinkedList项目来取代样式. 这正是我们从 Asc 库中 揭示的样式, 用来作为选择者。 在扩展样式时使用公约 const StyledLinkList = styled(LinkList) 如示例所示.

通过创建一个新的StyledLinkedList项目也可以实现:

import styled from 'styled-components'
import { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'

const StyledList = styled(List)`
  background-color: ${themeColor('tint', 'level5')};

  @media screen and ${breakpoint('min-width', 'laptopM')} {
    background-color: ${themeColor('tint', 'level1')};
  }
`

const StyledListItem - styled(ListItem)`
  color: ${themeColor('primary')};

  ${styles.IconStyle} {
    ${svgFill(themeColor('tint', 'level1'))};
  }

  ${styles.LinkStyle} {

    &:hover {
      ${IconStyle} {
        ${svgFill(themeColor('primary', 'main'))};
      }
    }
  }

`

<ThemeProvider>
  <StyledList>
    <StyledListItem href="/">Item1</StyledListItem>
    <StyledListItem href="/">Item2</StyledListItem>
  </StyledList>
</ThemeProvider>

在这个例子中,我们使用图标Style选择器来覆盖列表项目中chevron图标的颜色