並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 34 件 / 34件

新着順 人気順

Modalの検索結果1 - 34 件 / 34件

タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。

Modalに関するエントリは34件あります。 UIモーダルtool などが関連タグです。 人気エントリには 『モーダル要素の実装に便利なCSSの新機能「:modal疑似クラス」、主要ブラウザのすべてにサポートされました』などがあります。
  • モーダル要素の実装に便利なCSSの新機能「:modal疑似クラス」、主要ブラウザのすべてにサポートされました

    先日リリースされたChrome 105, Edge 105でコンテナクエリ(@container)と:has()疑似クラスがサポートされ、モダンCSSの新機能がいよいよブラウザで使用できるようなりました。 そしてもう一つ、:modal疑似クラスもサポートされています。CSSでモーダル要素を検出できる新機能で、今までJavaScriptでしかできなかったことがCSSでできるようになります。 Is it :modal? by Jhey Tompkins コンテナクエリ(@container)と:has()疑似クラスについては、先日の記事をご覧ください。 レスポンシブの実装が今までと変わる! CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスの元、翻訳しています。 :modal疑似クラスがCh

      モーダル要素の実装に便利なCSSの新機能「:modal疑似クラス」、主要ブラウザのすべてにサポートされました
    • 本当にあったモーダルの怖い話 / Terrifying Nonfiction of Modal

      ABEMA weber 勉強会 2021/06/30, 07/07 --- @uenitty 本当にあったモーダルの怖い話 ABEMA weber 勉強会 2021/06/30, 07/07 背景と目的 2 • モーダルに驚くほど苦しめられたので、状況を説明して改善方法を提案する • OOUIの特徴のうち「操作性 / 使いやすさ」についての説明はよく見かける ので、今回は「開発効率 / 作りやすさ」の方に重点を置いて説明する • 「モーダルの方が実装が楽なのかと思っていた」というデザイナーの声が あったので、職種関係なく理解してもらえるような説明を試みる 内容 3 • 前提の認識合わせ • 本当にあった話 • 改善に向けて 既存のUI設計 4 前提の認識合わせ 「手続き」を完了させたい 5 • ビジネス要求 • 重要な「手続き」は開始したら迷いなく完了してほしい • 手続きの例 • アカウ

        本当にあったモーダルの怖い話 / Terrifying Nonfiction of Modal
      • react-hooks-use-modalを使ってモーダルコンポーネントを作成する

        こんにちはかみむらです。 先日柴田さんが公開していた、Reactのモーダルコンポーネントを簡単に作成できるライブラリ react-hooks-use-modal をmicroCMSのOrganizationに移行しました。 こちらがGitHubのリポジトリです。 https://github.com/microcmsio/react-hooks-use-modal こちらはデモになります。 https://microcmsio.github.io/react-hooks-use-modal/ react-hooks-use-modalはmicroCMSの管理画面内部にも使われています。例えばWebhook追加時のモーダルコンポーネントです。 モーダルのコンポーネントは1から実装すると非常に工数がかかりますが、react-hooks-use-modalを使えば少ない工数で実装することができま

          react-hooks-use-modalを使ってモーダルコンポーネントを作成する
        • react-modal のアクセシビリティまわりの実装を読む

          react-modalのアクセシビリティまわりの実装について、ソースコードを読んでみたかったのでその記録を残します。 特にことわりがない限り、 v3.11.2 の内容に基きます。 ドキュメント react-modalのドキュメントには accessibility という項目があり、3つの機能について説明があります。 The app element Keyboard Navigation ARIA attributes The app element 主にスクリーンリーダーのユーザー向けの機能で、 aria-hidden 属性によって、モーダルが開いているときにページコンテンツを非表示と同じような状態にする機能です。視覚的にモーダルウインドウがページコンテンツの上に被さるように表示されている=ページコンテンツが隠されているのを、スクリーンリーダー向けにはモーダル以外の部分に aria-hid

            react-modal のアクセシビリティまわりの実装を読む
          • GitHub - rvaiya/warpd: A modal keyboard-driven virtual pointer

            You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

              GitHub - rvaiya/warpd: A modal keyboard-driven virtual pointer
            • Is it :modal?  |  Articles  |  web.dev

              Is it :modal? Stay organized with collections Save and categorize content based on your preferences. This handy CSS pseudo-selector gives you a way to select elements that are modal. This handy pseudo-selector gives you a way to select elements that are "modal", and to avoid managing classes in JavaScript by providing a way to detect modal elements. Two types of elements are currently classed as :

                Is it :modal?  |  Articles  |  web.dev
              • LAION-5B: A NEW ERA OF OPEN LARGE-SCALE MULTI-MODAL DATASETS | LAION

                The metadata files are parquet files that contain the following attributes: URL, TEXT, the cosine similarity score between the text and image embedding and height and width of the image. Watermark and safety tags can be joined with the metadata prior to downloading by using this script. Once that is done, they can easily be filtered upon with a probability threshold at your choice (we recommend 0.

                  LAION-5B: A NEW ERA OF OPEN LARGE-SCALE MULTI-MODAL DATASETS | LAION
                • これで迷わない!Modal、Dialog、Drawerの違い

                  ベン図で表すと以下のようになります。 (あまり一般的でない名称のコンポーネントも便宜上使用しています。) 以降、詳しく解説します。 Modal Modal は、ユーザに特定のアクションを求めるために、ユーザのインタラクション(操作)を中断させる UI コンポーネントです。 難しい表現をするならば、ユーザの操作を「モードに移行」させるコンポーネントと言えます。 もともと、「Modal」という英単語はこちらで言及されているように形容詞です。 そのため、「Modal な〇〇(名詞)」という意味が本来は適切な使い方です。例えば「Modal な Dialog」や「Modal な Drawer」などです。 今日では単に「Modal」だけで使われることが多いので注意が必要です。 Modal はユーザの操作を制限し、ユーザが特定のタスクに集中して対処しなければならない状態を作り出します。 ユーザは「モーダ

                    これで迷わない!Modal、Dialog、Drawerの違い
                  • GitHub - helix-editor/helix: A post-modern modal text editor.

                    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

                      GitHub - helix-editor/helix: A post-modern modal text editor.
                    • Modal: High-performance cloud for developers

                      The serverless platform for teams Run generative AI models, large-scale batch jobs, job queues, and much more. Bring your own code — we run the infrastructure.

                        Modal: High-performance cloud for developers
                      • (PDF) VoterFraud2020: a Multi-modal Dataset of Election Fraud Claims on Twitter

                        The wide spread of unfounded election fraud claims surrounding the U.S. 2020 election had resulted in undermining of trust in the election, culminating in violence inside the U.S. capitol. Under these circumstances, it is critical to understand discussions surrounding these claims on Twitter, a major platform where the claims disseminate. To this end, we collected and release the VoterFraud2020 da

                          (PDF) VoterFraud2020: a Multi-modal Dataset of Election Fraud Claims on Twitter
                        • iOS13のModal遷移はデフォルトだとDismiss時に遷移元のviewWillAppear等が呼ばれない | レコチョクのエンジニアブログ

                          iOS13からデフォルトのModal遷移がシート型に変更になりました。 スワイプでVCをDismissできたり遷移元の画面が見えたりといい感じにはなりましたが、 Dismiss時に遷移元のライフサイクルメソッドが呼ばれません。 printした結果

                            iOS13のModal遷移はデフォルトだとDismiss時に遷移元のviewWillAppear等が呼ばれない | レコチョクのエンジニアブログ
                          • Vue.jsで簡単にモーダルが実装できる「vue-js-modal」 | カバの樹

                            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles.css"> 導入手順 管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。 このサンプルでは、CDNを使ってVue.jsでシンプルなモーダルを実装します。 step 1ライブラリの呼び出し ES6等で実装する場合 import VModal from 'vue-js-modal' UMDで実装する場合 const VModal = window["vue-js-modal"].default step

                              Vue.jsで簡単にモーダルが実装できる「vue-js-modal」 | カバの樹
                            • VoterFraud2020: a Multi-modal Dataset of Election Fraud Claims on Twitter

                              The wide spread of unfounded election fraud claims surrounding the U.S. 2020 election had resulted in undermining of trust in the election, culminating in violence inside the U.S. capitol. Under these circumstances, it is critical to understand the discussions surrounding these claims on Twitter, a major platform where the claims were disseminated. To this end, we collected and released the VoterF

                              • Modal Dialog Example

                                This is just a demonstration. If it were a real application, it would provide a message telling whether the entered address is valid. For demonstration purposes, this dialog has a lot of text. It demonstrates a scenario where: The first interactive element, the help link, is at the bottom of the dialog. If focus is placed on the first interactive element when the dialog opens, the validation messa

                                  Modal Dialog Example
                                • GitHub - WalletConnect/web3modal: A single Web3 provider solution for all Wallets

                                  You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

                                    GitHub - WalletConnect/web3modal: A single Web3 provider solution for all Wallets
                                  • Google Colabの無料プランでStable Diffusionを使えなくなったらModalへ行こう? - ただいま村

                                    Google Colaboratoryの無料プランでAUTOMATIC1111版Stable Diffusion WebUI(以下SD/WebUI)が使えなくなるので、別のサービスを探しましょうという話になっている。 4月21日くらいから、Google ColaboratoryでSD/WebUIを実行しようとすると下のダイアログボックスが出るようになった。 実行中のコードは許可されていない可能性があるため、今後のColabの利用を制限させていただく場合があります。よくある質問で指定されている禁止行為をご確認ください。 「よくある質問」には禁止行為の一覧がある。 Colab のリソースは、インタラクティブなユースケースに優先的に割り当てられます。大量のコンピューティングに関連するアクション、他者に悪影響を与えるアクション、Google のポリシーの回避に関連するアクションは禁止されています。

                                      Google Colabの無料プランでStable Diffusionを使えなくなったらModalへ行こう? - ただいま村
                                    • Japanese Stable CLIPを使って画像の感情判断ができるAPIをModalを使って実装する

                                      はじめに 以下のポストの通りStability AIが「Japanese Stable CLIP」を公開されたので、画像の内容を感情分析ようにしたい & ほかからでも使えるようにAPIを実装しました バックエンドのGPUサーバーレスには、最近ハマっているModalを使っていきます Modalを使ってLCMを使ったdiscordコマンドを実装した内容は以下で書いています! 環境 Modal Python3.10 ライブラリ modal 実装 Modal側で動くAPIを実装します from modal import Stub, web_endpoint import modal stub = Stub("clip_api") emotions = [ "喜び", "悲しみ", "怒り", "驚き", "恐怖", "愛情", "幸福", "落胆", "焦燥", "安心", "羨望", "憎悪",

                                        Japanese Stable CLIPを使って画像の感情判断ができるAPIをModalを使って実装する
                                      • GitHub - eBay/nice-modal-react: A modal state manager for React.

                                        You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

                                          GitHub - eBay/nice-modal-react: A modal state manager for React.
                                        • Recreate iOS 13' share sheet modal in swift (not the share sheet itself, but the way it's presented)

                                          is there a way to easily recreate the modal presentation style of ios 13' new share sheet? (At first, it's only presented halfway and you can swipe up to make it a "full" modal sheet) I can do it using a completely custom presentation and stuff but is there a "native" api for this behavior so that you don't have to use custom code? Thanks!

                                            Recreate iOS 13' share sheet modal in swift (not the share sheet itself, but the way it's presented)
                                          • You don't need a modal window

                                            Just make a separate page. Maybe you have a master/detail setup on your web app. There's a list of products/documents/whatever, and clicking on one brings up the details. Close Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque blanditiis nulla consectetur labore expedita corrupti nihil saepe iste perferendis exercitationem praesentium, possimus iusto itaque numquam vel ut offici

                                              You don't need a modal window
                                            • 【CSS】主要ブラウザに対応した疑似クラス :modalを使って、モーダルを作ってみる! - Qiita

                                              はじめに みなさんは、:modalという疑似クラスをご存知でしょうか? 実は、先日Chrome 105とEgde 105がリリースされ、コンテナクエリ@containerと疑似クラス:has()と一緒に疑似クラス:modalもサポートされました。 なので今回は、:modalの具体的な内容の紹介と:modalを使った実装方法の解説を行います。 疑似クラス :modal とは? 疑似クラス :modalは以下の状態の要素のスタイルを変更することができます。 ・ JavaScriptの showModal()によって、表示された要素 ・ JavaScriptのrequestFullscreen()によって、全画面表示された要素 これら状態で、疑似クラス :modalで指定したスタイルを当てることができます。 具体的に、それぞれの状態を解説していきます! JavaScriptの showModal

                                                【CSS】主要ブラウザに対応した疑似クラス :modalを使って、モーダルを作ってみる! - Qiita
                                              • CTA Modal: How To Build A Web Component — Smashing Magazine

                                                In this article, Nathan Smith explains how to create modal dialog windows with rich interaction that will only require authoring HTML in order to be used. They are based on Web Components that are currently supported by every major browser. I have a confession to make — I am not overly fond of modal dialogs (or just “modals” for short). “Hate” would be too strong a word to use, but let’s say that

                                                  CTA Modal: How To Build A Web Component — Smashing Magazine
                                                • GitHub - modal-labs/devlooper: A program synthesis agent that autonomously fixes its output by running tests!

                                                  You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

                                                    GitHub - modal-labs/devlooper: A program synthesis agent that autonomously fixes its output by running tests!
                                                  • Presenting modal in iOS 13 fullscreen

                                                    In iOS 13 there is a new behaviour for modal view controller when being presented. Now it's not fullscreen by default and when I try to slide down, the app just dismiss the View Controller automatically. How can I prevent this behaviour and get back to the old fullscreen modal vc? Thanks

                                                      Presenting modal in iOS 13 fullscreen
                                                    • モーダルウィンドウのコンテナ要素に aria-modal 属性を適用する | Accessible & Usable

                                                      公開日 : 2021年6月6日 (2021年6月7日 更新) カテゴリー : アクセシビリティ 先の記事「折り畳まれたナビゲーションメニューの展開 (オーバーレイではなくインレイで)」を書く過程で、オーバーレイで提示されるモーダルウィンドウのアクセシビリティについて改めて調べていたところ、aria-modal という属性が気になりました。aria-modal とは、2017年に勧告された WAI-ARIA 1.1 から追加されたプロパティで、あるコンテナ要素に aria-modal="true" という属性が適用されている場合、その要素がモーダルであることをスクリーンリーダーなどの支援技術に示し、それ以外のコンテンツの利用を排除する (インタラクション可能な範囲を、モーダルのコンテンツに限定する) というものです。(参考 : aria-modal の定義 (WAI-ARIA 1.1) /

                                                        モーダルウィンドウのコンテナ要素に aria-modal 属性を適用する | Accessible & Usable
                                                      • 新登場!PopoverAPIでSide Modal(anai)を作ろう!

                                                        Saitama.js Vol.6の登壇資料です!

                                                          新登場!PopoverAPIでSide Modal(anai)を作ろう!
                                                        • Semantically Multi-modal Image Synthesis

                                                          In this paper, we focus on semantically multi-modal image synthesis (SMIS) task, namely, generating multi-modal images at the semantic level. Previous work seeks to use multiple class-specific generators, constraining its usage in datasets with a small number of classes. We instead propose a novel Group Decreasing Network (GroupDNet) that leverages group convolutions in the generator and progressi

                                                          • GeminiでMulti-Modal RAGを実装した話

                                                            こんにちは、SlalomのD&Aチームに所属するRyoです。LinkedInプロフィール 昨年から弊社のMLチームでは、技術研鑽を目的としてLLMに関する勉強会などを行っています。それに関連して、今年から自分自身が興味のある分野(AI/MLだけでなく)を少しずつ記事としてアウトプットしていこうと思い、本取り組みを始めました。 記念すべき第1回目は、GCP上でGeminiを用いてMulti-Modal RAGを構築した事について書いていきます。 対象読者 ・本記事は、GCPでGeminiを使ってMulti-Modal RAGを動かしてみたいな。という読者向けに書きましたので、アカデミックな内容やOps周り、本番レベルの実装を想定している方は、本記事をスキップしてください。 紹介する内容 ・今回紹介する内容は、昨年末にGoogleからGeminiの利用が可能となったので、GCP上でGemini

                                                              GeminiでMulti-Modal RAGを実装した話
                                                            • Modal vs Page: A Decision Making Framework

                                                              You’re creating a patient registration flow and your user is partway through the form wizard and needs more information on how to find and fill out their “insurance certificate number” in order to continue. Some users need to know what this means. Others need to know where to find it (hint: it’s on another piece of paper). Example: AKIRA’s registration flow for users with corporate health plans wi

                                                                Modal vs Page: A Decision Making Framework
                                                              • A Survey on Cross-Modal Embedding

                                                                This document provides a survey of research on cross-modal embedding and retrieval between different media types such as text, images, video, and audio. It discusses several key areas including cross-modal retrieval which aims to retrieve relevant items across media types, audio-visual embedding to learn joint representations of audio and video, and applications such as sound localization, generat

                                                                  A Survey on Cross-Modal Embedding
                                                                • GitHub - cmer/ultimate_turbo_modal-rails: The ultimate Turbo / Stimulus / Hotwire modal window for Rails

                                                                  You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

                                                                    GitHub - cmer/ultimate_turbo_modal-rails: The ultimate Turbo / Stimulus / Hotwire modal window for Rails
                                                                  • RailsのViewからVue.jsのModalを表示させてみた - Qiita

                                                                    画像のように、一覧画面で詳細を開くボタンで詳細画面を開くときに、Railsのviewは使用せずVue.jsのModalで表示することを試みた。 何とか実装出来たが、JSはjQueryから入門したこともあり結構大変だったのでメモとして残しておく。 環境 Ruby 2.6.5 Ruby on Rails 6.0.0 Vue.js 2.6.11 ここではRailsやVueの設定は省略し、Railsのwebpackerでvueのインストール、セットアップが完了していることを前提として書いていく。 やりたい事 冒頭の通り、詳細を開くボタンをクリックしたときに詳細画面をVue.jsのModalで開きたい。 しかし、今までRailsの中でVueを使った事はあっても、Vueインスタンスがどのタイミングで生成されるかなど無知であったため、最初はどうやるのかイメージがつかなかった。 jQueryからJavas

                                                                      RailsのViewからVue.jsのModalを表示させてみた - Qiita
                                                                    • GitHub - bentoml/BentoML: The most flexible way to serve AI/ML models in production - Build Model Inference Service, LLM APIs, Inference Graph/Pipelines, Compound AI systems, Multi-Modal, RAG as a Service, and more!

                                                                      You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

                                                                        GitHub - bentoml/BentoML: The most flexible way to serve AI/ML models in production - Build Model Inference Service, LLM APIs, Inference Graph/Pipelines, Compound AI systems, Multi-Modal, RAG as a Service, and more!
                                                                      1

                                                                      新着記事