logo

Použití komponenty Styled s Ember.js

Co je to stylizovaná komponenta:

Stylované komponenty jsou jedním z nových způsobů použití CSS v moderním JavaScriptu. Má být nástupcem modulů CSS; způsob, jak napsat CSS, které je zaměřeno na jedinou komponentu a neprosakuje do žádného jiného prvku na stránce
Takže místo mít 

.my-button {
  Background-color: blue;
  Color: white;
}

<button class=”my-button”> click me </button>

Můžeme mít 

const MyButton = styled.button`
  background-color: blue;
  color: white;
`

<MyButton> click me </MyButton>

Systémové komponenty byly vytvořeny z následujících důvodů:

  • Automatické kritické CSS:Styled Components sleduje, které komponenty se na stránce vykreslují, a plně automaticky vkládá jejich styly a nic jiného. V kombinaci s rozdělením kódu to znamená, že vaši uživatelé načítají co nejmenší množství kódu.
  • Žádné chyby v názvech tříd:Styled Components generuje jedinečné názvy tříd pro vaše styly. Už se nikdy nemusíte starat o duplikaci, překrývání nebo překlepy. Snazší mazání CSS:může být těžké zjistit, zda je někde ve vaší kódové základně použit název třídy. Styled Components to jasně ukazuje, protože každý kousek stylingu je svázán s konkrétní komponentou. Pokud se komponenta nepoužívá (které nástroje dokážou detekovat) a dojde k jejímu smazání, budou smazány všechny její styly.
  • Jednoduchý dynamický styl:přizpůsobení stylu komponenty na základě jejích rekvizit nebo globálního motivu je jednoduché a intuitivní, aniž byste museli ručně spravovat desítky tříd.
  • Bezbolestná údržba:nikdy nemusíte hledat různé soubory, abyste našli styl ovlivňující vaši komponentu, takže údržba je hračka bez ohledu na to, jak velká je vaše kódová základna.
  • Automatické předpony dodavatele:napište CSS podle aktuálního standardu a nechte stylizované komponenty, aby se postaraly o zbytek.

Použití stylizované komponenty s Ember.js

Máte tuto možnost používat Styled-Component v Ember.js stejně jako jiné knihovny a frameworky, s trochu jinými vzory.
Jak víte, Ember.js má svou architekturu, která usnadňuje pochopení a použití. V Ember.js jsou všechny komponenty definované v app/components/ adresář a stylizované komponenty také definované jako komponenta pod architekturou Ember.js.
Abychom mohli používat stylizované komponenty, musíme nainstalovat doplněk s názvem ember-styled-components kterou najdete zde.
Nejprve nainstalujme doplněk pomocí níže uvedeného příkazu

npm install ember-styled-components

Poté můžete definovat svou stylizovanou komponentu jako komponentu v adresáři komponenty Ember.js, ale kromě použití šablony má vaše komponenta pouze soubor js.

Vytvořme tedy soubory s názvem wrapper-component.js a title-component.js v adresáři komponent a definujte svůj styl 

// wrapper-component.js
import styled from 'ember-styled-components';

/**
 * Create a wrapper component that renders a <section> with
 * some padding and a papayawhip background
 */
export default styled.section`
  padding: 4em;
  background: papayawhip;
`;

Nyní můžete tuto komponentu použít pod svou šablonou nebo v jiných komponentách, jako je tato 

// title-component.js
import styled from 'ember-styled-components';

/**
 * Create a title component that renders an <h1> which is
 * centered, palevioletred and sized at 1.5em
 */
export default styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

a nakonec je použijte ve své šabloně 

{{!-- For old version of Ember --}}
{{#wrapper-component}}
  {{#title-component}}Hello World, this is my first styled component!{{/title-component}}
{{/wrapper-component}}

{{!-- For New version of Ember --}}
<WrapperComponent>
  <TitleComponent>Hello World, this is my first styled component!</TitleComponent>
</WrapperComponent>

Přestože architektura Ember.js přináší jednoduchost a srozumitelnost, zde si myslím, že to způsobuje trochu problém, protože musíte definovat komponentu v adresáři komponenty pro použití stylizované komponenty, možná by bylo lepší, kdybychom mohli použít styled-component přímo v šablonách.

Pokusil jsem se použít komponentu styled a vytvořit ukázku navrženou tak, jak je uvedeno níže.

Pro organizaci kódu umístím všechny stylizované komponenty pod styled adresář, abych pochopil, kde se tato komponenta nachází a kde se nachází komponenty styled-components nebo komponenta ember.js.

Uvidíme, jak naložím se svým obalem 

// app/components/styled/wrapper.js
import styled from 'ember-styled-components';

export default styled.section`
  background: #e4e7fd;
  padding: 4em;
  min-height:  100vh;
  font-family: 'Lato', sans-serif;
`;

// template
<Styled::Wrapper>
  Your content is here
</Styled::Wrapper>

Můžete také zpracovat předávání parametrů vaší stylizované komponentě. 

// app/components/styled/input-form.js
import styled from 'ember-styled-components';

export default styled.input`
    margin: 0;
    color: ${props => props.inputColor || '#000'};
    background: ${props => props.bgColor || '#fff'};
    border-radius: 4px;
    width: 100%;
    padding: 10px;
    border: 1px solid #dedede;
    box-sizing: border-box;
    font-size: 15px;
    margin-bottom: 15px;
    &::placeholder {
        color: ${props => props.placeholderTextColor || '#aaa'};
    }
`;


// template
<Styled::FormInput
    name="username"
    placeholder="Email"
    type="text"
    @inputColor="#ff9900"
    @bgColor="#222"
/>

Repo najdete zde
https://github.com/shayanypn/ember-styled-component-login

Zdroje:
https://www.robinwieruch.de/react-styled-components