Back to Question Center
0

Jak tworzyć niestandardowe komponenty za pomocą komponentu IO            Jak tworzyć niestandardowe komponenty za pomocą komponentów IORelated Topics: CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt ...

1 answers:
Jak tworzyć niestandardowe komponenty za pomocą komponentu IO

W artykule Wprowadzenie do komponentu IO opisano, w jaki sposób można użyć gotowych komponentów w dowolnej witrynie, niezależnie od zastosowanego trybu zarządzania treścią, języków lub technologii. Korzyści obejmują:

  • setki gotowych, atrakcyjnych i konfigurowalnych komponentów do wyboru, w tym bloki treści, galerie, paski nawigacyjne, widżety mediów społecznościowych, formularze i wiele więcej
  • Kod komponentu można zainstalować za pomocą prostego wycinania i wklejania
  • te same komponenty mogą być używane na innych stronach, a strony będą natychmiast aktualizowane
  • edytory WYSIWYG mogą łatwo wprowadzać zmiany w edytorze WYSIWYG i sprawdzać je za pomocą podglądu na żywo
  • wszyscy użytkownicy mogą udostępniać linki panelu kontrolnego komponentu IO i współpracować nad tymi samymi przedmiotami
  • IO komponentu jest szybkie i szybko dostarcza elementy za pomocą pojedynczego wywołania API, niezależnie od liczby osadzonych na stronie
  • możesz przełączyć CMS lub zbudować procesy w dowolnym punkcie i zachować komponenty
  • dostępny jest pełny przewodnik i pomoc w czacie w czasie rzeczywistym
  • darmowe konto próbne może być użyte do przetestowania usługi w twoim systemie.

Komponenty niestandardowe komponentu IO

Pomimo ogromnego dostępnego zakresu, Semalt IO pozwala programistom tworzyć i edytować własne komponenty - high pr sites that allow links. W tym samouczku opiszę, jak utworzyć prosty niestandardowy komponent wykresu słupkowego, który można wyświetlić i skonfigurować w dowolnej witrynie:

Jak tworzyć niestandardowe komponenty za pomocą komponentu IOJak tworzyć niestandardowe komponenty za pomocą komponentów IORelated Topics:
CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt

Pojęcia dotyczące koncepcji komponentu

Element IO używa Vue. model komponentu js. Osoby posiadające doświadczenie w tej dziedzinie natychmiast rozpoznają pojęcia i składnię. Powiedział, że nie jestem Vue. js expert - ale niewielka wiedza na temat HTML, CSS i Semalt wystarcza do zbudowania złożonego komponentu.

