chore(packages): move the packages to root

2025-08-19 11:41:20 +08:00 · 2018-03-12 16:02:25 -04:00
parent 097f1a2cd3
commit d37623a2ca
1255 changed files with 38 additions and 38 deletions
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@ -0,0 +1,117 @@
+import { Component, Element, Prop, State } from '@stencil/core';
+import { createThemedClasses, getElementClassMap } from '../../utils/theme';
+import { CssClassMap } from '../../index';
+
+
+@Component({
+  tag: 'ion-fab-button',
+  styleUrls: {
+    ios: 'fab-button.ios.scss',
+    md: 'fab-button.md.scss'
+  }
+})
+export class FabButton {
+  @Element() private el: HTMLElement;
+
+  @State() private inContainer = false;
+
+  @State() private inList = false;
+
+  /**
+   * The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * The mode determines which platform styles to use.
+   * Possible values are: `"ios"` or `"md"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md';
+
+  /**
+   * If true, the fab button will be show a close icon. Defaults to `false`.
+   */
+  @Prop() activated = false;
+
+  /**
+   * If true, the user cannot interact with the fab button. Defaults to `false`.
+   */
+  @Prop() disabled = false;
+
+  /**
+   * Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
+   */
+  @Prop() href: string;
+
+  /**
+   * If true, the fab button will be translucent. Defaults to `false`.
+   */
+  @Prop() translucent = false;
+
+  @Prop() toggleActive: Function;
+
+  @Prop() show = false;
+
+
+  componentDidLoad() {
+    const parentNode = this.el.parentNode;
+    const parentTag = parentNode ? parentNode.nodeName : null;
+
+    this.inList = (parentTag === 'ION-FAB-LIST');
+    this.inContainer = (parentTag === 'ION-FAB');
+  }
+
+
+  clickedFab() {
+    if (this.inContainer) {
+      this.toggleActive();
+    }
+  }
+
+  /**
+   * Get the classes for fab buttons in lists
+   */
+  getFabClassMap(): CssClassMap {
+    return {
+      'fab-button-in-list': this.inList,
+      [`fab-button-${this.mode}-in-list`]: this.inList,
+      [`fab-button-translucent-${this.mode}-in-list`]: (this.inList && this.translucent),
+      'fab-button-close-active': this.activated,
+      'fab-button-show': this.show,
+    };
+  }
+
+  render() {
+    const themedClasses = createThemedClasses(this.mode, this.color, 'fab-button');
+    const translucentClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'fab-button-translucent') : {};
+    const hostClasses = getElementClassMap(this.el.classList);
+
+
+    const TagType = this.href ? 'a' : 'button';
+
+    const fabClasses = {
+      ...this.getFabClassMap(),
+      ...themedClasses,
+      ...translucentClasses,
+      ...hostClasses,
+    };
+
+    return (
+      <TagType
+        class={fabClasses}
+        disabled={this.disabled}
+        href={this.href}
+        onClick={this.clickedFab.bind(this)}>
+        <ion-icon name='close' class='fab-button-close-icon'></ion-icon>
+        <span class='fab-button-inner'>
+          <slot></slot>
+        </span>
+        { this.mode === 'md' && <ion-ripple-effect/> }
+      </TagType>
+    );
+  }
+}