当前位置: 首页 > 知识库问答 >
问题:

React Styled-组件3按钮尺寸

司空瑾瑜
2023-03-14

什么是最好的方式有3种风格类型的基础上的道具?

 const Button = styled.button`
   background: teal;
   border-radius: 8px;
   color: white;
   height: ${props => props.small ? 40 : 60}px;
   width: ${props => props.small ? 60 : 120}px;
`;

class Application extends React.Component {
  render() {
    return (
      <div>
        <Button small>Click Me</Button>
        <Button>Click Me</Button>
        <Button large>Click Me</Button>
      </div>
    )
  }
}

共有1个答案

司寇善
2023-03-14

下面是我使用的一个选项的缩略示例。

/* import separate css file from styles.js */
import * as Styles from './styles';

/* concat styles based on props */
const ButtonBase = styled.button`
  ${Styles.buttonbase};
  ${props => Styles[props.size]};
  ${props => Styles[props.variant]};
`;

const Button = ({ size, variant, ...rest }) => (
  <ButtonBase
    size={size}
    variant={variant}
    {...rest}
    ...

在样式文件中(为了简洁,去掉了css)

import { css } from 'styled-components';

/* styles common to all buttons */
export const buttonbase = css`...`;

/* theme variants */
export const primary = css`...`;
export const secondary = css`...`;
export const tertiary = css`...`;

/* size variants */
export const small = css`...`;
export const medium = css`...`;
export const large = css`...`;
 类似资料:
  • 按钮由文字和/或图标组成,文字及图标必须能让人轻易地和点击后展示的内容联系起来。 主要的按钮有三种: 悬浮响应按钮(Floating action button), 点击后会产生墨水扩散效果的圆形按钮。 浮动按钮(Raised button), 常见的方形纸片按钮,点击后会产生墨水扩散效果。 扁平按钮(Flat button), 点击后产生墨水扩散效果,和浮动按钮的区别是没有浮起的效果。 颜色饱满

  • 浮动操作按钮 运行方式 过渡 大屏幕 浮动操作按钮 浮动操作按钮 浮动操作按钮适用于进阶的操作。它是漂浮在 UI 上的一个圆形图标,具有一些动态的效果,比如变形、弹出、位移等等。 浮动操作按钮有两种尺寸: 默认尺寸:适用于多数应用情况。 迷你尺寸:仅用于创建与其他屏幕元素视觉的连续性。 浮动操作按钮 迷你浮动操作按钮 浮动操作按钮应至少放在距手机边缘 16dp 或电脑/台式机边缘 24dp 的地方

  • 使用按钮组,即把一系列按钮编组在一行里。可以使用按钮插件添加一个可选的JavaScript单选钮以及复选框样式行为。 基本示例 用.btn-group把一系列带有.btn的按钮包裹起来。 <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-se

  • 问题内容: 我有以下代码: 如您所见,我要在单击按钮时更改大小。可能吗?上面的代码不起作用,我的意思是大小没有改变。如何动态更改尺寸? 感谢致敬。编辑: 交换选择一个JList行的面板。 ViewPanel#changeView(),这将交换面板: 问题答案: 使用布局管理器时,永远不要使用setSize()。布局管理器的工作是确定大小。您可以通过设置指定的大小或最小或最大大小来向布局管理器提供提

  • 本文向大家介绍Bootstrap按钮组件详解,包括了Bootstrap按钮组件详解的使用技巧和注意事项,需要的朋友参考一下 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作。 结构方面:使用一个类名为btn-group的容器,把多个按钮放在这个容器中。 按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.sc

  • 问题内容: 我创建了一个按钮,我想要这些: 当用户单击按钮时,它将保持按下状态约3秒钟。3秒钟后,按钮应再次看起来可按下。因此,用户必须等待3秒钟才能再次单击该按钮。我尝试了这些: 你有什么建议吗? 问题答案: 可能对您有帮助