@ynetlabo/ui-core

ui-labo のプレーン Web 実装。 素の Custom Elements で書いており、ランタイム依存はありません。

デモとドキュメント

npm install @ynetlabo/ui-core

<link rel="stylesheet" href="node_modules/@ynetlabo/ui-tokens/dist/tokens.css">
<script type="module">
  import "@ynetlabo/ui-core";
</script>

<yn-prefecture-picker name="pref" code-format="jis"></yn-prefecture-picker>

import した時点でカスタム要素が登録されます。色・寸法・モーションは @ynetlabo/ui-tokens の CSS カスタムプロパティ経由なので、読み込むだけでテーマが効きます。

コンポーネント

| 要素 | 仕様 | |---|---| | <yn-prefecture-picker> | 都道府県 Picker |

フレームワークから使う

Vue では、カスタム要素と誤認させない設定と、値のプロパティ束縛が必要です。

// nuxt.config.ts / vite.config.ts
vue: { compilerOptions: { isCustomElement: (tag) => tag.startsWith("yn-") } }

<yn-prefecture-picker :value.prop="pref" @change="pref = $event.detail.value" />

MIT © Yuuki.U (ynetlabo)