TypeScript csx.rem函数代码示例

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

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

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

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

示例1: rem

import { rem } from 'csx';
import { NavLink } from '../NavLink';
import { Location } from '@cycle/history';

interface Sources {
  dom: DOMSource;
  history: MemoryStream<Location>;
}

interface Sinks {
  dom: Stream<VNode>;
}

const navLink = {
  color: '#999',
  fontSize: rem(1),
  fontWeight: 700,
  marginRight: rem(1),
  textDecoration: 'none',
  transition: 'color .3s'
};
const navLinkHover = {
  ...navLink,
  cursor: 'pointer',
  color: '#666'
};

const className = style({
  display: 'flex',
  alignContent: 'flex-end',
  $nest: {

开发者ID:cyclejs-community，项目名称:typescript-starter-cycle，代码行数:31，代码来源:NavMenu.ts

示例2: style

import { Sources as RouteComponentSources, Sinks } from 'components/App';
import { Stream } from 'xstream';
import { div, h2, h3, hr, p, h4, strong, em } from '@cycle/dom';
import { BackButton } from 'components/BackButton';
import { style } from 'typestyle';
import { rem } from 'csx';
import { Commit } from 'drivers/github';

interface Sources extends RouteComponentSources {
  sha$: Stream<string>;
}

const className = style({
  display: 'inline',
  marginLeft: rem(1)
});

const xs = Stream;

const getDom = ({ sha, commit: { message, author: { name, email, date } } }: Commit) => [
  h3([message.split('\n\n')[0]]),
  h4([strong([name])]),
  h4([email]),
  h4([em([date])]),
  p([message.split('\n\n')[1] || ''])
];

export const Details: (sources: Sources) => Partial<Sinks> = ({ dom, github, sha$ }) => {
  const backButton = BackButton({ dom });
  const details$ =
    sha$

开发者ID:cyclejs-community，项目名称:typescript-starter-cycle，代码行数:31，代码来源:index.ts

示例3: style

import { pluck } from 'utils/pluck';
import { Layout } from './';
import { Header } from 'components/Header';
import { Stream } from 'xstream';
import { header, div, hr, main } from '@cycle/dom';
import { style } from 'typestyle';
import { rem } from 'csx';

const className = style({
  $nest: {
    '&>header': {
      padding: rem(1),
    },
    '&>main': {
      padding: rem(1)
    }
  }
});

const xs = Stream;

export const HeaderLayout: Layout = ({ dom, history, github, component: { dom: componentDom, ...component } }) => {
  const headerComponent = Header({ dom, history });
  const vdom$ =
    xs.combine(headerComponent.dom, componentDom || xs.empty())
      .map(([headerDom, component]) =>
        div(`.header.layout.${className}`, [
          header(headerDom),
          hr(),
          main(component)
        ])

开发者ID:cyclejs-community，项目名称:typescript-starter-cycle，代码行数:31，代码来源:HeaderLayout.ts

示例4: style

interface Sinks {
  dom: Stream<VNode>;
}

const className = style({
  display: 'flex',
  $nest: {
    '& h1': {
      marginBottom: 0,
      marginTop: 0,
      flex: '1 0 60%',
      lineHeight: 1
    },
    '& em': {
      fontSize: rem(1)
    },
    '& nav': {
      flex: 1
    }
  }
});

const xs = Stream;

export const Header = ({ dom, history }: Sources): Sinks => {
  const navMenu = NavMenu({ dom, history });
  const vdom$ = navMenu.dom.map(navMenu =>
    div(`.${className}`, [
      h1([
        'TypeScript Starter Cycle',

开发者ID:cyclejs-community，项目名称:typescript-starter-cycle，代码行数:30，代码来源:index.ts

示例5: style

import { style, media } from 'typestyle'
import { rem } from 'csx'
import size from '../../style/sizes'
import { h1 } from '../../style/headings'

export const teaserStyle = style(
  {
    marginTop: rem(2.333),
    marginBottom: rem(2.333),
    $nest: {
      'h1': h1.xs
    }
  },
  media(
    { minWidth: size.md },
    {
      marginTop: rem(4.333),
      marginBottom: rem(2.333)
    }
  ),
  media(
    { minWidth: size.lg },
    {
      // marginTop: rem(2.333),
      // marginBottom: rem(2.333),
      $nest: {
        'h1': h1.lg
      }
    }
  )
)

开发者ID:katallaxie，项目名称:katallaxie.github.com，代码行数:31，代码来源:style.ts

示例6: style

import { Commit } from 'drivers/github';
import { style } from 'typestyle';
import { rem } from 'csx';

interface Sources {
  dom: DOMSource;
  commit$: Stream<Commit>;
}

interface Sinks {
  dom: Stream<VNode>;
  history: Stream<string>;
}

const className = style({
  marginBottom: rem(1),
  border: `${rem(.1)} solid #ddd`,
  padding: rem(1),
  listStyle: 'none',
  borderRadius: rem(.5),
  $nest: {
    'h4, h5': {
      marginTop: 0,
      marginBottom: rem(.5)
    },
    h5: {
      marginBottom: 0
    }
  }
});

开发者ID:cyclejs-community，项目名称:typescript-starter-cycle，代码行数:30，代码来源:CommitListItem.ts

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