Kuidas luua stiilis komponent Framer X-is?

Näitan teile, kuidas installida kujundatud komponente oma Framer X projekti jaoks ja kuidas luua põhikomponent Button.

Algne artikkel avaldati saidil zauberware.com

JAH, Framer X näib olevat esimene kujundustööriist, mis integreerib Reacti moodi raamistiku suurepäraselt. Ok, noh, alati on arenguruumi, kuid see töötab ja selle teema kohta on tooteomanike @FramerXi teada antud toredaid funktsioone.

Framer X nimetab Reacti komponenti “koodikomponendiks” ja need on kirjutatud trükikirjas. Ärge kartke Typescripti, kui te pole sellega harjunud. Järgige selle õpetuse juhiseid ja näete, kui lihtne on koodikomponendi kirjutamine.

Väliste raamatukogude nagu stiilikomponentide kasutamine töötab ka! Selles juhises loome Framer X-is Buttoni komponendi, kasutades stiilikomponente.

Kui te pole kunagi varem stiilikomponentidest kuulnud, soovitan teil lugeda nende dokumente. See on päris vinge. Kui reageerimine on teile uus, siis peaksite enne läbi viima põhilise reageerimiskuuri.

5 lihtsat sammu stiilikomponendi loomiseks Framer X-is:

  1. Looge uus koodikomponent
  2. Installige stiilis komponendid
  3. Seadistage nupp
  4. Nuppude variatsioonide loomine
  5. Lisage Framer X vara juhtelemendid

Alustagem!

1. Looge uus koodikomponent

Looge uus projekt raamis ja minge komponentide vahekaardile.

Klõpsake uut, valige „Kood” ja sisestage pealkiri nt. “Nupp”. Teie eelistatud redaktor peaks avama Button.tsx faili.

2. Installige stiilis komponendid

Framer X projekt on npm projekt, nii et võime lisada sõltuvusi nagu iga teise rakenduse jaoks.

Teie .framerxi projektifail pole midagi muud kui ZIP-fail ja kui avate faili, hoiab see koopiat Maci automaatse salvestamise teel.

Projekti tee avamiseks klõpsake File> Show Project Folder. See avab teie projektiga Finderi akna.

Siit saate teada oma projekti tee. See saab olema midagi sellist:

~ / Raamatukogu / Autosave \ teave / Framer-833DA362-6D23-43F9-A719-06A1753E37C9 / konteiner

Avage terminal ja muutke kataloogi järgmiselt:

$ cd ~ / Raamatukogu / Autosave \ teave / Framer-833DA362-6D23-43F9-A719-06A1753E37C9 / konteiner

Käsk cd tähendab muutmist kataloogi ja ~ on tee teie kasutajate kodukataloogi.

Kui näete vaeva oma projekti jaoks õige tee leidmisega:

  1. Paremklõpsake saidil package.json> Hankige teavet.
  2. Kopeeri tee.
  3. Olge kopeeritud teabe salvestamise automaatne salvestamine. Peate selle muutma “Autosalve \ Informatsioon”, kuna Terminalis pole teil tühja kohta.

Kui olete projekti kaustas, saame teie projekti jaoks installida npm paketi stiilis komponendid:

$ npm installida stiilis komponendid

Minge tagasi oma redaktorisse, kus avasite faili Button.tsx, ja lisage ülaossa järgmine impordideklaratsioon:

importida stiilselt 'stiilis-komponendid'

Teie nupp peaks nüüd töötama stiilis komponentidega. Kuid me ei ole seadistanud ühtegi elementi ega stiili. Läheme 3. sammu juurde.

3. Seadistage nupp

Eemaldame real 5 kõik CSS-Property asjad, sest tahame selle asendada stiilikomponendiga.

Lisage mõne stiiliga põhiline stiilinupuga silt:

const StyledButton = stiiliga nupp
  polster: 20 px;
  piiri raadius: 10 pikslit;
  äär: 0;
  kirjasuurus: 2em;