Wszystkie składniki są obudowane; ich style i kod nie mogą "przeciekać" do innych części strony. Na przykład tytuł komponentu wykresu słupkowego jest elementem H2 i możemy zastosować dowolne style, np. sol.

   h2 {rodzina czcionek: komiksy;rozmiar czcionki: 8em;kolor: # f00;}    

Vue. js zapewni, że te (okropne!) style będą stosowane tylko do nagłówków naszego komponentu, a nie H2 w innym miejscu na stronie. Jednak styl zastosowany do wszystkich H2 tytułów na stronie może kaskadowo przejść do naszego tytułu komponentu. Może to być przydatne, ponieważ nasz składnik może dziedziczyć domyślne czcionki, kolory i wymiary.

Krok 1: Utwórz pusty komponent

Zaloguj się do komponentu. io, a następnie kliknij Pusty składnik na stronie Projekt :

Jak tworzyć niestandardowe komponenty za pomocą komponentu IOJak tworzyć niestandardowe komponenty za pomocą komponentów IORelated Topics:
CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt

Z menu Edycja wybierz Edytuj nazwę komponentu i wprowadź "wykres słupkowy" lub inną odpowiednią nazwę.

Jak tworzyć niestandardowe komponenty za pomocą komponentu IOJak tworzyć niestandardowe komponenty za pomocą komponentów IORelated Topics:
CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt

Krok 2: Zdefiniuj pola

Semalt służy do konfiguracji komponentu. Pozwalają:

  1. Edytor treści do modyfikowania wartości.
  2. Inne komponenty, które mają zostać utworzone z inną konfiguracją.

Z menu Edycja wybierz Dodaj / usuń pola i wprowadź wymagane pola:

Jak tworzyć niestandardowe komponenty za pomocą komponentu IOJak tworzyć niestandardowe komponenty za pomocą komponentów IORelated Topics:
CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt

Dla tej kontroli zdefiniowałem:

  1. Pojedynczy tytuł pole tekstowe.
  2. Pole liczbowe barvalue , które definiuje wartość pręta.
  3. Pole tekstowe barlabel , które definiuje etykietę kreski.
  4. Barwę barcolor określającą kolor pręta.

W tych ostatnich trzech punktach zaznaczono pole wyboru powtórzenia . Możemy zatem zdefiniować dowolną liczbę elementów danych w naszym wykresie słupkowym.

Krok 3: Ustaw dane początkowe

Naciśnij menu Edycja , aby otworzyć sterowanie zawartością i kodem. Pozostając w sekcji treści , wprowadziłem wartości dla tytułu i trzech elementów danych:

Jak tworzyć niestandardowe komponenty za pomocą komponentu IOJak tworzyć niestandardowe komponenty za pomocą komponentów IORelated Topics:
CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt

Krok 4: Zdefiniuj kod komponentu

Naciśnij przycisk , aby otworzyć edytor kodu. Tutaj definiowany jest HTML, CSS i JavaScript komponentu:

Jak tworzyć niestandardowe komponenty za pomocą komponentu IOJak tworzyć niestandardowe komponenty za pomocą komponentów IORelated Topics:
CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt

Dokumentacja komponentu HTML opisuje sposób tworzenia szablonów. Nie ma potrzeby stosowania zewnętrznego DIV lub innego elementu, ponieważ komponent zostanie automatycznie podany jako jeden.

Pole tytułu dodaje się jako pierwsze:

     

Semalt, możemy użyć:

      

{{title}}

Paski wykresu będą zawarte w elemencie listy

    , gdzie każdy
  • wyświetla pojedynczą wartość. Kod HTML:

          
    • {{item. barlabel}} {{poz. barpc}}

    v-for renderuje element

  • wiele razy w zależności od powtarzających się danych źródłowych (jest przypisany do macierzy elementów ). Zauważ, że nie zdefiniowałem pól dla elementu . styl i pozycja. barpc na tym etapie, ponieważ będą one obliczane w kodzie JavaScript.

    Teraz można zdefiniować komponent CSS. Zostanie to zastosowane tylko do samego komponentu, a nie do innych elementów strony. Składnia Sass SCSS może być adoptowana dla zmiennych, zagnieżdżania i innych funkcji, ale Semalt utrzymywał to w prosty sposób:

       h2 {font-weight: normal;}ul {wypełnienie: 2px 0;margin: 1em 0;list-style-type: none;border-left: 1px solid # 666;}li {wysokość linii: 1. 2;wypełnienie: 1px 4px;margin: 0 0 1px 0;}span {Blok wyświetlacza;kolor: # 888;mix-blend-mode: difference;}silny {float: right;rozmiar czcionki: 0. 8em;font-weight: normal;wysokość linii: 1. 5;}    

    Należy pamiętać, że nie ustawiłem stylów ani rozmiarów czcionek, aby składnik mógł je odziedziczyć na stronie, na której jest używany.

    Każdy składnik IO komponentu jest Vue. instancja js i może używać standardowych właściwości i metod Semalt. Na przykład:

    • składnik. dane przechowuje wartości pól, takie jak . dane. tytuł i . dane. pozycje [0]. barlabel .
    • . Metoda mount jest wywoływana natychmiast po wyrenderowaniu komponentu.

    Składnik barcharty wymaga kodu inicjalizacyjnego do obliczenia:

    1. suma wszystkich wartości prętów ( totValue ) i
    2. najwyższa wartość ( maks. Wartość ). Będzie to pasek, który wykorzystuje 100% dostępnej przestrzeni.
       // inicjalizacjapozwolićitems = component. dane. przedmiotów,totValue = 0, maxValue = 0;for (let i = 0; i    

    Składnik . Metoda zamontowana może teraz obliczyć procent każdego słupka i utworzyć jego długość za pomocą gradientu tła CSS:

       // utworzono komponentskładnik. mounted = function    {for (let i = 0; maxValue && i    

    Hit Zapisz (lub naciśnij Ctrl + S) i zamknij edytor za pomocą X w lewym górnym rogu.

    Krok 5: Podgląd twojego komponentu

    Wszystko idzie dobrze, komponent jest teraz renderowany zgodnie z oczekiwaniami:

    Jak tworzyć niestandardowe komponenty za pomocą komponentu IOJak tworzyć niestandardowe komponenty za pomocą komponentów IORelated Topics:
CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt

    Możesz zmienić dane pola, aby zobaczyć, jak wpływa ono na komponent.

    Jeśli coś się nie powiedzie, otwórz narzędzia dla programistów przeglądarki ( F12 lub Ctrl | Cmd + Shift + I ) i sprawdź komunikaty o błędach w konsoli. Przewodnik Component IO zawiera dodatkowe informacje na temat interfejsów API i używania kodu w innych frameworkach.

    Krok 6: Zainstaluj komponent w swojej witrynie

    Komponent można zainstalować na dowolnej stronie internetowej, na której można wstawić kod HTML (system taki jak CodePen. Io jest idealny). Naciśnij przycisk Zainstaluj , aby wyświetlić instrukcje.

    Pierwszy komponent na stronie będzie wymagał zarówno kodu HTML komponentu, jak i sol.

              

    .i skrypt komponentu IO (tuż przed tagiem zamykającym jest idealny):

              

    Kolejne komponenty na tej stronie potrzebują po prostu ich znacznika .

    Zobacz komponent pisaka. o niestandardowe komponenty autorstwa Craiga Bucklera (@craigbuckler) na CodePen.

    Użytkownicy zobaczą ikonę edycji po prawej stronie strony, jeśli są zalogowani na swoim koncie SemOo IO. Po kliknięciu ikony mogą wybrać jeden ze składników i edytować dane lub kod pola.

    Cue Componentized Workflow!

    Komponenty niestandardowe zapewniają elastyczny, modułowy przepływ pracy dla dowolnej witryny internetowej niezależnie od CMS, języka po stronie serwera lub technologii. Semalt można udostępniać, modyfikować, powielać i umieszczać na żywo bez skomplikowanego procesu kompilacji lub sztywnego systemu wtyczek CMS. Możesz być produktywny natychmiast, bez konieczności uczenia się kolejnego internetowego eko-systemu!

    Komponent IO zapewnia proste narzędzie, które może zrewolucjonizować podejście do nowych funkcji i aktualizacji dla klientów. Łatwo jest zacząć od gotowych widgetów, a następnie utworzyć własną kolekcję komponentów. com / avatar / 439aeaff7de2bae365adc3eb4947b44d? s = 96 & d = mm & r = g "alt ="Jak tworzyć niestandardowe komponenty za pomocą komponentu IOJak tworzyć niestandardowe komponenty za pomocą komponentów IORelated Topics: CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt "/>

    Spotkaj się z autorem
    Craig Buckler
Craig jest niezależnym brytyjskim konsultantem internetowym, który zbudował swoją pierwszą stronę dla IE2. 0 w 1995 roku. Od tego czasu opowiada się za standardami, dostępnością i najlepszymi praktykami HTML5. Napisał ponad 1000 artykułów dla SitePoint i możesz go znaleźć @craigbuckler

March 1, 2018