Open2022/03/17にコメント追加6[Scrap] HTML の文脈で共通 Button を作るHTMLVue.jsへぶん2022/03/17共通コンポーネントを作るにあたって、Web に詳しくに自分が分かってない知識を埋めながら作業を進めていきたい。特に以下について調べながら進めていく。 有名な UI Lirbrary の挙動や設計、アクセシビリティ React Spctrum を参考にする Vue.js での実装プラクティス 必要に応じて Vuetify などの内部実装を参考にする へぶん2022/03/17に更新 React Spectrum - Button Variants 周りが特に参考になりそう。 https://react-spectrum.adobe.com/react-spectrum/Button.html https://spectrum.adobe.com/page/button/#Options へぶん2022/03/17に更新 Vue での実装方法 children の型が string だったときに span でラップするとかしたい。React の場合は子供の型を見れば分かるけど Vue でうまくできるのか分からない。 へぶん2022/03/17Vue tsx もある https://zenn.dev/shippokun/articles/92169d38d86333 へぶん2022/03/17render 関数を使えば ctx から children が取得できる。ここから map 使ったりして string 型の場合は span でラップするところまでいきたい。 https://v2.vuejs.org/v2/guide/render-function.html?redirect=true#Passing-Attributes-and-Events-to-Child-Elements-Components へぶん2022/03/17以下で 子 nodes が取れるので tagname が空の時に、span でラップして返すようにする。 const nodes = this.$slots.default 返信を追加
へぶん2022/03/17共通コンポーネントを作るにあたって、Web に詳しくに自分が分かってない知識を埋めながら作業を進めていきたい。特に以下について調べながら進めていく。 有名な UI Lirbrary の挙動や設計、アクセシビリティ React Spctrum を参考にする Vue.js での実装プラクティス 必要に応じて Vuetify などの内部実装を参考にする
へぶん2022/03/17に更新 React Spectrum - Button Variants 周りが特に参考になりそう。 https://react-spectrum.adobe.com/react-spectrum/Button.html https://spectrum.adobe.com/page/button/#Options
へぶん2022/03/17に更新 Vue での実装方法 children の型が string だったときに span でラップするとかしたい。React の場合は子供の型を見れば分かるけど Vue でうまくできるのか分からない。 へぶん2022/03/17Vue tsx もある https://zenn.dev/shippokun/articles/92169d38d86333 へぶん2022/03/17render 関数を使えば ctx から children が取得できる。ここから map 使ったりして string 型の場合は span でラップするところまでいきたい。 https://v2.vuejs.org/v2/guide/render-function.html?redirect=true#Passing-Attributes-and-Events-to-Child-Elements-Components へぶん2022/03/17以下で 子 nodes が取れるので tagname が空の時に、span でラップして返すようにする。 const nodes = this.$slots.default 返信を追加
へぶん2022/03/17render 関数を使えば ctx から children が取得できる。ここから map 使ったりして string 型の場合は span でラップするところまでいきたい。 https://v2.vuejs.org/v2/guide/render-function.html?redirect=true#Passing-Attributes-and-Events-to-Child-Elements-Components
