kudzues/component-party
1
0
Fork 0
mirror of https://github.com/lainbo/component-party.git synced 2026-04-05 13:09:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

host logos

Browse Source
This commit is contained in:
Mathieu Schimmerling
2022-04-11 16:51:34 +02:00
parent 0e72c9e55e
commit 94a2c049a3
7 changed files with 164 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
README.md
View File

@@ -32,7 +32,7 @@ How do we solve this ? Developers love having framework overview by examples. It
# Reactivity<a class="header-anchor" href="#reactivity" aria-hidden="true">#</a>
## Declare state<a class="header-anchor" href="#declare-state" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<script>
let name = 'John';
@@ -41,7 +41,7 @@ How do we solve this ? Developers love having framework overview by examples. It
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
import { useState } from 'react';
@@ -52,7 +52,7 @@ export default function Name() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<script setup>
import { ref } from 'vue';
@@ -62,7 +62,7 @@ console.log(name.value); // John
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
```ts
import { Component, Input } from '@angular/core';
@@ -80,7 +80,7 @@ export class NameComponent {
```
## Update state<a class="header-anchor" href="#update-state" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<script>
let name = 'John';
@@ -90,7 +90,7 @@ export class NameComponent {
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
import { useState } from 'react';
@@ -103,7 +103,7 @@ export default function Name() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<script setup>
import { ref } from 'vue';
@@ -114,7 +114,7 @@ console.log(name.value); // Jane
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
```ts
import { Component, Input } from '@angular/core';
@@ -133,7 +133,7 @@ export class NameComponent {
```
## Computed state<a class="header-anchor" href="#computed-state" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<script>
let count = 10;
@@ -143,7 +143,7 @@ export class NameComponent {
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
import { useState, useMemo } from 'react';
@@ -156,7 +156,7 @@ export default function DoubleCount() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<script setup>
import { ref, computed } from 'vue';
@@ -171,7 +171,7 @@ console.log(doubleCount.value); // 20
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
```ts
import { Component, OnInit, Input, Pipe, PipeTransform, ChangeDetectionStrategy } from '@angular/core';
@@ -199,13 +199,13 @@ export class DoublecountComponent implements OnInit {
# Templating<a class="header-anchor" href="#templating" aria-hidden="true">#</a>
## Minimal template<a class="header-anchor" href="#minimal-template" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<h1>Hello world</h1>
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
export default function HelloWorld() {
return <h1>Hello world</h1>;
@@ -213,7 +213,7 @@ export default function HelloWorld() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<template>
<h1>Hello world</h1>
@@ -221,10 +221,10 @@ export default function HelloWorld() {
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
<pre>Oops, missing snippet ! You can contribute <a href="https://github.com/matschik/component-party/tree/main/content/2-templating/1-minimal-template">here</a> to fill this snippet.</pre>
## Styling<a class="header-anchor" href="#styling" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<h1 class="title">Hello world</h1>
<button style="font-size: 10rem;">I am a button</button>
@@ -237,7 +237,7 @@ export default function HelloWorld() {
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
export default function HelloWorld() {
// how do you declare title class ??
@@ -252,7 +252,7 @@ export default function HelloWorld() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<template>
<h1 class="title">
@@ -271,10 +271,10 @@ export default function HelloWorld() {
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
<pre>Oops, missing snippet ! You can contribute <a href="https://github.com/matschik/component-party/tree/main/content/2-templating/2-styling">here</a> to fill this snippet.</pre>
## Loop<a class="header-anchor" href="#loop" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<script>
const colors = ['red', 'green', 'blue'];
@@ -288,7 +288,7 @@ export default function HelloWorld() {
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
export default function Colors() {
const colors = ['red', 'green', 'blue'];
@@ -303,7 +303,7 @@ export default function Colors() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<script setup>
const colors = ['red', 'green', 'blue'];
@@ -322,10 +322,10 @@ const colors = ['red', 'green', 'blue'];
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
<pre>Oops, missing snippet ! You can contribute <a href="https://github.com/matschik/component-party/tree/main/content/2-templating/3-loop">here</a> to fill this snippet.</pre>
## Event click<a class="header-anchor" href="#event-click" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<script>
let count = 0;
@@ -340,7 +340,7 @@ const colors = ['red', 'green', 'blue'];
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
import { useState } from 'react';
@@ -361,7 +361,7 @@ export default function Name() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<script setup>
import { ref } from 'vue';
@@ -381,10 +381,10 @@ function incrementCount() {
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
<pre>Oops, missing snippet ! You can contribute <a href="https://github.com/matschik/component-party/tree/main/content/2-templating/4-event-click">here</a> to fill this snippet.</pre>
## Dom ref<a class="header-anchor" href="#dom-ref" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<script>
import { onMount } from 'svelte';
@@ -400,7 +400,7 @@ function incrementCount() {
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
import { useEffect, useRef } from 'react';
@@ -414,7 +414,7 @@ export default function InputFocused() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<script setup>
import { ref, onMounted } from 'vue';
@@ -432,10 +432,10 @@ onMounted(() => {
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
<pre>Oops, missing snippet ! You can contribute <a href="https://github.com/matschik/component-party/tree/main/content/2-templating/5-dom-ref">here</a> to fill this snippet.</pre>
## Conditional<a class="header-anchor" href="#conditional" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<script>
const TRAFFIC_LIGHTS = ['red', 'orange', 'green'];
@@ -467,7 +467,7 @@ onMounted(() => {
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
import { useState, useMemo } from 'react';
@@ -502,7 +502,7 @@ export default function TrafficLight() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<script setup>
import { ref, computed } from 'vue';
@@ -535,11 +535,11 @@ function nextLight() {
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
<pre>Oops, missing snippet ! You can contribute <a href="https://github.com/matschik/component-party/tree/main/content/2-templating/6-conditional">here</a> to fill this snippet.</pre>
# Lifecycle<a class="header-anchor" href="#lifecycle" aria-hidden="true">#</a>
## On mount<a class="header-anchor" href="#on-mount" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<script>
import { onMount } from 'svelte';
@@ -553,7 +553,7 @@ function nextLight() {
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
import { useState, useEffect } from 'react';
@@ -569,7 +569,7 @@ export default function PageTitle() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<script setup>
import { ref, onMounted } from 'vue';
@@ -585,10 +585,10 @@ onMounted(() => {
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
<pre>Oops, missing snippet ! You can contribute <a href="https://github.com/matschik/component-party/tree/main/content/3-lifecycle/1-on-mount">here</a> to fill this snippet.</pre>
## On unmount<a class="header-anchor" href="#on-unmount" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<script>
import { onDestroy } from 'svelte';
@@ -608,7 +608,7 @@ onMounted(() => {
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
import { useState, useEffect } from 'react';
@@ -630,7 +630,7 @@ export default function Time() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<script setup>
import { ref, onUnmounted } from 'vue';
@@ -650,11 +650,11 @@ onUnmounted(() => {
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
<pre>Oops, missing snippet ! You can contribute <a href="https://github.com/matschik/component-party/tree/main/content/3-lifecycle/2-on-unmount">here</a> to fill this snippet.</pre>
# Component composition<a class="header-anchor" href="#component-composition" aria-hidden="true">#</a>
## Props<a class="header-anchor" href="#props" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<script>
import UserProfile from './UserProfile.svelte';
@@ -679,7 +679,7 @@ onUnmounted(() => {
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
import UserProfile from './UserProfile.jsx';
@@ -712,7 +712,7 @@ UserProfile.propTypes = {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<script setup>
import { ref } from 'vue';
@@ -763,11 +763,11 @@ const props = defineProps({
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
<pre>Oops, missing snippet ! You can contribute <a href="https://github.com/matschik/component-party/tree/main/content/4-component-composition/1-props">here</a> to fill this snippet.</pre>
# Form input<a class="header-anchor" href="#form-input" aria-hidden="true">#</a>
## Input text<a class="header-anchor" href="#input-text" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<script>
let text = 'Hello World';
@@ -778,7 +778,7 @@ const props = defineProps({
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
import { useState } from 'react';
@@ -799,7 +799,7 @@ export default function InputHello() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<script setup>
import { ref } from 'vue';
@@ -813,10 +813,10 @@ const text = ref('Hello World');
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
<pre>Oops, missing snippet ! You can contribute <a href="https://github.com/matschik/component-party/tree/main/content/6-form-input/1-input-text">here</a> to fill this snippet.</pre>
## Checkbox<a class="header-anchor" href="#checkbox" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<script>
let isAvailable = false;
@@ -827,7 +827,7 @@ const text = ref('Hello World');
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
import { useState } from 'react';
@@ -848,7 +848,7 @@ export default function IsAvailable() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<script setup>
import { ref } from 'vue';
@@ -867,10 +867,10 @@ const isAvailable = ref(true);
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
<pre>Oops, missing snippet ! You can contribute <a href="https://github.com/matschik/component-party/tree/main/content/6-form-input/2-checkbox">here</a> to fill this snippet.</pre>
## Radio<a class="header-anchor" href="#radio" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<script>
let picked = 'red';
@@ -886,7 +886,7 @@ const isAvailable = ref(true);
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
import { useState } from 'react';
@@ -910,7 +910,7 @@ export default function PickPill() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<script setup>
import { ref } from 'vue';
@@ -940,10 +940,10 @@ const picked = ref('red');
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
<pre>Oops, missing snippet ! You can contribute <a href="https://github.com/matschik/component-party/tree/main/content/6-form-input/3-radio">here</a> to fill this snippet.</pre>
## Select<a class="header-anchor" href="#select" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```svelte
<script>
let selectedColorId = 2;
@@ -966,7 +966,7 @@ const picked = ref('red');
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```jsx
import { useState } from 'react';
@@ -997,7 +997,7 @@ export default function ColorSelect() {
```
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```vue
<script setup>
import { ref } from 'vue';
@@ -1026,11 +1026,11 @@ const colors = [
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
<pre>Oops, missing snippet ! You can contribute <a href="https://github.com/matschik/component-party/tree/main/content/6-form-input/4-select">here</a> to fill this snippet.</pre>
# Webapp features<a class="header-anchor" href="#webapp-features" aria-hidden="true">#</a>
## Routing<a class="header-anchor" href="#routing" aria-hidden="true">#</a>
### <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" width="20" height="20" class="framework-logo" /> Svelte
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" width="20" height="20" class="framework-logo" /> Svelte
```
|-- routes/
|-- index.svelte // index page "/"
@@ -1039,7 +1039,7 @@ const colors = [
|-- __layout.svelte // global app layout
```
### <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="20" height="20" class="framework-logo" /> React
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" width="20" height="20" class="framework-logo" /> React
```
|-- pages/
|-- index.js // index page "/"
@@ -1051,13 +1051,13 @@ const colors = [
https://remix.run/docs/en/v1/guides/routing
### <img src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" width="20" height="20" class="framework-logo" /> Vue 3
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" width="20" height="20" class="framework-logo" /> Vue 3
```
|-- pages/
|-- index.vue // index page "/"
|-- about.vue // about page "/about"
```
### <img src="https://github.com/angular/angular/raw/master/aio/src/assets/images/logos/angular/angular.png" width="20" height="20" class="framework-logo" /> Angular
### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" width="20" height="20" class="framework-logo" /> Angular
<pre>Oops, missing snippet ! You can contribute <a href="https://github.com/matschik/component-party/tree/main/content/7-webapp-features/1-routing">here</a> to fill this snippet.</pre>