आईएनजी लॉंच लॉयन: अ लाइब्रेरी ऑफ प्रोडक्टिव, अफोर्डेबल और फ्लेक्सिबल वेब कंपोनेंट्स

सिंह क्यों?

फ्रेमवर्क अज्ञेय

क्रियात्मक अनुकूलन

उपलब्धता

संक्षेप

• निर्भरता खोजना और जोड़ना कोई आसान काम नहीं है;
• इसकी उपस्थिति के कारण एक घटक चुनना एक अच्छा विचार नहीं है;
• व्यवहार या शैली में समायोजन कभी-कभी बनाए रखना मुश्किल होता है;
• यदि पैकेज लोकप्रिय है, तो इसका मतलब यह नहीं है कि इसमें अच्छी उपलब्धता या प्रदर्शन है।

• कल्पना करें कि आपके पास ऐसे घटक हैं जिनका मुख्य कार्य कार्यक्षमता प्रदान करना है, और डिजाइन आपके विवेक पर है।
• कल्पना कीजिए कि इन घटकों की उत्कृष्ट उपलब्धता और प्रदर्शन है।
• कल्पना कीजिए कि ये घटक एक्स्टेंसिबल और लचीले हैं।

सिंह क्या है?

सफेद उपनाम

प्राथमिक ध्यान

• पुन: उपयोग - हमारे घटकों को विश्व स्तर पर वितरित और उपयोग करने के लिए डिज़ाइन किया गया है;
• पहुँच क्षमता - हमारे घटकों को सभी के लिए सुलभ होने के लिए डिज़ाइन किया गया है;
• उत्पादकता - हमारे घटक छोटे, उत्पादक और तेज़ होने चाहिए।

सीख सीखी

• सब कुछ एक वेब घटक नहीं बनना चाहिए, कुछ कार्यक्षमता को जोड़ने के लिए नियमित जावास्क्रिप्ट का उपयोग करना बेहतर है;
• देशी एचटीएमएल तत्वों के जितना हो सके पास रहें;
• शुरू से पहुंच पर काम;
• सब कुछ छाया में नहीं होना चाहिए DOM, यह विशेष रूप से aria रिश्तों और पहुंच के लिए महत्वपूर्ण है;
• यूआई घटक जटिल हैं।

« -, .»
Erik Kroes

Lion!

सिंह के विकास में योगदान!

• मुद्दा बनाना और बंद करना;
• पूरी तरह से नए घटक पर काम करना (मुद्दे पर चर्चा करके शुरू);
• प्रलेखन में सुधार;
• ... कोई भी योगदान महत्वपूर्ण है! यहां तक ​​कि प्रलेखन में टाइपोस का सुधार

घटक विस्तार

npm i lit-element @lion/tabs

import { css } from 'lit-element';
import { LionTabs } from '@lion/tabs';

export class LeaTabs extends LionTabs {
  static get styles() {
    return [
      super.styles,
      css`
        /* my stylings */
      `
    ];
  }

  connectedCallback() {
    super.connectedCallback();
    this._setupFeature();
  }

  _setupFeature() {
    // being awesome
  }
}

customElements.define('lea-tabs', LeaTabs);

import { LitElement, html, css } from 'lit-element';

export class LeaTab extends LitElement {
  static get styles() {
    return css`/* my stylings */`;
  }

  render() {
    return html`
      <!-- dom as needed -->
      <slot></slot>
    `;
  }
}

customElements.define('lea-tab', LeaTab);

<lea-tabs>
  <lea-tab slot="tab">Info</lea-tab>
  <lea-tab-panel slot="panel">
    Info page with lots of information about us.
  </lea-tab-panel>
  <lea-tab slot="tab">Work</lea-tab>
  <lea-tab-panel slot="panel">
    Work page that showcases our work.
  </lea-tab-panel>
</lea-tabs>

लेकिन वह सब नहीं है!

स्वीकृतियाँ