`

Kui te imestate süntaksi üle: seda nimetatakse mallikirjanduseks ja see on täiendav viis dünaamiliste stringide või mallide käsitlemiseks. See pakub lihtsamat lahendust, nt. stringi ja muutujate ühendamiseks. Kui soovite rohkem teada saada stringi ja mallide litrite kohta javascriptis, võin soovitada seda artiklit lugeda.

Kasutage komponendi renderdusmeetodis oma StyledButton:

renderdama () {
  tagastab  {this.props.text} 
}

Teie komponent peaks nüüd välja nägema järgmine:

import * kui reageeri saidist "reageeri"
impordi {PropertyControls, ControlType} kaustast framer
importida stiilis "stiilis-komponendid"
const StyledButton = stiiliga nupp
  polster: 20 px;
  piiri raadius: 10 pikslit;
  äär: 0; kirjasuurus: 2em;
`
// Määratlege vara tüüp
liides rekvisiidid {
  tekst: string;
}
ekspordiklassi nupp laiendab React.Component  {
  // Vaikeomaduste määramine
  staatiline defaultProps = {
    tekst: "Tere maailm!"
  }
  // Omaduste paneelil kuvatud üksused
  staatiline propertyControls: PropertyControls = {
    tekst: {tüüp: ControlType.String, pealkiri: "Tekst"},
  }
  renderdama () {
    tagastab  {this.props.text} 
  }
}

4. Looge nupu variatsioon

Kasutagem stiilitud komponentide ja Framer X eeliseid. Mis on igal disainisüsteemil: jah, primaarne ja sekundaarne nupp.

Lisagem mõne nupu variatsiooni.

const StyledButton = stiiliga nupp
  polster: 20 px;
  piiri raadius: 10 pikslit;
  äär: 0;
  kirjasuurus: 2em;
  $ {rekvisiidid => rekvisiidid. & css "
    värv: valge;
    taustavärv: roheline;
  `}
  $ {rekvisiidid => rekvisiidid.sekund ja & css`
    värv: valge;
    taustavärv: sinine;
  `}
`

css ei leitud? Ärge muretsege, importige see stiilis komponentidest:

importige stiilis {css} kataloogist "stiilis-komponendid"

Kasutage komponendi atribuuti:

renderdama () {
  naase  {this.props.text} 
}
// või teisene
renderdama () {
  naase  {this.props.text} 
}

5. Lisage Framer X vara juhtelemendid

Koodis atribuudi muutmine on natuke ebaotstarbekas. Loome võimaluse muuta Framer X-is nupu tüüpi.

Lisage uus atribuut, nt “Tüüp”

// Määratlege vara tüüp
liides rekvisiidid {
  tekst: string;
  tüüp: string;
}

Oletame, et soovime vaikimisi peamist nuppu:

// Vaikeomaduste määramine
staatiline defaultProps = {
  tekst: "Tere maailm!",
  tüüp: "esmane",
}

Lisage meie tüübi valimiseks uus omandikontroll. Oma eesmärgi saavutamiseks kasutame programmi ControlType.Enum:

// Omaduste paneelil kuvatud üksused
staatiline propertyControls: PropertyControls = {
  tekst: {
     tüüp: ControlType.String,
     pealkiri: "Tekst"
   },
  tüüp: {
     tüüp: ControlType.Enum,
    pealkiri: "Type",
    valikud: ['esmane', 'teisene'],
    optionTitles: ['esmane nupp', 'sekundaarne nupp']
   },
}

Framer X-i külastades peaksite nägema nupu tüübi valiku.

Kuid noh, siis, kui me valiku jõuame, ei muutu midagi. Sellepärast ei kasutanud me komponendis tüüpi omadust.

Peame koodi natuke muutma. Kõigepealt tahame selle stiili komponendile üle anda.

renderdama () {
  tagasi (
    
      {this.props.text}
    
  )
}

Nupus StyledButton saame nüüd tüübi põhjal otsustada, millist nuppu soovite laadida:

$ {rekvisiidid => props.type == 'esmane' && css '
  värv: valge;
  taustavärv: roheline;
`}
$ {rekvisiidid => props.type == 'sekundaarne' && css "
  värv: valge;
  taustavärv: sinine;
`}

Palju õnne! Proovige seda Framer X-is!

Nüüd on teil väga lihtne arusaam sellest, kuidas integreerida Framer X-i kolmanda osa raamatukogu ja kuidas luua variatsioonidega põhikomponent.

Täname, et lugesite! Olen Simon Franzen, zauberware kaasasutaja. Võtke minuga Twitteri kaudu ühendust.

Selle juhise lõplikud allikad leiate minu sisust: https://gist.github.com/simonfranzen/f46ff1a8b24356f6729d11a6ca8b968b