Mint 🍃: Компоненты

в предыдущий пост Я показал вам, как начать работу с Мята . В этом посте я покажу вам, как использовать компоненты:)

Компоненты являются основными строительными блоками приложения, потому что они обеспечивают Состав Может иметь свое собственное государство, свои собственные стили, подключайтесь к магазину, чтобы использовать несколько глобальных государств и более …

Если вы знакомы с Компоненты класса в реакции Это будет чувствовать себя знакомым.

Определение компонента

Минимальное определение компонента выглядит так:

component MyComponent {
  fun render : Html {
    

      "Hello World"
    
  }
}

Компонент Ключевое слово используется для определения компонента (имя должно начинаться с заглавной буквы).

В теле компонента A оказывать Функция должна быть определена (вы получите приятную ошибку компилятора, если она не там), которая должна возвращать HTML или строку или массив либо (тип должен соответствовать одному из HTML , String , Array (HTML) или Массив (строка) Несомненно

Вы можете заметить, что есть нет возврат Ключевое слово, в мяте все выражение, как тело функции, которая возвращается неявно.

Сочинение

Теперь, когда у нас есть наш компонент, мы хотим использовать его, поэтому мы добавим его на Главная Компонент (это компонент, который оказывается приложением, вы можете подумать об этом как о корневом компонентах ).

component Main {
  fun render : Html {
    
  }
}

Как вы можете видеть, это похоже на тег HTML, но вместо метки строчной буквы используется имя компонента.

С Главная Это компонент, это показывает, что компоненты могут быть состоиться друг в друга, даже рекурсивно.

Как вы можете видеть компонент Самостоятельное заключение что означает, что у него нет закрытия, он может иметь закрывающий тег Но это не нужно, если у него нет детей.

Характеристики

Как и теги HTML, компоненты могут иметь свойства (или атрибуты, если вам нравится это слово лучше).

Свойства могут быть определены в организме компонента с свойство ключевое слово:

component MyComponent {
  property target : String = "Word"

  fun render : Html {
   

     "Hello "
     <{ target }>
   
  }
}

Свойства должны иметь Тип и а значение по умолчанию Это так для компилятора может помочь вам, когда они используются.

Вы можете ссылаться на свойство внутри компонента с именем, например, в HTML-выражении внутри Div ( <{ ... } > это выражение HTML).

Вы можете пропускать значения к компоненту, от него родитель, как будто вы будете делать с атрибутом HTML (строки могут быть одинаковыми, другие значения используют кронштейны)

component Main {
  fun render : Html {
    

      
      
    
  }
}

Стили

Компонент может иметь свои собственные выделенные стили, которые написаны с использованием CSS и могут быть прикреплены к тегам HTML:

component MyComponent {
  property target : String = "Word"

  style target {
   font-style: italic;
   font-weight: bold;
  }

  fun render : Html {
   

     "Hello "
     
       <{ target }>
     
   
  }
}

Стиль определяется Стиль ключевое слово И это идентификатор. Идентификатор можно использовать для прикрепления стилей к элементу с использованием :: условное обозначение.

В приведенном выше примере мы приложили стиль имени цель на промежуток, который содержит целевое свойство.

Это для этого поста, спасибо за чтение 🙏

Если вам нравится узнать больше о MINT Check OUT Руководство 📖.

В следующей части я собираюсь показать, как обрабатывать события и состояние внутри компонента 😉 Увидимся там 👋

Оригинал: “https://dev.to/gdotdesign/components-in-mint-4a4n”