Button

按钮 https://angular.carbondesignsystem.com/?path=/story/components-button—basic

组件及属性

• button
  • Input
    • ibmButton = ‘primary’
    • size
    • assistiveTextPlacement 辅助文字 位置 : top | bottom | left | right = top
    • assistiveTextAlignment 辅助文字对齐: center | start | end = center
  • Outout
  • Hostbinding
    • class.bx—steleton @Input skeleton = false;
    • class.bx—btn—icon-only @Input iconOnly = false;
    • class.bx—btn—expressive @Input isExpressive = false;
    • class.bx—btn
    • class.bx—btn—primary
    • class.bx—btn—secondary
    • class.bx—btn-tertiary
    • class.bx—btn—ghost
    • class.bx—btn-danger
    • class.bx—btn-danger—tertiary
    • class.bx—btn-danger—ghost
    • class.bx—btn—sm
    • class.bx—btn—lg
    • class.bx—btn—xl
    • class.bx—btn—field
    • class.bx—toolbar-action toolbarAction = false;
    • class.bx—overflow-menu overflowMenu = fasle;
    • class.bx—tooltip__trigger
    • class.bx—tooltip—a11y @Input hasAssistiveText = false;’
    • class.bx—tooltip—align-center
    • class.bx—tooltip—align-start
    • class.bx—tooltip—align-end
    • class.bx—tooltip—top
    • class.bx—tooltip—bottom
    • class.bx—tooltip—left
    • class.bx—tooltip—right

      Tips

      通过看整个 button 组件的代码，主要还是在样式部分，应用了 carbon 的样式；确实button本身也不需要什么逻辑，简单而纯粹。
      和 Accordion 与 Breadcrumb 组件不同的是，button 是通过指令实现的，不需要模板。

      Code

      https://github.com/llccing-demo/carbon-components-angular/commit/c2f026307fac0fce1ab71815d520a90de3fdf03d

      感谢

      朋友你好，如果你对我的文章感兴趣，欢迎关注我的 Github (https://github.com/llccing)，或者掘金 (https://juejin.cn/user/3227821867281079)，或者语雀 (https://www.yuque.com/uov16w)，感谢你的支持！