TypeScript @mixins.centerImage函數代碼示例

本文整理匯總了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；未經允許，請勿轉載。