TypeScript @mixins.centerImage函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@mixins.centerImage函数的典型用法代码示例。如果您正苦于以下问题：TypeScript centerImage函数的具体用法？TypeScript centerImage怎么用？TypeScript centerImage使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了centerImage函数的6个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: url

 ${({
   size,
   disabled,
   icon,
   opacity,
 }: {
   size: number;
   disabled: boolean;
   icon: string;
   opacity: number;
 }) => css`
   ${centerImage(`${size}px`, `${size}px`)};
   opacity: ${disabled ? 0.25 : opacity};
   background-image: url(${icon});
 `};

开发者ID:laquereric，项目名称:wexond，代码行数:15，代码来源:styles.ts

示例2: url

  ${body2()};
`;

export const InfoContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 16px;
`;

export const WeatherIcon = styled.div`
  width: 24px;
  height: 24px;
  display: flex;
  margin-right: 16px;
  ${centerImage('24px', 'auto')};

  background-image: url(${({ src }: { src: string }) => src});
`;

export const TempContainer = styled.div`
  width: 64px;
  text-align: right;
  white-space: nowrap;
`;

export const Temp = styled.span`
  color: rgba(
    0,
    0,
    0,

开发者ID:laquereric，项目名称:wexond，代码行数:31，代码来源:styles.ts

示例3: rgba

  cursor: pointer;
  border-radius: 4px;
  transition: 0.2s background-color;

  &:first-child {
    margin-left: 0px;
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.06);
  }
`;

export const Title = styled.div`
  padding-left: 2px;
  padding-right: 2px;
  color: rgba(0, 0, 0, ${transparency.light.secondaryText});

  ${subtitle2()};
`;

export const HomeIcon = styled.div`
  width: 20px;
  height: 20px;
  transition: 0.2s opacity;
  background-image: url(${icons.home});
  opacity: ${transparency.light.inactiveIcon};

  ${centerImage('100%', 'auto')};
`;

开发者ID:laquereric，项目名称:wexond，代码行数:30，代码来源:styles.ts

示例4: rgba

  min-height: 72px;
  height: auto;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 1px 1px 0 rgba(60, 64, 67, 0.08),
    0 1px 3px 1px rgba(60, 64, 67, 0.16);
`;

export const Thumbnail = styled.div`
  width: 100%;
  height: 194px;

  background-image: url(${({ src }: { src: string }) => src});
  ${centerImage('100%', '194px')};
`;

export const Header = styled.div`
  display: flex;
  flex-flow: column;
  padding: 16px;
`;

export const Logo = styled.div`
  width: 40px;
  height: 40px;
  margin-left: 16px;
  align-self: center;
  justify-self: left;
  border-radius: 100%;

开发者ID:laquereric，项目名称:wexond，代码行数:31，代码来源:index.ts

示例5:

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  opacity: ${transparency.light.primaryText};
`;

export const SecondaryText = styled.div`
  ${body2()};
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 16px;
  font-size: 13px;
  opacity: ${transparency.light.secondaryText};
`;

export const Icon = styled.div`
  position: absolute;
  left: 16px;
  width: 16px;
  height: 16px;
  ${centerImage('16px', '16px')};
`;

export const Dash = styled.div`
  margin-left: 4px;
  margin-right: 4px;
  opacity: ${transparency.light.secondaryText};
`;

开发者ID:laquereric，项目名称:wexond，代码行数:30，代码来源:styles.ts

示例6: url

      background-color: ${selected
        ? 'rgba(0, 0, 0, 0.1)'
        : 'rgba(0, 0, 0, 0.04)'};
    }
  `};

  &:last-child {
    border-bottom: none;
  }
`;

export const Icon = styled.div`
  height: 16px;
  min-width: 16px;
  margin-left: 24px;
  ${centerImage('16px', 'auto')};

  ${({ icon }: { icon: string }) => css`
    background-image: url(${icon});
  `};
`;

export const PrimaryText = styled.div`
  opacity: ${transparency.light.primaryText};

  ${body2()};
`;

export const SecondaryText = styled.div`
  opacity: ${transparency.light.secondaryText};

开发者ID:laquereric，项目名称:wexond，代码行数:30，代码来源:index.ts

注：本文中的@mixins.centerImage函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。