Curso intensivo do Figma 1 - aprenda componentes rapidamente

1. ! Intro intro: Ei, todo mundo em Brian White. Conheci o X Designer de Lawrence, Kansas. Eu também faço design de marca e algumas outras coisas nesta classe. Nós rapidamente aprendemos a criar componentes como símbolos em componentes Sigma, não é? Por quê? Elementos que podem ser reutilizados em seus designs? Eles ajudam você a criar e gerenciar projetos consistentes em todos os projetos. Eles se estendem para um design responsivo, ajudaram a construir layouts e podem ser editados em tempo real. Esta classe percorre a construção de um sistema de componente base em um processo passo a passo. Esta classe iniciante de estigma lhe dará as ferramentas do dedo do pé. Quer sua carreira na interface de usuário. Lembre-se de produtos gratuitos para baixar. Então pegue uma cópia, e vamos começar. 2. Componentes e configurações.: Vou mostrar-lhe rapidamente como configurar alguns componentes e ser capaz de esticá-los sem torná-los horríveis. Então nós vamos para o menu aqui, ir para preferências, quantidade de empurrar. Certifique-se de que é um oito para bom. número divisível pode ser um 10, mas está tudo bem. Boa moldura, e então certifique-se de que você está no design. Vamos verificar a área de trabalho 14 40 e mudar o nome desta página inicial. Certo, vamos fazer retângulo e montar um pequeno sistema de barra de menus. E vamos apenas tornar as coisas mais fáceis. Bem, por usar oitavos Olá. Faça 88. Tudo bem. E nós vamos fazer um logotipo brincando. Certo, então o que queremos fazer é checar nossas grades de layout. Nós não temos um. Vamos fazer é adicionar um e rápido em colunas e o que é fazer 12. E eu gosto de baixar isso para 3%. Isso é simplesmente legal. Como se o rosa não te estragasse. E então, desde onde ele sobe, vamos fazer 24 picaretas vai pegá-la. Tudo bem, agora estamos lá. Quando você rapidamente sobre o nome da página, você pode manter pressionado o comando e esticá-lo. Então é legal se preparar para adicionar alguns componentes. Então vamos fazer o sistema de menu. Então vou usar perspicácia. Profissional. Digamos 18 pixels e vamos perdê-lo? Ok, vamos ver. Item de menu um. Ok, agora nós não queremos apenas digitar menu menu menu menu menu menu menu menu menu menu menu menu. O que queremos fazer é tornar isso um componente, então vamos torná-lo um pouco mais normal. Então, digamos portfólio ou podemos apenas mantê-lo item de Menu um, e vamos mostrar-lhe o que está acontecendo. Ok, então este é o seu componente que não é um componente ainda que você queria componente porque você quer fazer isso e você quer tê-los todos iguais e ser capaz de esticar e crescer com suas seções. Então o que vamos fazer é configurar um sistema onde você tem sua área de menu. Então o que vamos fazer é fazer um retângulo simples e colocar isso no meio. Então vamos fazer 32 pixels de altura, inventando tudo isso como eu vou. Então, e nós queremos que isso seja centrado aqui mesmo uma linha do meio. Está bem. É um pouco alto, porque eu tenho isso esticado um pouco. Tudo bem, então se você está nesta seção e digamos que você quer, como, como, um destaque longe ou algo assim, vamos em frente e adicioná-lo tão bem em um bar. Digamos quatro. Ok, então nós já encontramos cores. Queremos ter algumas cores aqui, já que não estamos emoldurando onde estamos fazendo componentes. Mas vamos fazer com que pareça um pouco animada. Vou saltar por cima de uma loja de fotografia só por um segundo. Este é um dos meus produtos de projetos. É de uma lojadefotos chamada Instant Pallet Maker. E o que eu gosto de fazer é pegar imagens realmente legais que têm cores legais e tentar puxar você I cores a partir dele. Então, quando você apenas clicar nele ele automaticamente faz paleta. Não estraga sua imagem. Ele o coloca em outra camada. Se você quiser conseguir, é bem barato. É um mercado criativo, fabricante de paletes instantâneas. Então o que eu vou fazer é ir a esta cena. Achei que seria divertido mudar os níveis. E não se preocupe, estamos pulando de volta para escolher meu destaque muito rápido. Isto é um pouco. Ponha alguns belos rosas lá dentro. Ok, então vamos tentar paleta média e clicar nele. Está muito lavado. Então o que vou fazer voltou. Clique na paleta, grande. Tente obter algumas dessas cores de ação divertidas. Vou até dar um soco nisso um pouco. Alguns achatam isso. Não se preocupe. Vamos voltar muitas vezes às invenções. Está bem. Tudo bem. Então vamos copiar isso, então temos que te agradar as cores lá dentro. Tudo bem, estamos aqui atrás. Vamos jogar fora essa coisa de cor e puxar dentro e um esquema de cores rápido para vocês . Então você quer procurar sua cor interativa? E eu estava originalmente à procura de rosa. Então estamos verdes para ir para esse tipo de cor de salmão e ver se podemos fazer Não é brilhante o suficiente. Tudo bem? Talvez até um pouco daquele rosa não impulsionado. Só um pouquinho. Tudo bem. E depois queremos um pouco de “Cool”. Estes cinzentos, estes ar. Bela pastagem de Warren. Então vamos fazer isso. Este e este formulário. E geralmente eu iria encher. Você sabe o que? Desculpe. Vá preencher o estilo de cor. E então, tipo, o nome de cinza. Legal. Você sabe, ou quente ou o que quer que seja. Aquecer um e criar esse estilo. Só estou me movendo um pouco mais rápido para você. Eu só quero que você não se aborreça, e estamos lidando com componentes agora, então tudo bem. Vês? Ilumine um pouco escuro nisso um pouco. E vamos pegar outras cores. Eu adoro como estes você pode puxar tantas cores legais muito rapidamente. E parece que pertencem juntos a maior parte do tempo. Talvez um pêssego. Tudo bem, podemos voltar a isso, mas vamos ver, vamos ficar longe das azeitonas e meio que ficar nesta paleta. Alguns destes são divertidos. Veremos se podemos jogar alguma coisa. Tudo bem. Sim, isso está parecendo legal. Vamos manter isto por perto e à mão. Então eu vou mudar este Teoh este fundo a partir de agora. Ainda assim, podem ser todos os direitos. Temos o nosso cardápio. Queremos o dedo do pé alto. Como este. Diga, tipo, ei, isso está ligado. Então o que vamos fazer é escolher a cor do salmão, e às vezes gosto de gostar quando tenho um ajuste de cabeça, um, medo. Se você está trabalhando para alguém, nomeie totalmente todas as suas camadas. Mas, hum, o que nós vamos fazer é fazer disso um componente agora para que possamos fazer o nosso menu e depois mudar. Então este é o nosso corcel ativo, e vamos continuar a ligar isto. Então, obviamente, com esse passado, acho que já não estou gostando. Eu só queria ficar um pouco mais escuro. Sim, tudo bem. Então o menu não precisa ser branco, mas tudo isso pode mudar rapidamente. Ok, então o que nós queremos fazer é que nossos muitos são o fundo, que provavelmente nem vamos usar, mas levá-lo para a altura da sua barra por enquanto. Sabe, eu vou andar com isso. Ok, aqui está o seu item do menu. Então, vamos apertar a opção de comando K, e isso automaticamente fez dele um componente. E o que eu gosto de fazer é ou esta é a página base e todos os componentes estão nisso. Ou você pode apertar o comando D,o que o torna uma duplicata. você pode apertar o comando D, E então você pode pegar seu componente e movê-lo para outra página como você pode fazer uma página. Isto são componentes, mas para fins de conveniência, vamos mantê-lo aqui nesta página para que eu possa mostrar-lhe como funciona. Então o que eu gosto de fazer é puxar o seu Este é o seu componente principal. Veja como fica com estes quatro quadrados, a forma de diamante, e então este é o formato de diamante aberto, que é este é o seu componente. Hum, cópia. Então, o que quer que façamos aqui, , digamos “nós “e mudamos isso para “Blue “, o que parece horrível. Desculpe. Bem, Bem, o que acontece é que todas as instâncias mudam. Então vamos fazer este voo e o que vamos fazer é esconder este fundo. Não precisamos, mas podemos. Podemos fazer todo tipo de coisas legais com ele agora que temos aquele fundo, algo escondido. Então, o que? O que acontece é que não funciona muito bem imediatamente. Então está meio quebrando. Não há estofamento. O alongamento não funciona. Então o que queremos fazer é que este é o grande negócio dos componentes. É como essas seções funcionam? Então, o que? Não queremos esta escala. Queremos ir para a esquerda e para a direita Então ele vai centralizar o taxado aqui e, em seguida, como você digita, ele vai centrar neste quadro para que ele vai manter a mesma largura. Então nós queremos fazer a mesma coisa para esta peça de fundo que vai mostrar para agora é meio divertido como você pode ver como ele está funcionando. Então o que normalmente queremos fazer é testá-lo para fora sobre estes a cópia do componente. Então esta parte de trás aqui fundo nós queríamos escalar esquerda e direita, nós não queremos Oh, nós não vamos arrastá-lo enorme. Mas se você quiser, você pode definir uma onda inferior superior. Se isso mudar, digamos, por exemplo, em uma página responsiva, o cabeçalho precisa ser um pouco maior porque o conteúdo está sendo reduzido. Então o que vamos fazer é fazer isso parecer melhor e nomear esse estado ativo. Ok, então agora nós temos nosso item de menu e podemos duplicá-lo agora e então nós vamos voltar para o nosso componente. Isto é muito fixe. Eles escondem e então, veja, vamos ver, isso é sobre nós e eu sou um tipo ruim ou às vezes eu gosto de voltar aqui e mudar minha mensagem. E eu quero que tudo isso seja maiúsculo tão rápido. Isso e boom, todos os seus componentes são maiúsculas, então eu vou fazer outro diz portfólio e espaço para fora. Nem todo mundo quer casa. Eles ainda estão. E eu: “ Vamos lá, Vamos lá, por favor. Está bem. Outra página. Isso é mais longo. Opa. Desculpe. Portanto, este é um bom exemplo de quando você define seu texto no meio e você tem seu espaçamento de parágrafo na altura da linha definida. Corrija isso. Isto pode estar um pouco alto demais agora. Então o que podemos fazer é entrar em “Onde está?” Eles adicionaram tanto. Agora está bem aqui. Eu estava procurando por eles. Desculpe, eu deveria estar te ensinando. Então assista. Isto é eu bater-lhe. Você pode ver que a outra página é já que estamos mexendo com essa parte, mas você pode ver como ela está funcionando aqui, então eu vou dizer 96 livros, não 96 96%, mas ok, 20. Tudo bem. Então você pode ver agora eu só vou dizer para casa só porque ok, então esta é a nossa página ativa. Então o que podemos fazer é entrar em nosso componente e você pode ver que escondemos o estado ativo atingido em segundo plano para que possamos clicar no estado ativo e podemos realmente clicar no fundo que se parece com cocô. Então o que nós vamos fazer é voltar para este original este fundo e mostrá-lo e nós podemos mudá-lo Teoh White em, como, como, p por cento então Mas nós não queremos que ele apareça em tudo. E isso mostra que o que é legal é que você pode ver seu espaçamento um pouco terrível. Mas o que queremos fazer é escondê-lo. Mas está se mantendo ativo por causa da casa. Mas nós temos, um, com os olhos abertos para que você possa vê-lo. Então, sim, essa é uma boa maneira de fazer alguns menus rápidos. Então vamos continuar em movimento e trabalhar na configuração de componentes para formulários que entram em jogo e ficam meio irritantes 3. Componentes de formas e como criar componentes de forma mestras: Certo, vamos entrar em formas. Então vamos usar alguns destes cinzentos que eu posso precisar de um pouco mais de que possamos extrair. Pode haver alguns mais leves, mas só por conveniência, vamos continuar a andar. Então o que vamos fazer é fazer a mesma coisa de novo. Nós queremos tipo de caixas para essas áreas, então eu quero, tipo, uma base de forma maior, e eu vou apenas estender esses três vem e nós vamos definir isso para 64. Então essa é a nossa base. E então eu quero, tipo, uma base de 32 pixels aparecer para o próprio formulário. O nome do formulário. Ok. E às vezes, se você quiser, você pode apenas estes podem ser da cor que você quiser, porque nós não vamos usá-lo. Então, uau, isso é tão ruim. Mas pelo menos você tem a idéia. Então este será o nosso formulário, e este será o nome para o formulário. Então este será o nosso formulário, E queríamos esticar sem quebrar a parte de cima ou a parte inferior, e isso torna muito mais fácil quando você tem um nome, primeiro nome, sobrenome, qualquer coisa. Isso é o que vamos fazer é fazer disso um componente e a maneira que isso vai fazer é que nós vamos tê-lo em componentes. Então eu vou digitar texto e apenas dizer, hum, o nome da estrela. Então esta estrela será, tipo, tipo, vermelho brilhante para o mesmo e, em seguida, o nome que vai usar eu gosto desta marinha. Então vamos fazer isso “Quem não pode talvez”. Certo, então vamos selecionar o nome Click Phil Boot Camp, talvez. Ok, desculpe. Isso parece horrível, mas você vai ter a sensação disso, então esta será a nossa forma. E o que gostaria de fazer é apenas para que pareça um pouco interativo. Nós vamos fazer uma borda de três pixels sobre ele não são borda, mas cantos arredondados. Então eu vou fazer esta seção, um, seu próprio componente, seu próprio componente, e eu vou chamá-lo de forma barra concurso, e eu acho que vou manter todas as letras minúsculas desta vez. E então vai nomear esta parte. Apenas campo de formulário, ok. E eu vou seguir em frente e estilo isso para fazermos um derrame. Na verdade, este é um tipo de estilo antigo, então eu vou manter assim, mas, mesmo se aplica. Você quer este tamanho se você quiser apenas o subjacente, como android ou alguns dos estilos mais recentes. Vou te mostrar como fazer isso em um segundo. Hum, vamos ver. É como um evento separado. Aperte isso com um pixel e veja se não podemos usar isso para um pouco mais escuro. Tudo bem, vamos para dois para que todos possam ver. Certo, agora temos dois componentes. Temos o cabeçalho do formulário no campo do formulário. E o que queremos fazer é dentro deste campo de formulário, queremos digitar são tipo e dizer, vamos ver, primeiro nome. E eu não quero que isso seja tudo, então eu vou voltar. Então eu estou no espaço para fora. 32 pixels da borda. E isso será, hum, texto do formulário. Tudo bem, então este fundo obviamente não está por perto para que possamos escondê-lo. Então temos o início da nossa forma. Nós temos um nome, que isso é realmente grande para isso. Nós apenas orgulho fazer tipo de pequeno e pesado, menor e pesado. Ok, então agora nós queremos entrar e entrar neste fundo, e nós queremos que este Tiu fique à esquerda, mas, hum, que nós queríamos esticar e nós queríamos ficar no fundo porque nós queríamos ser empurrados contra esta forma. Então eu vou entrar aqui e dizer esquerda e direita para que ele possa esticar um pouco. Faremos a mesma coisa com o nome, mas queríamos ficar à esquerda. E a beleza disso é que você pode duplicar isso, e se está falhando, você pode voltar e dizer: “ Oh, Oh, eu não fiz isso à esquerda ou é assim que eu queria reagir. Então eu vou desligar isso. E agora o que fazemos é agora que temos campo estrangeiro e cabeçalho, vamos fazer um componente de ambos. Ok, então o que aconteceu foi que ele fez uma instância de ambos ao mesmo tempo, então ele quebrou forma, cabeçalho e campo de formulário. Então este é o nosso novo componente, que é a forma mestre ou vamos fazer a forma Mestre, minúscula. Vamos lá. Certo, então o que vamos fazer é, já que já temos isso aqui, vou manter meus componentes acima da página. Às vezes é bom não ter saído. Hum, vamos fazer sim, apenas fazer estes um pouco, fazer estes um pouco mais pequenos e mantê-lo aqui por enquanto. E o que fazemos é manter esses dois à esquerda se precisarmos mudar o meio. Ok, então agora que temos isso que vamos fazer é na verdade Bruce Command De e vamos fazer uma cópia disso. Vamos selecionar o mestre e puxá-lo para fora da página para que ele fique fora da página inicial. Então agora vê o que está acontecendo? Então, o que aconteceu? Este nome é para ser esquerda e direita? Então o que fazemos é voltar para aqui e dizer, esquerda e direita. Às vezes o que acontece é que eu meio que fiz isso de propósito. É isso? Será que ele irá substituí-la. Só vai dizer: “ Ei, Ei, se você não disse nada, nós só vamos fazer com que seja deixado. Então este, este é deixado. Esta é esquerda e direita. Então o que precisamos fazer é dizer esquerda. E agora temos que esticar corretamente. É meio divertido. Então, digamos que temos uma barra lateral aqui. Vamos ter um período separado. Certo, digamos que queremos espaçar isso, então teremos o primeiro nome. Então nós queremos ter, um, primeiro nome aqui, e nós vamos manter o turno uma opção e duplicado. E obviamente não precisamos disso. Então, há duas maneiras de fazer isso. Você pode apenas esconder isso, isso, esconder isso, que às vezes eu faço muito, na verdade, ou você pode acreditar e então vir aqui para formar campo e apenas manter a opção pressionada, e isso vai fazer uma cópia do campo estrangeiro acima maior. E isso não tem o cabeçalho. Então você pode vir aqui e dizer o sobrenome. Ok, então isso parece muito ruim para mim. Então vocês provavelmente Uau, esse cara é um designer, então eu vou deixar isso muito leve e nós vamos fazer isso. Oops. Vamos fazer o isqueiro, e você pode ver que o que aconteceu foi neste mestre. Não foi para o campo, então tenho que voltar. E é por isso que eu gosto de ter isso muito rápido para mexer. Assim, você pode ver se você pode alterar realmente rapidamente seus campos de formulário. Então, o que? Vamos fazer o troco dele? Nosso derrame só um pouco mais leve. também. Tudo bem, então agora que temos uma bela configuração de formulário, uma coisa que você pode fazer é o seu edifício Estes. Então, por exemplo, digamos que devemos encarar isso. Então eu notei quando eu digitei país, o que estava acontecendo era que isso está definido para a linha central. Então temos que voltar aqui. Mesmo que isso seja esquerdo e direito, nós fazemos isso e temos nosso espaçamento correto para o país. Então, o que é bom é que agora o país pode abranger toda a coisa sem esticar e não leva confuso para cima. Mas o que queremos à medida que construímos as formas é uma realidade que é a mesma maneira. Então o que vamos fazer é voltar para este clique esquerdo e eu vou corrigi-lo. As idéias que você quer deixar cair para mostrar um drop down Então você volta para o campo Farm , que é bom, é como, você sempre pode voltar a isso e vamos apenas fazer um estreito ir para baixo. E obviamente não queremos isso em todos eles. E vamos fazer apenas um simples bêbado e vamos fazer essa cor interativa lá, já que assim como essa cor, vamos chamá-lo de salmão. Certo, espere uma bota. Salmão do acampamento. Ok, então o que está acontecendo aqui? Por que não está ali? Então não queremos isso só por conta do país. Não queremos isso lá. Então o que fazemos é voltar ao campo e dizemos que queremos que isto seja escondido. Mas antes de fazermos isso, queremos que isto fique à direita e queremos que seja como aquela lacuna de 32 pixels. Então o que fazemos é enviar isto para escrever e centralizar. Então o que acontece é que agora, enquanto isso se move, ele permanece o mesmo e vai andar para a direita. Certo, então agora voltamos ao original, abaixamos uma fila e escondemos. E então nós pensamos, bem, ele foi para o país. Então tudo o que temos que fazer é entrar lá e clicar. Sim, eu queria estar lá para que você pudesse ver como é super legal. E alguns dos componentes originais têm um monte de campos neles que você oculta e faz todo tipo de coisas com Então, por exemplo, nome com não nomeado, mas número de telefone. Então vamos fazer uma versão de número de telefone e o que queremos usar é o campo de formulário base, e então vamos criar eu sou diferente versão dele com um componente dentro dele. Então vamos ter um acompanhante para a América. Então, às vezes eu faço isso e digo: “ Ei, Ei, eu quero separar essa instância. Isso não é mais o campo de formulário. Então, esta é a primeira vez que estamos ficando longe de usar essa instância principal para que não podemos fazer isso ou mas você quer tentar e não fazer isso tanto quanto possível para que você utilize as seções inteiras que você pode alterar ao longo de todo o aplicativo ou web. Aquele. Você está mudando essas cores. Ele muda ao longo de todo o local dos buracos. Então eu vou manter o campo de formulário. Mas o que nós vamos fazer é ir Teoh esconder o texto do formulário, e então nós vamos adicionar outra peça aqui, na verdade será apenas duplicado. Então vamos dizer o comando D e C texto telefônico. E agora vamos mudar isto. Não se preocupe, não vai. Não vai estragar tudo o resto. Então o que vamos fazer é dizer que queremos um código de área de três dígitos e, em seguida, três membros batem em quatro números, e queremos ter, tipo, um menu suspenso mais um. Então já temos essa lista, herói. O que vamos fazer é aceitar isso. Eu só estou segurando a opção basicamente e arrastando isso de um para este aqui. E eu vou dar o dedo do pé. Não se assuste. E não vigie ali à direita. Mas o que queremos fazer é que ele caia aqui, e eu estou em uma espécie que um pouco. Depois que eu fizer isso, eu vou copiar este retângulo são apenas opção de espera e queda de telefone seguro. E dentro disso, você quer manter tudo junto para que você possa até mesmo fazer um grupo interno. Então nós temos este telefone cair, e é a parte interna. Então o que vamos fazer é como um 32 por 32. Ok, parece 37 meu 32. O que é que isso tem de entrar? Tudo bem, então agora vamos espaçar isso e colocar a entrega ao lado dele, e então vamos pegar essa mensagem telefônica, duplicar isso e dizer país, é um acompanhante. Ok, então nós a colocamos para baixo e pode ficar um pouco maior, mas estamos fazendo isso rápido. Então queremos que isto seja capaz de esticar, e queremos que ele realmente fique à esquerda para então eu vou trancá-lo para a esquerda e não atravessar todo o caminho. Você quer que este seja um centro de linha porque pode haver adição de mais na verdade. Vai fazer. Deixou uma linha à esquerda à medida que cresce, eles empurrarão a flecha. Portanto, esta seção precisa ser agrupada para que funcione em conjunto também. Então vamos mudar isso entre o dedo do pé esquerdo. Sei que tudo isso é só para a reforma, mas uma vez que você está feito, você está acabado. É legal. Então vamos colocar isso em três. Então temos o nosso número de telefone aqui, e nós não vamos ter que ser que você precisa dele. Não é. Isso não é necessário. Aqui está o nosso telefone, mas está tudo confuso agora. Então voltamos para aqui e escondemos isso trazemos o texto do formulário de volta ao país, e diremos que esta é a seção telefônica. Agora temos a seção telefônica, que esconde o esconderijo, a área telefônica. Mas queremos que a área do telefone seja vista. Então o que queremos fazer é vir aqui e dizer que quero ver o telefone, está bem? E queremos tirar as outras partes. Oops. Ali. Então agora temos essa seção de telefone, que provavelmente deve ficar assim onde todos eles estão abertos. Mas então isso está fechado. Então você faz isso muito rápido. Boom. E você tem um telefone e veja se está esticando. Isso não está esticando corretamente, então bem, vai, mas, mas, hum, nós vamos chegar lá então vamos voltar para a mensagem telefônica. Então eu saí. Sim, isso mesmo. Ok, então agora é muito simples. Se quisermos um e-mail, deixe-o cair. 123 E todo mundo precisa de e-mail. Então faça o e-mail na refeição. Não, correio. Depois, como, este texto de formulário é muito semelhante. Então o que eu vou fazer é voltar rapidamente e mudar de campo de treinamento para treinamento cinza. Tudo bem, então é meio divertido. Conforme você constrói os componentes, você pode ver como você pode rapidamente fazê-los esticar, construí-lo, ir mais rápido. Vamos fazer uma caixa de comentários em seguida, então este vai esticar porque você vai precisar de um monte de parágrafos. Vamos saltar para uma caixa de comentários. O que vamos fazer é duplicar esta seção e em uma caixa de comentários, geralmente apenas começar de novo a partir do mestre de formulários para torná-lo um pouco mais fácil. Vamos em frente e ver se podemos fazer tudo juntos. Será uma espécie de campo de formulário louco, mas vamos fazê-lo. Então vamos ter um comentário que não é necessário. E vamos ver o que acontece. Então o que vamos fazer é puxar este formulário, este mestre todo e ver o que acontece. Então não está funcionando muito bem. O que queremos fazer é ter essas pilha sem mudar, e queremos que isso seja capaz de lidar com parágrafo e, em seguida, queremos que pequeno drag aberto Borras . Se você gosta de digitar um pouco mais, estou brincando de advogado do diabo em tudo só para que você possa ter uma noção do que acontece. Então eu vou mudar esses formulários para baixo ou os componentes para baixo, e o que nós queremos fazer é voltar para o antes e esta seção este texto formulário, e agora nós queremos dizer topo. Então o que vai acontecer é “boom”. Você já entendeu isso, e eu vou ir em frente e adicionar um comentário Deplora em meio. Ok, então aqui está um exemplo, também, também, de por que não está embrulhando. Então o que queremos fazer é voltar para seus textos de formulário e dizer, esquerda e direita, e agora vamos configurá-lo para estado dentro desses parâmetros. Então será como 32 pixels. Estão a 32 pixels do topo, e chegaremos lá. Então agora queremos a maneira seção componente. Queremos que isto seja corrigido. Então esta seção nós realmente queremos que essas áreas de comentário flutuando. Então, como você obtê-lo? Correto. Então, se algo é estranho, como quando você seleciona tudo e você está arrastando, ele não está funcionando corretamente. Você pode voltar ao seu formulário e vamos verificar isso para que tenhamos definido da esquerda para a direita. Mas isso está definido para escala, então nós realmente queríamos de cima para baixo, então automaticamente bloqueá-lo, e nós vamos verificar este para Nós não saímos e topo. Então o que acontece é que ele fica no topo. E à medida que rolamos isso, ele fica maior e você tem mais espaço para o seu parágrafo. Então agora nós realmente chegamos perto disso. Vamos nos livrar da área suspensa, herói. Nós vamos para o campo de formulário, fazer homens um pouco. E eu quero este D A D C. Que seja. Realmente simples. Uh, eu vou desenhar vinho para afiar e segurar o turno. Acho que vou me aproximar, mas estamos fazendo rápido para vocês. Ok, então nós temos que as linhas de campo, uma linha de comentário. Vamos esconder isso, entrar aqui, e queremos ver as linhas de comentários. Ok, o que aconteceu? Então agora eles estão ali. Então é por isso que é uma beleza fora da beleza. É só um belo dedo do pé. Tenha-os aqui mesmo. Estes componentes para apenas uma bagunça com então vai voltar para o campo de formulário. Olhe para estas linhas de comentários. Nós os juntamos, mas vamos fazer deles um componente, o que você não pode, porque eu estou em uma área duplicada, então eu preciso vir aqui renda para a linha de comentários. Clique aqui. Oh, tem que estar lá fora. Hum, isso é certo. Então o que vamos fazer é definir isso para a direita e para baixo, que ele sempre fique bem ali. Precisa ser um pouco mais forte, então eu vou fazer isso. Não, este aqui. Sim. Tudo bem. Então agora temos nosso componente que está trabalhando sua mancha direita e inferior, e você pode fazer seu componente saltar para fora tanto quanto o nosso ir para baixo quanto você quiser. Então é muito agradável e simples agora que temos, tipo, tipo, um campo de formulário que é realmente forte tem um monte de conteúdo nele que você pode esconder a maior parte dele, e isso você precisa dele. 4. Botões - principais de botões de responsivo e botões secundários e mais: agora que temos nossas formas legais e temos nosso estado ativo que vamos fazer é apenas rapidamente faz ele seções de cabeçalho. Seção um, eu te digo 36. Ok, Ok então o que podemos fazer é novo estilo de imposto cada um para nós podemos fazer isso uma opção de componente para cima. Ok, bem, diga cada um com o meu, nós vamos fazer a fila longa. Isso é tão exagerado, mas apenas fazendo isso por diversão. Então nós vamos fazer esquerda e inferior sobre isso e nós vamos tomar Nós vamos duplicar este controle, de, de, eu vou tomar este componente mestre são componentes, e então este é um componente duplicado aqui. Então o que nós queremos é este texto para dizer que é a esquerda e inferior para que ele fique ao lado linha, dê um pouco de espaço para respirar, muito mais espaço para respirar se quisermos voltar para aqui. Eu estava tentando torná-lo um pouco mais agradável para vocês, mas digamos que este é o nosso comprimento de seção que nós temos então 8 32 Então o que nós queremos fazer é voltar aqui e este texto diz 8 32 Eu sei rap. Tudo bem, então vamos fazer uma nova seção, vamos chamar esses botões, ok? E desde que eu tinha esse espaçamento que eu quero fazer é jato estes para combinar com a cor. Ok, só vou um pouco mais rápido e desligar estes para tornar um pouco mais fácil. Então precisamos de um botão. Não digas que vamos chamar este botão primário e vamos fazer isto muito pequeno porque isto é apenas nomeá-lo. Só estamos dando um nome. Então nós queremos apenas um botão padrão e nós não queremos seguro. Vamos para o Big 64 por, tipo, 200 só para rapidez rápida. Então nós vamos enchê-lo com nosso salmão, e nós vamos colocar um texto aqui para dizer, como enviar, fazer isso branco. Isso será 18 pixels. Vamos 16 e 16. Aqui estamos indo Teoh centro, alinhe o texto e vamos espaçar isso com 32 pixels na borda e, em seguida, um pouco na parte superior e inferior. Vamos descobrir isso em um segundo, mas este será o nosso botão principal, e você pode selecioná-lo e alinhá-lo desde que o texto esteja centralizado. Às vezes, a altura da linha muda um pouco, dependendo do texto da compilação da fonte. Então nós temos o botão principal que eu trouxe no meu eu acho que eu chamei um ponteiro, que é um arquivo ping que eu apenas trazer para dentro, então para mostrar rapidamente o que está acontecendo. Então o que queremos fazer é ter, hum este é apenas o nosso botão principal, e vamos fazer um secundário, mas vamos duplicar isso em um segundo. Então o que queremos fazer é fazer disso um componente, adivinhar outro componente e dizer botão e queríamos ser primários. Vou te mostrar o porquê em um segundo. Então nós duplicamos isso controlou a tomada do componente mestre aqui. Vamos deixar à esquerda. E o que queremos fazer é vir aqui e ver o passado. E eu acho que é mais fácil fazer um estado ativo desde que você não esteja mudando tudo isso como louco. Mas queríamos ser esquerda e direita, esquerda e direita, e depois centro. Então, esses dois centros, então eu vou esconder isso, e este é o nosso estado ativo. Então vamos fazer isso rosa por diversão. E agora o que fazemos é esconder o activo e temos o nosso passado. Então eu vou selecionar o botão duplicado e segurar a opção e mudar E vamos colocá-lo 40 pixels separados e vamos dizer toque, eu vou dizer foco. Ok, então podemos fazer isso como um pairar sutil. Hum, o que podemos fazer é apenas chamado de pairar em vez disso. E o que vamos fazer é dizer que é Onley rosa no fundo. Então, o que é bom é que você pode vir aqui e esperar, hein? Viu o que eu fiz? Explicit Nome-o, no entanto, lá. E nós vamos mostrar o plano de fundo, e nós vamos colocar este pairar para baixo e fazer apenas um simples realce de três pixels na parte inferior. É assim que se acerta. Então você pode tirar seu passado e dizer contracapa, esconder isso por um segundo e você pode passar por isso. Então, , digamos que é 90%. Ok, então agora o que podemos fazer, ainda não é. Sim, vou fazer algo um pouco diferente. Está bem? Só temos que ser pacientes comigo. Eu vou fazer é então nós temos nossa barra de pairar e vamos fazê-lo assim na parte inferior e para torná-lo ainda melhor, o que podemos fazer é selecionar ambos, agrupá-lo, digamos, no digamos entanto, o que vamos fazer é adicionar, na verdade, apenas uma simples sombra. Hum, muito bem devido a e dois e 10%. Muito pouco. Ok, lá. 20%. Às vezes eu gosto de usar as cores que têm que eu estou usando já aqui. Então eu gosto de ir a uma cor local e usar esse cinza, mas depois trazê-lo de volta para eu gosto 40 porque é como, OK, legal. Certo, então agora não queremos isso. Então, o que fazemos é voltar para o nosso botão principal e esconder a riqueza que paira. Na verdade, vamos manter o pairar e depois esconder tudo isso. E agora em semanas de Hever como essa, nós queremos isso, mas não isso. Agora temos o botão de enviar, temos o foco dela, e podemos até fazer um clique. Então o que vamos fazer é voltar aqui, duplicar nossos antecedentes e dizer “clique”. E o que vamos fazer é torná-lo o mesmo vermelho, mas ter um interior o fato. Então, em sua sombra e novamente, as cores locais vão com a marinha e soltam para, tipo, 15% e para Ok, então agora temos no clique, e podemos esconder que duplicar o envio de 40 pixels, Veja clique ativo, e vamos mostrar clique e fundo alto. Portanto, este é o seu foco e passe o mouse e, em seguida, clique em Apenas dá-lhe uma pequena sombra de gota sutil. Pode ser muito sutil, na verdade. Então vamos voltar para clicar na sombra dela e bater isso até 20%. Tudo bem, então agora o que queremos fazer é dizer, hum,que hum, precisamos de deficientes. Então temos o botão primário. Se voltarmos aqui, acho que entendeu a ideia. Nós Oh, sim. Você sabe, nós queremos fazer isso. Ok, então agora nós mergulhamos, lambemos o fundo, e você pode apenas segurar a opção e arrastá-lo. Faremos isso para salvar deficientes. Oi. Isso e vamos desativar o botão. Está bem? E isso é bem simples. Acho que isso é tudo o que queremos e poderemos mudar a cor do texto como quisermos. Mas para lembrar, eu acho que é importante duplicar seu texto e ter isso como uma cor. É realmente útil porque se você esquecer, então você obtém todos esses diferentes cinzentos e lá, tudo bem, tudo bem, então nós desativamos e submetemos, e assim você pode ver que todos eles precisam ir para a esquerda e para a direita, e você verá isso em um segundo. Mas o que queremos fazer é mudar essa cor, também. Nós não queremos isso. Sim, e isso precisa ser um pouco mais leve. Vamos, OK, OK, então agora vamos esconder desativado e mostrar, enviar e mostrar fundo. Então voltamos aqui para ocultar e mostrar fundo, desativar e depois ocultar enviar. E lá estamos nós, tudo bem, muito fácil. Mas a idéia é que o que você quer fazer é configurá-los para que você possa alterá-lo em toda a sua composição e torná-lo super fácil. Então, como você está construindo, você tem outro botão e você diz, Entrar e você pode fazer menor e é espaços corretamente e funciona muito bem sido e fazer alguns botões secundários. Então o que vamos fazer é ir para o botão principal que temos e vamos duplicar o mestre. Então, se você está tipo, onde está essa coisa? Sabe, se você está construindo uma tonelada de componentes e você é como eu às vezes você tem área de componentes desorganizada. Uh, você pode clicar com o botão direito sobre ele e dizer, Ir para o componente mestre vai saltar bem ali. Por isso, agora temos do lado esquerdo, o que é bom. E então o que vamos fazer é usar a opção de arrastar duplicado, e eu me encaixo na grade enquanto vocês estavam fora. Então, uh, uh, qualquer forma, vou clicar com o botão direito do mouse em desanexar instância. Então agora temos este botão e vamos torná-lo, hum, secundário. Vamos chamá-lo de secundário. E, uh, vamos apenas nomear este secundário. E novamente, se você quiser que seu texto seja todos maiúsculas, vamos ver aqui, todos os maiúsculos assim e certifique-se de que ele está no centro. Então o que vamos fazer com este aqui é tomar nós vamos ter branco como fundo e um golpe de sêmen de campo de treinamento para, e então nós vamos mudar nosso submissão ou cor secundária para o vermelho. Tudo bem. Então, agora que temos isso, o que podemos fazer é duplicar e fazer o pairar e focar. Assim como o outro é divertido. Às vezes para ser como, Bem, isso vai parecer? E você pode liberá-lo rapidamente. Então eu vou fazer isso muito rápido. Você vai agrupar isso, digamos, fundo. Vou duplicar isto e dizer “Hover”. Opa. Desculpe. Indo muito rápido. Tudo bem. Então é assim que o Hever se parecerá. Nós vamos fazer. Vamos apenas fazer cair isso para isso? Um, como cinza no foco. Vamos fazer rosa como a borda parece um pouco brilhante demais. Então você precisa aliviá-lo. Vou fazer disto um novo cinzento. Então, quatro. Oops. Muito bem, agora que temos o nosso disfarce, vamos adicionar um efeito a este mesmo efeito. E se você quiser Oh, você sabe, manter os efeitos semelhantes. Você pode vir aqui e nós gostamos desta sombra. Só vemos o estilo dos efeitos. Que não consegue soltar botões. Certo, então agora voltamos aqui para que ela se concentre nos efeitos do solo, mas não podemos soltar o botão, então tem que ser bom com um pouco da marinha lá dentro. Apenas gostaria de ter algumas dessas cores pop através. Este é um esquema de cores um pouco diferente, mas eu estou me divertindo, então vamos com ele. Uh, ok, então nós vamos duplicar, no entanto, tirar isso, e agora nós temos clique ativo. Então o que vamos fazer é voltar para aqui e ver o que está no pairar. Bem, na verdade, podemos fazer isso aqui também, também, para que você possa ver a sombra interior para que façamos comida. Cap não pode na sombra dela. Está bem. Tudo bem. Então eu volto para aqui, e uma coisa que eu faço é como, Ei, se isso é realmente perto, nós simplesmente não podemos duplicar isso. Mantenha-se ativo e mostre. E depois, ao fundo, afecta o campo de treino à sua sombra. Eu não sei se isso funciona, mas nós vamos com a frente para clicar na coisa que é bom sobre os componentes é que se você sentir que não está funcionando, você pode voltar e descarregá-lo. E isso vai mudar em todo este site. Mesmo se você tem, você sabe, várias peças que são realmente longas como um fim de, Ah, Ah, enviar que você quer uma realmente grande chamada ação, qualquer que seja Todas essas mudanças e nós configuramos isso para que esticar corretamente. Então, hum, então agora nós temos ativos, e nós vamos fazer, hum, hum, deficientes. Ok, então vamos apenas fazer este com aquele cinza e este mesmo cinza que você pode precisar para ser mais leve procurando são mais escuros, que você possa vê-lo. Sim, isso é bom. Então, Então, desative. Certo, então agora ligamos nosso botão secundário, e antes de fazermos isso, temos que nos certificar de acertar. Ei, este é o Mestre Símbolo Copy. Duplicar ligado. Vamos pegar nosso símbolo mestre aqui, e então vamos nos certificar que sim, esta é a nossa duplicata secundária. Vá para este. Desativar o plano de fundo. Ative a duplicação do cursor do mouse. Desligue. Ativar ativo. E a mesma coisa com deficientes ajuda a fazer isso. Eu sou a pessoa errada. Tudo bem. - Sim. No clique precisa de algum trabalho. Só não há mudança suficiente lá. Então, o que está acontecendo aqui? Vamos voltar para o nosso mestre para ter certeza de que estamos cobrindo corretamente, e vamos fazer isso muito rosa. Você vai fazer o que nós vamos fazer o ativo como rosa. Uh, você não pode cor-de-rosa. Ok, então agora sim, isso parece um pouco melhor, e funciona. 5. Mudanças - rapidamente turnos ao edição de componentes principal.: Vamos jogar o Devil's Advocate novamente e dizer, como neste momento, o cliente era como este parece 2015. Precisávamos ser mais recentes, e queremos os campos de formulário que tenham apenas um traço na borda inferior inferior. Então o que você pode fazer é entrar aqui de volta no seu original. E em vez de ter este retângulo, o que vamos fazer é apenas adicionar o que vamos fazer é duplicá-lo. Então temos o mesmo tamanho e tiramos os cantos arredondados aqui, vamos mostrar que vou tirar o golpe e agora temos que preencher, mas não quero. 64 pixels. Vamos fazer dois pixels e o que vamos fazer é soltá-lo. E o que eu gosto de fazer é ter aquele retângulo de base lá atrás para que eu saiba onde minha borda está para parar para o tamanho. Então agora vamos esconder isso. Então agora nós temos um bom quadro, um, agradável quadro são campos de formulário que são um pouco mais limpos, e sua caixa de comentários não está funcionando corretamente, e é porque nós adicionamos este, um, o retângulo que está definido para escala Então nós realmente queria dedo inferior e, em seguida, ele automaticamente faz que dois pixels para que você possa ver rapidamente isso. Espero que consigas ver. É um pouco leve. Então o que é bom, também, é se você está vindo e dizendo Ei, eu quero mostrar que este aqui está destacado Você pode entrar neste campo de formulário especificamente e dizer, Ei, isso é isso é acionável, você sabe, e provavelmente quebrar isso e fazer isso rosa para se divertir. Então isso é sobre Hever ou ou foco, e então você pode dizer que você está realmente digitando e dentro agora, então essa é outra maneira de fazê-lo muito rapidamente. 6. Menu de flutuação - alteramos o menu original e construir um menu de -: Tudo bem, bem-vindo de volta. Vamos saltar de volta para a área superior e olhar para algumas maneiras que você pode alterar componentes por página apenas muito rapidamente com imagens e impostos. Então o que vamos fazer é nos livrar desta parte e flutuar agradável imagem de skate por trás disso e torná-lo o menu flutuar no fundo da imagem para que cada página tenha uma configuração de imagem diferente. Então vamos apenas colocar ah, sistema de menu aqui que eu acabei de fazer. E o que queremos fazer é ter certeza de que temos um pouco de escuro no topo para que o menu sempre mostre que vamos quebrar isso e vamos fazer um Grady Int Phil linear. E então isso desaparece para zero. Veremos como funciona, mas talvez não precisemos de muito, só deixaremos de volta em um segundo. Então basicamente fazer retângulo e soltá-lo atrás de seu comando opção colchete esquerdo, e então nós vamos preenchê-lo com uma imagem. Então nós temos apenas algumas imagens de skate. Vamos ver, este é meio legal. Isso pode ser sim, vamos continuar com este. É um pouco baixo demais. Então o que podemos fazer é cruzar bem antes disso, eu quero ter certeza que eu tenho o A agradável Uma boa altura. Então vamos fazer por 92. Certo, agora vamos cortar a identificação. Traga isso para baixo. Tudo bem, isso parece um pouco estranho. Agora, o que queremos fazer é clicar nisso e voltar para o componente mestre, Ir para o mestre um, que está bem ali à esquerda. Então, quando temos isso, eles parecem um pouco gordos agora. E não precisamos desse passado. Então, se estamos mudando, queremos ter certeza de que estamos fazendo tudo juntos. E geralmente quando eu colocar isso juntos como o sistema de menu, eu vou salvar isso como um componente também. Então, o que é legal é uma vez que entramos na seção principal que esta ação ou o estado ativo no botão, queremos ter certeza de que você tem a sua esquerda e direita, então ele vai esticar com ele também. Deixe-me voltar como parte do estado ativo. Você quer que ele fique no fundo. Então, se não está na parte inferior e está definido para escala, o que acontece é que se você encolhê-lo, a linha encolhe e você não quer isso em tudo. Então você quer andar por baixo ou por cima, dependendo do seu design. Então e agora, agora que nós meio que liberamos algumas das cores no fazer este rosa para se divertir e nós vamos nos livrar desse fundo em 8% nós vamos esconder isso. Vou escondê-lo aqui, ID. E agora vamos voltar para esta seção principal e desligar o Active State para então agora estamos em casa e temos aquele belo menu. E o que é bom é dizer, você quer dedo do pé, fazer outra página e você transformar isso em um componente. Então este pode ser o menu principal. Mão irá duplicar isso e tirar o menu principal. Oops. O que eu fiz lá? Pegue o menu principal e coloque-o por outro. Então, o que é bom é que você pode mudar esta seção em todo o site. Então, por exemplo, bem, vamos fazer disso tudo um componente também. Então vamos adicionar a navegação principal não estão na navegação, o texto principal da página. Então o cabeçalho um e eu quero que este não seja todo maiúsculo, então nós vamos ter isso normal. Vamos fazer este fedorento grande em maior. Vamos lá. 64. Está bem. Tudo bem, vamos. Ainda maior. Tudo bem, então agora o que queremos fazer é definir este Grady int fade esta imagem de fundo e o cabeçalho um dois em que, que é bom. Se você configurar isso em seus têxteis, basta ir em frente e chamá-lo de H um. Mas vamos selecionar todas as três opções de comando K. Este será o nosso herói, então eu copiei isso duplicado e levo o herói aqui em cima. Então o que é bom é dizer que queremos outra página. Apenas duplique a página. Mova todas as coisas rápido, só para que você possa ver. Temos outra página. Selecionamos este componente, ela é uma imagem, e vamos tentar este. Está bem. E agora vamos cortá-la. Já está preparado para cortar frio. Entramos no nosso cabeçalho um e gostamos de rachaduras. Não sei se isso é um skate ou não. Então precisamos de uma linha esquerda, então voltamos para o nosso componente e uma cal à esquerda. Tudo bem. Assim, rapidamente obter uma idéia de como liberar páginas diferentes com o sistema de menu diferente. 7. Botão com ícones - a criar vários ícones e estados ativos.: Vamos fazer um salto rápido em um botão com um ícone. O que vamos fazer é muito simples. Botão tem os diferentes ícones de mídia social nele, e você pode trocar muito rapidamente. Então, bem, fazer um botão branco com um golpe e fazê-lo bastante sutil e fazer. Isso vai descer para 56 para as mídias sociais. E digamos, você sabe, fazer um acompanhamento ou algo assim para tornar isso ainda menor. É bom no 48, então não é esmagador. E eu disse, este texto na linha esquerda, dar-lhe algum espaço. Vamos trazer o Twitter primeiro. Então você tem o Twitter e o que vamos fazer é espaçar isso. Uma vez que todos dizem seguir, vamos centralizar isso e ter o espaçamento que 32 Tudo bem, então bem simples. Opção Comando K. Então temos nosso botão social Kim digitando com vocês assistindo. Ok, então o que nós queremos fazer é ser capaz de arrastar isso para fora e ter os diferentes botões de seguir para que possamos até mesmo fazer um diferente, também, onde nós temos apenas o nós como uma versão pequena como 32 pixels. A mesma coisa. Às vezes, se temos algo, basta colá-lo atira para o canto superior esquerdo apenas para olhar para eles. Então uma das coisas que você pode fazer é jogar todos esses ícones aqui e um centro de linha. Alinhe verticalmente e solte-o neste botão. Alinhar. Linha vertical. Opção horizontal Comando K. Você tem seu componente social pequeno. Certo, vamos fazer uma duplicata disso. Eu peguei o original. Puxe-o para fora. Então o que é bom é dizer, você tem isso, mestre, você entra e esconde tudo isso. Então, quando você entra neste social principal, digamos, vamos começar com o Twitter e queremos tê-los trancados juntos assim. Tudo bem? Eu acho que isso é bagunçado. Tudo bem, então tudo o que você faz é vir aqui, desligar, ligar o Facebook, depois desligá-lo. Twitter, ligue o Lincoln. E assim por diante e assim por diante. E super fácil. Super, Super Fácil. Por alguma razão, essa está parecendo estranha. Então nós temos que voltar para o nosso principal um rápido YouTube e assistir aquele ir para baixo na seção principal . Então isso é que é uma maneira de fazer isso pequenos botões de mídia social e não se esqueça de você enlatado. Hum, dizer assim está fora e bem, duplicar isso e dizer sobre e fazê-lo completamente cinza. Então, você sabe, se você está selecionando isso e você quer mostrar o botão de estar ligado ou o botão de rollover, então você apenas clica em esperanças neste aqui, ok? Assim, você pode ver rapidamente como é fácil fazer esses componentes. E então, por exemplo, se isso estiver no rodapé e nos rodapés em todo o site, então você pode simplesmente obter uma noção rapidamente. É quase como se você tivesse CSS visualmente para mudar tudo na hora. Então eu não vou gastar muito tempo nisso. Mas, hum, então nós só vamos virar o flop isso muito rápido. Opa, eu não tinha os outros lá dentro. Às vezes você tem que ter um show que você pode ver o que você está fazendo. Isso é meio divertido. Tudo bem, então agora eu vou Teoh, faça o Twitter fora. Ele é grande, só faz com que seja super fácil e bem longe. Você tem seus botões sociais e pode fazer rollovers qualquer coisa e estilo da maneira que quiser , mas antes de terminar, quer ver como isso funciona? Responsavelmente. Então vamos dar uma olhada nisso e ver se ele se estende e isso é o que eu estou falando é não, isso não está certo. Então o que fazemos é ir para estes, então selecioná-los todos e dizer que queremos ele no centro e queremos entre a esquerda e, em seguida, queremos que este siga seja Qual música? Este botão social principal aqui. Queremos que seja justificado. Vamos mantê-la justificada. Mas o que vamos fazer é dizer o certo e o centro. Então, à medida que este desliza para fora, ele vai ficar maior. Agora fizemos direito, e você pode até mesmo agrupar estes como um grupo e linha central aqueles para que eles permaneçam juntos no botão como atrás. Acho que devia mostrar-te isso. Então o que vamos fazer é agrupar isso e o que você tem que fazer é dizer, um centro e agora deve ir. Se não, teremos que fazer o quê? Só fez isso no Twitter. Então talvez você tenha que mostrar, hum, diz centro. Tudo bem, então é bom que você pode apenas testá-lo. Então, você tem um bom botão que segue e nenhum trocadilho pretendido e pode esticar a sua resposta de conteúdo. 8. Componentes de seleção - botões com os estados ativos.: Tudo bem, vamos pular em multi. Selecione e selecione um único. Então, o que vai ver é uma seleção múltipla seria caixa de seleção. Então vamos fazer estes 32 32 32. Eu vou ficar com o mesmo tipo de estilo com o fundo branco, como um traço de pixel cinza. Ok. E ela pegou uma mensagem. Vamos chamar essa caixa de seleção um para Recebemos um texto regular e espaçamento com com 24 pixels. Você pode ver como eu estou. Tudo em oitavos estava tentando para o Azzam. Não estou indo muito rápido. Então, hum, nós só vamos fazer a caixa em si para o e é que ainda parece muito grande. Então vamos descer para 24. Tudo bem, então basicamente temos nossa caixa, você está de volta. E então o que queremos fazer é receber um cheque. E então eu uso, uh, não tão longe demais. E então nós podemos fazer Procurar, verificar se você não tem a versão pro, um, você pode usar a versão gratuita, então há um cheque lá, também. Então eu gosto de alguns desses. Os finos que combinam com o estilo que queremos. Então o que eu faço é copiar o Unicode e voltar para Sigma. Sim, colar isto aqui e preenchê-lo com. Isso funcionou? Oh, é perspicácia, Prue. Então precisamos de fonte impressionante. Cinco, não marcas, mas apenas cinco lá. Sim, há um profissional, e vamos colocar esse cheque lá. Ok. Parece que tenho aqueles Não sei onde aquele. Certo, amplie um pouco. Então temos uma caixa de seleção, e o que queremos fazer é dizer, naquela época eu vou duplicar isso e dizer ativo. E este cheque não está quente na página em si. Então, às vezes eu vou apenas cortá-lo, comando X, e ir selecionar algo na página e dizer comando V, e ele vai colá-lo em algum lugar perto. Então estamos onde está o nosso Sim, estamos lá em cima. Eu costumo agrupar estes um pouco melhor para ir um pouco mais rápido, mas , hum, como você constrói o resto das páginas, mas o que nós vamos fazer é continuar andando. Ok? Então temos o nosso cheque aqui. Podemos nomear esse cheque e ativo. Então queríamos ir àquele rosa. E agora o que fazemos é dizer, ativo. Estou agrupando isso, e Oh, e vamos esconder isso e depois selecionar os dois. E não precisamos de um grupo de mais. Basta dizer opção comando K. Então temos nosso componente e, hum, hum, marque a caixa de seleção. Certo, então agora contratamos isso aqui, e vamos duplicar isso. Mantenha isso afastado caso precisemos mudar alguém. Faça este um super divertido ativo. Hum, então agora vamos até aqui e fazer a mesma coisa. Então vamos pegar esse estilo, fazer um botão de rádio. E a trajetória de voo da Phyllis é a cinza para e para baixo para 24. Às vezes, os botões de rádio são um pouco menores, então podemos descer para 22 apenas, uh, ter essa sensação desse estilo. Tudo bem? É e então vamos dizer a mesma coisa. Mas este, o que vamos fazer é fazer umsimples um círculo no meio. E uma coisa com você sabe, 22 não funciona com o círculo diretamente no meio a não ser que seja perfeito. Então vamos para 21 e, em seguida, um centro de linha, linha vertical, horizontal e ainda está fora um pouco. Então, talvez esteja bem, acho que acertei. 08 Olá, Evens. Ok, então aqui vamos nós. Vamos ao Pink para o filme. Nomeie este ativo e vai duplicar este. Mude isto para Pink. Eu não gosto disso. Precisa ser o talvez. Certo, então, , depois do ponto, então vamos ao grupo Teoh. Aqueles desligam. Selecionando ambos os comandos de opção K. E assim teremos selecionado rádio duplicado. Eu entendo o quão rápido você pode chegar nisso. quão rápido você pode se mover com ele. Sem clique. Tudo bem. E como, você sabe, por exemplo, se você quiser mudar como o texto com isso, você pode, mas nós vamos continuar assim. 9. Componentes de tabs - usando componentes de responsivo para adicionar facilmente novos tables.: Eu vou pular e continuar e trabalhar em algumas guias. E então nós temos, como, como, um estado de tabulação ativo. Nós temos uma aba condensada agora com, tipo, eu não sei, tipo, tipo, um interessante tipo, Ei, há três coisas acontecendo dentro desta aba, mas isso é um bom seção do componente. Assim, desde que você está construindo guias, você pode continuar arrastando-os e ter seus conjuntos para ligar e desligar. Então o que vamos fazer é fazer uma linha que eu gosto de usar um retângulo, não as linhas. Então você tem um pouco mais de jogo. Eu não tenho certeza do porquê. Acho que foi Sean Moynihan que me ensinou isso. Certo, então vamos para o acampamento, ótimo para, e vamos dar a este espaço tentar tratar esta aba ativa como um botão, mas vamos fazer coisas diferentes com ela. Então vamos ter o fundo, movê-lo para a parte de trás, que é o comando opção colchete esquerdo. Então vá para 44 tendo um pouco mais alto, e nós vamos preenchê-lo com branco e ter este, hum, hum, acidente vascular cerebral para ser da mesma cor. Então, para isso vai coincidir. Acho que não é da mesma cor e três. Ok, então nós temos nossa conta ativa aqui, e nós vamos até a área da barra lateral, ok? Eu apenas duplicei isso mantendo a opção. Ok, então agora você tem sua aba ativa. Agora, se você sabe que seus antecedentes vão ser brancos, você conduz apenas um pouco rápido, como bater em cima disso, hum, para cobrir, cobrir o que está lá. E então você tem isso ativo, especialmente se você está fazendo, tipo, uma toalha estilo ou algo que você está fazendo isso muito rápido. É uma maneira rápida e simpática de o fazer. Então vamos dizer que vamos ter isso como, como, uh, ramificação na conta para mostrar quantas coisas estavam acontecendo que seria meio divertido. Tudo bem, então agora que temos nossa estrutura básica, queremos um centro, o texto, o texto, e ter certeza de que o espaçamento deles às vezes Oh, uh, eu vou soltar os e dizer tipo, Quero uma base de 24 pixels. Então essa é uma maneira barata, rápida e rápida de fazer isso. E isso ajuda. Basta obter rapidamente o seu espaçamento. Está bem, não vou. Ok, agora que temos uma conta a funcionar. Este é o nosso estado activo. Eu duplicei e tenho o mestre aqui. Então podemos tentar e fazer alguns alongamentos e coisas assim para ver se está funcionando. E é a razão pela qual isso é agrupado e está definido para a direita no topo. Então fique sempre por cima. Queremos que isto seja 44 pixels e não é exatamente assim. Vou fazer 44 pixels. E nós enviamos isso para este tipo de bar ativo, basicamente dizendo, Ei, esta é a área que ativa. Eu não queria que ele atravessasse todo o caminho. Eu queria que ele mostrasse que Ei, estamos trabalhando neste conteúdo abaixo, mas queremos que seja o centro e o fundo. Ficaremos sempre no centro e não crescerá. Sei que está sempre no fundo. Então, agora que temos isso, o que precisamos fazer é esvaziar. Estou apenas segurando a opção quando eu arrasto assim em um inativo e ativo. Certo, então digamos que é como “tabulação inativa”. É um pouco mais longo. Então, de novo, ou queremos duas linhas e vamos mudar essa linha. Hif e, hum agora nós podemos fazer isso e você pode ver que vai funcionar corretamente com o outro. Então é 84 por cento. E uma coisa que podemos fazer é torná-lo um pouco mais amplo. Então isso deve ser 20 são 24 pixels, 24 pixels e 32 espaço. Então o que fazemos agora é manter os números ou flutuá-los e tirar o ativo, tirar isso e tirar isso. Então nós temos apenas uma boa guia inativa aqui e vamos duplicar novamente e dizer, como, nós vamos chamar isso de inativo, então seja um pouco menor e a maneira como você sabe onde seu tamanho é você vai até que ele salte para duas linhas. Então agora isso é correto para o seu espaçamento. Então vamos pular em duas mesas a seguir 10. Tabelas para acelerar sua criação e alterar dinamicamente ..: Vamos saltar para as mesas, por isso vou inventar umas coisas. Tem status de X jogos. Agora temos um trabalho mundial. Vamos tentar ver, como, hum, disponibilidade, disponibilidade, um, patrocinador. E talvez façamos o nome aqui apenas inventando isso. Então o que nós queremos fazer é meio que andar estes em nossas colunas ou trabalhar em espaços, dependendo se este ar vai ficar ou ser dinâmico, então isso pode ser um componente também. Então, por exemplo, eu gostaria de fazer isso, uh, uh, têxtil. Então eu vou dizer que isso é, hum, à frente dos pobres. Tudo bem, então você pode colocar isso e clicar em todos eles, selecioná-lo e dizer que cada uma para uma coisa que você pode fazer é se você estiver espaçando, você pode fazer isso um componente, então ele irá deslizar com suas tabelas também. Vamos trabalhar nas outras mesas agora. Então o que vamos fazer é seguir em frente e nós vamos quebrar isso e apenas obter alguns textos básicos um texto regular e deixá-lo para 16. Então nós vamos ter 123478 9-001 Então este é o número dele e a disponibilidade é, hum eu não vejo disponível. E o que vamos fazer é garantir que este texto não seja central. Citação superior maiúscula. O mesmo com este, para ter certeza. - Sim. Tudo bem. Então, queremos isto. Isto é como a nossa área de cabeçalhos. Então queremos que esta seja a nossa primeira célula de mesa. Vamos espaçar isso por 30 a 48 pixels, então queremos que seja um pouco mais forte, então vamos usá-lo como base da Marinha. Acho que o que faremos só pelo seu status, certo?Faça um encontro só para o Heckman. Acho que o que faremos só pelo seu status, certo? Então, já que isso vai ser um encontro, enfraquecer, encolher um pouco isso e trazer o nome. E vamos começar com o Rodney de luto. Então isso seria legal, também. A maioria das mesas não tem isso, mas nós podemos fazer. Podemos colocar o logotipo do patrocinador deles, e vamos usar isso como um espaço. Podemos colocar o logotipo do patrocinador deles, e vamos usar isso como um espaço. Podemos colocar o logotipo do patrocinador deles, Então eu vou fazer isso bem pequeno e mudar o patrocinador e me perdoar. Eu não sei que patrocinadores eu só pego algumas empresas então só por diversão, princesa, princesa, veja a Adidas. Está bem. E vamos mandar esse Phil para a imagem, certo? E status disponível. Então, torne-se um bom, vamos voltar e verificar. Ícone. Vamos olhar para cima. Vamos ver. Hum, nós já temos o cheque. Eu não vejo apenas para o inferno de que vai servir. Hum, perto. Então, temos vezes tempo, senhor. Legal. Então, copie essa. Copie isso. Volte para o MMA de figo. Certifique-se de que é fonte incrível e profissional. Certo, agora temos nossas roupas, e vamos fazer 24 pixels, ver se ele está disponível ou não. Então, e se provavelmente quisermos verificar? Isso é muito parecido com isso. Então vamos voltar para verificar o círculo. Verifique o círculo de uma cópia. Volte para trás. Paz. Tudo bem. Então, que cores temos? O verde ou o rosa? Porque é a cor ativa e não está disponível. Isso é mesmo aqueles verdes? É como se eu soubesse. Então eu vou empilhar e alinhá-los, acertar esse status, acertar esse status, e então ter certeza de que temos espaço suficiente para não estar disponível. Tipo de tipo fora como o mais que você tem então, se você sabe que ele está disponível, não estão disponíveis. Digite não disponível e verifique onde você está. Então nós temos o logotipo com o patrocinador. A data do nome e o número I d. em todo o mundo. Um, só vou para o espaço um pouco, então nós não vamos. Você não quer. Tudo bem, então vamos nos livrar disso. Assim podemos ver. Então esta é a nossa mesa. Mas o que queremos fazer é olhar para o nosso espaçamento primeiro antes de tornarmos isto um componente. Então eu coloquei isso no fundo, e na verdade, eu vou torná-lo realmente leve. E assim mesmo que este 1º 1 não queremos ser, hum, Gray, provavelmente queríamos ser brancos. Vamos querer isso em segundo plano. Então queremos que este é o espaço. Então eu só estou dizendo 84 agora, apenas observando minha grade. Certo, então queremos espaço. Isto só um pouquinho. Eu tinha 24 horas. Temos isso ali. Então agora temos nossa mesa, e eu não gosto do fundo assim, mas o que podemos fazer é usar essa mesma, mas deixá-la cair para 10 ou 20%. 30 funcionará. E o que vamos fazer é duplicar isto e reduzir para dois. E às vezes, se você tiver problemas de forro, você pode selecionar ambos e certificar-se de que você tem uma linha para a parte inferior. E agora eu sei que este é o que está em cima. Eu vou para 50%. Eu estou tentando ir para 100 para igualar todos os outros. Tudo bem, então agora o que fazemos é selecionado todos os comandos de opção K. Você é. Você tem um componente, e é uma tabela. Então agora o que podemos fazer é duplicar isto vai acabar com o nosso mestre de mesa. Teremos que brincar um pouco com isso. E vamos duplicar isso segurando a opção e o turno e este e este aqui. Tudo bem, então nós temos Vamos ver, Bucky LASIK, um queimar Quist. Eric custou porque está feito. Ok, então eu não tenho idéia com quem esses caras estavam. Então desculpe se eu estragar isso, Eu só tenho estes logotipo está disponível assim e dependente. Ok, então agora isso falhou bem aqui. O que vamos fazer é voltar a este e ter a certeza de que temos espaço para o fazer . Está bem? Acho que é independente. - Sim. É isso mesmo, cara? Espero não ter estragado tudo para que possa mudar rapidamente os números aqui. Digamos que 3478 você tem 678 e datas. Eu não sei. Estamos apenas fazendo toda a substância que podemos mudar rapidamente. Mas é tão bom quando você está fazendo bússola para empresas. Então vamos ver 12 e 2020. Tudo bem, então o que queremos fazer agora é ir para a imagem e escolher a nossa imagem. E o que era aquele? Primeiro é melhor eu saber qual das Adidas vê que eu posso jogar independente. É tão bom poder trocar rapidamente. Quero dizer, são pequenos, mas você tem a idéia de que pode fazer todo tipo de coisa. Santa Cruz Plano B imagem queijo imagem e estar bem. Então, isso é fixe. Para que agora você possa entrar e dizer, tipo, o que eu não fiz aqui. Podemos nomear isso, hum, disponível, e você pode ver abaixo nestes. Está começando a preenchê-los para você. Então agora sabemos qual é qual. Digamos que ele não esteja disponível e diga: “ Oops, ele está disponível. Então vamos escondê-los para que você possa rapidamente ter uma noção de, como, variáveis que você pode ligar e desligar. Então este, o que vamos fazer é voltar para trás e escondê-lo. O mesmo com este formulário. Bem, na verdade, vamos ficar com este e vamos precisar de esconder este e esconder as costas. Esta, ela pode ver rapidamente como a mesa poderia ser construída. 11. Blockquotes: feche este tutorial. Quero rever mais algumas coisas. Só ter uma sensação de comportamento responsivo com componentes. Então, por exemplo, eu construí essa citação, e a maneira que você quer construir, como um testemunho, depoimento ou citação em bloco, não está em pedaços. Então você tem seu histórico, um, chamadas de volta e sua mensagem, e eu tenho, tipo, uma pequena citação. E, , doutor, eu sou um cara engraçado. Então esta peça é o nome, e esta é a aspas, aspas , colchetes ou aspas, e então esta é a aspas de bloco real. Então o que queremos fazer é salvar isso como um componente e apenas para fins de tempo, vou colocá-lo logo abaixo. Então eu copiei, duplicei. Certo, então quando mexemos com isso, não sai muito bem, e você fica realmente esmagado e nada se move. Certo. Então o que nós queremos fazer é que nós podemos realmente esmagá-lo um pouco para que você possa ver o que acontece . Mas vá para trás e diga, esquerda e direita e cima e baixo. Então você quer que seu nome fique no fundo. Então você diz esquerda porque você sempre quis esquerda. Ao lado desta citação são como citação bolha de fala, e então você quer que ele na parte inferior. O mesmo com este. Você quer a esquerda e a parte inferior. E estes você quer esquerda e direita. Você já pode vê-lo mudando e superior e inferior realmente permite que você topo. E vamos definir isso para, um, centro e topo. Ok, veja, então isso está funcionando, certo? Parece que não está funcionando direito, porque quando você esticar isso, e então você o espaça para que você possa ver rapidamente como isso funciona muito bem, com designs responsivos onde você pode simplesmente derramar e depois puxá-lo para baixo. Tão super legal. E nós vamos apenas encaixar em uma dessas colunas, obter esse espaço direito, e mover o componente mestre para fora e pronto. 12. Tabuleiro de preço - um componente para construir uma tabela de preço rápido de 3 coluna.: nesta última peça, vamos fazer a estrutura de preços do modelo de preços para que os componentes possam ser movidos e editados. E é apenas bom dedo do pé tem estrutura de preços, mas tê-los em componentes. Então vamos deixar isso branco e nos divertir um pouco. , Neste fundo, então o que vou fazer é tirar uma foto, não é? Um tipo de grande ódio? Está bem. E o que vamos fazer é ir Teoh Apenas duplicar isso para fins de dimensionamento e ir para sólido, e então podemos mover isso para trás, então vamos dizer que isso está de volta e movê-lo se você pode olhar para o canto inferior esquerdo, você pode Veja aqui é a parte de trás e nós vamos ficar escuro neste aqui, e nós vamos mudar a imagem para Vamos tentar software. Sim, então isso é meio divertido, e você pode até borrar e fazer todo tipo de coisas com ele. Então, em cima disso, eu gosto de agrupar estes e dizer de volta e depois trancá-lo. Às vezes, se eu estou trabalhando em cima de sua, mas vamos jogar em nossa grade e vai fazer um conjunto de 33 e três. Então, arrume isto, está bem? E inventando um Zagat. Então, tenha paciência comigo. Então o que vamos fazer é ter, ah, luz como um profissional. E, hum , , bem, talvez leve, regular e profissional. Então o que vamos fazer é descobrir as cores apenas muito rápido pensando sobre o que pode ser o mais forte e médio. E na verdade, muitas vezes eles têm, tipo, a luz e regular, e então o profissional no meio com isso é um pouco maior. Então podemos fazer, hum este cinza verde. Sim, só para o inferno. Vamos experimentar isto, por isso vamos pôr isto aqui. E queríamos gastar tudo porque queremos uma sombra. Então já deixei cair longe demais. Então aqui está o preço de volta. Ok? Vamos fazer os efeitos. Quem não pode soltar o botão, e nós vamos quebrar isso. Vamos fazer um pouco maior. Então faça como um 14. E fazer isso realmente escuro para que você possa vê-lo muito escuro. Então vamos deixar isso de volta para 50. Certo, então vamos dizer “mão leve”. Vamos manter esses quebras e fazer com que ele seja um pouco diferente. O Will vai ficar maior, mas mais fino. Então, queremos centralizar o texto e pensar sobre alongamento e espaçamento. Então queremos ter livros o máximo de espaçamento que pudermos para o outro. As outras peças. E eu acho que o que eu quero fazer é ir pequeno, na verdade, e, uh, o 24 não para 24 24 e então fazer o preço aqui mesmo. Muito bem, tem o preço. E então digamos que são 29 por mês. Na verdade, é um monte de ST nove por mês. E queremos que isto seja grande e este seja leve e pequeno. E então uma coisa que podemos fazer é trabalhar no alinhamento com isso é configurá-lo para onde será trabalho sobrescrito a posição dele para ser maior. Acho que não precisamos da barra. Quero isto ainda maior. 56 64 aqui. Ok, você tem uma luz, e vamos descrever esta linha e novamente, ele jogou lá em cima e depois voltou para baixo. - Sim. Está bem. O que vai nos fazer passar por todo o caminho? Não sei o que não está funcionando com isso. Está bem. Vou tornar isto muito sutil. Digamos, tipo, 20%. Você se acomoda? Oh, isto é 100 lá, mas pastores 20. Ok, ok, então este é $9 mês. Mas o que é divertido agora é, na verdade, nós podemos puxar isso para trás, cair para baixo e fazer isso passar por alguns pedaços. Você pode ver o fundo. Alguém faz. 75%. Ok, agora, nós temos, tipo, uma lista tipo de lista aparafusada. Mas vamos apenas centralizar e dizer, como, como, na verdade, eu tenho um pouco de latim aqui, vovô nisso centrado. Vamos fazer 30 quatros machucados. É que estamos em um Spacey por 24 horas. Tudo bem. E ver você conceber. Isto está centrado, e tudo bem. Na verdade, vamos deixar assim. Parece bom, Embora queiramos comprá-lo agora. Botão tão bem, espaço um pouco melhor. Tudo bem. E agora podemos voltar ao nosso botão. Copie isso. Agora, pode encolher isso um pouco, se quisermos. Ok, isso é super simples que você tenha a idéia. Então agora vamos fazer isso ditando um componente. Então precisamos desse preço de volta com todas essas outras coisas. Tem tanta coisa acontecendo e ele limparia tudo. Botão de pedido para ir. Lá vamos nós. Uma das coisas que você pode fazer é selecionar todos os itens estavam tendo problemas em agrupá-lo, chamar preços, e então nós vamos para a opção de comando K e torná-lo, uh, componente, uh, Vou duplicar isto. Bem, são gotas muito loucas. Então, temos nossos preços em nosso mestre. Então o que vamos fazer agora é encaixar nas colunas e tirá-las. E o que é legal é que podemos manter a opção e fazer isso um pouco maior. Obrigado, então. E vamos dizer 80 19 e 14. Então, vamos dizer profissional e negócios. Apenas o inferno disso. Então isso é o que é tão bom sobre os componentes é que você pode simplesmente mudar rapidamente os elementos. Vês? Veja o que funciona cores aqui. Um pouco louco. Desculpe. E você pode até mudar seus botões na hora para. Espero que tenha sido útil e você entenda o quão poderosos são os componentes. E estou ansioso, Teoh, ver o que vocês criaram acha que algumas dessas áreas de preços que adicionei em uma imagem, mas eu não gosto disso, então vou deletá-lo. Exclui tudo. Alguns desses itens terão. Este é o melhor valor ou tipo de uma fita que mostra Hey, olha isso. Olhe para mim. que, obviamente, faríamos neste profissional que, hum e eu geralmente é tipo a versão mais barata. É como a versão do meio. Então, bem, Dio, vamos trocar isso e vamos dizer profissional e negócios. Certo, então como adicionamos algo aqui que não queremos do outro para a mesma coisa? Nós apenas voltar para o componente mestre e esta é a área de cabeçalho. Então alguns deste design pode não ser o melhor, mas é mais apenas para mostrar a vocês Ei, isso é o que podemos fazer. Então o que eu vou fazer é fazer uma fita e eu vou mascará-la então nós vamos apenas chamar esta fita e torná-la branca, e então vamos trazê-la para baixo para esta área de cabeçalho, e o que vamos fazer é usar como máscara também para esta seção aqui. Então vamos duplicar o cabeçalho e chamar essa máscara. Eu estou em um grupo esses juntos. Então chamarei esta missa de Tuas. Bem, então eu vou dizer usar como mastro e então isso soca e assim você pode ver você sabe que ele vai olhar, hum, hum, esta fita pode se mover dentro da área da máscara para o que você quer para que possamos jogar, como em um desses efeitos aqui. Então esse botão cair que está bem resolvido e vamos cair, vamos em frente. E queremos mascarar isso desde que seu texto para nós vamos colocar, uh, você não vê que isso é valor. Ok, vamos fazer condensado e regular e fazer rosa. Então temos que coincidir com o ângulo. E isso é o que é legal sobre vetores é que você pode apenas esticá-lo. E já que você já tem sua massa configurada, então você só tem que se mover. Mova-o para onde funciona e vamos dar-lhe um pouco de espaço extra. E eu já peguei o ícone quente, então eu vou cortá-lo, voltar para a pasta de fita, e agora você vê que está aqui. Não é exatamente um 45, mas está tudo bem. Então, vamos apenas dizer que é isso. E eu acho que o meu você pode ir como ele A direto segurando o turno. Vá para um 45. Só queria um ângulo diferente. Acho que são 30. Talvez algo assim. Ok, então agora temos o melhor valor, mas sabemos que todos os três não são o melhor valor. Então tudo que você tem que fazer é vir aqui, esconder a máscara e esconder a máscara. Então, o que aconteceu aqui? Isso é uma coisa de mudança para componentes. Então o que precisamos fazer é entrar na nossa máscara. E uma coisa que podemos fazer que pode ajudar é apenas dizer que isso é certo e, em seguida , topo, e assim você pode vê-lo saltar. Então essa é a melhor maneira de fazer isso é apenas testá-lo se você precisar. Às vezes você precisa fazer disso um componente. Você não pode fazer isso dentro de componentes, então você pode arrastá-lo para fora, torná-lo um componente duplicado e arrastá-lo para o seu preço. Não precisávamos fazer isso desta vez. Há algumas estruturas mais complexas que eu para que eu não colocá-la lá se não precisarmos . Então, Então, essa é a seção de componentes. Em poucas palavras, você pode entrar na paginação, que é, você sabe, com o triângulo e o número definido e o estado ativo tudo em um componente. Agora que vocês têm as ferramentas, espero ver o que vocês construíram. Obrigado. Sim, você está feito. Espero que essas aulas tenham ajudado você a mostrar como você pode trabalhar com componentes, como eles são fáceis de editar e mudanças agradáveis. Se o cliente odeia algo, você pode mudar algumas coisas ao mesmo tempo. Então eu adoraria ver alguns dos projetos que vocês vêm com mais, não projetos, mas componentes e talvez até algumas páginas que você construiu usando este formato de classe. Graças espero ver na próxima aula.