10줄 미만의 코드로 Blazor를 위한 간단한 툴팁 구성 요소 만들기 *

나는 이미 오랫동안 블로그를 쓸 시간이 없다.내가 지난 게시물을 올린 이래로 나는 줄곧 나의 책인 《Blazor in Action》을 위해 몇 장을 쓰려고 노력해 왔다. 이 책은 곧 MEAP(만닝 조기 방문 계획)에 발표될 것이다.9월 초, 나와 아내는 첫 아이를 낳았는데, 이것은 놀랍고 재미있는 새로운 도전이었다.나는 지금까지의 매 분을 좋아하지만, 나는 나의 커피 머신에 매우 감사한다!!
어쨌든, 주어진 주제로 돌아가서, 이 글에서, 저는 Blazor 응용 프로그램을 위해 매우 간단하고 다시 사용할 수 있는 도구 알림 구성 요소를 구축하는 방법을 보여 드리겠습니다.나는 이 글의 제목에 10줄도 안 되지만 CSS를 포함하지 않는 예술 허가를 사용했다.하지만 CSS는 어느 순간 축소되기 때문에 계산해서는 안 된다고 생각합니다...어쨌든 계속하다.
만약 당신이 결과에 관심이 있을 뿐이라면, 본고에서 코드의 최종 작업 버전을 찾을 수 있습니다.나는 또 내가 사용했다고 지적하고 싶다.NET5 미리 보기 비트는 이 비트를 구성하기 때문에 예시를 실행하기 위해 이 비트를 설치해야 합니다.

GitHub 재구매 계약 보기 툴팁 구성 요소 만들기

우리가 해야 할 첫 번째 일은 Tooltip이라는 새 구성 요소를 만드는 것이다.razor 및 다음 코드 추가:

<div class="tooltip-wrapper">
    <span>@Text</span>
    @ChildContent
</div>

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public string Text { get; set; }
}

이 구성 요소는 두 개의 매개 변수 ChildContent 와 Text 가 있습니다.우리가 구성 요소를 사용할 때, 그것은 우리가 도구 알림을 표시하고자 하는 위치에 표시를 포장할 것이다.포장된 태그는 ChildContent 매개 변수에 포착되어 도구 설명의 주 div 에 표시됩니다.다른 매개변수 Text 는 도구 설명에 표시될 텍스트를 설정하는 데 사용되는 매개변수입니다.
이것이 바로 Razor 코드의 모든 내용입니다!좋아, 아홉 줄, 빈칸 하나 포함.이 모든 것을 정상적으로 작동하게 하는 진정한 마력은 CSS에 있다.새 걸로 쓰고 있어요.NET5 RC 1위, Blazor의 새로운 CSS 격리 기능을 활용할 수 있습니다.

CSS 추가

Blazor에서 CSS 격리를 사용하려면 스타일에 사용된 구성 요소의 이름과 같은 CSS 파일을 만들어야 합니다.우리의 예에서, 이 구성 요소는 도구 알림이라고 불린다.면도기그래서 우리의 스타일시트는 도구 제시라고 불러야 한다.면도기css.완료되면 다음 스타일을 추가할 수 있습니다.

.tooltip-wrapper {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    cursor: help;
}

span {
    visibility: hidden;
    position: absolute;
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    background-color: #363636;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
}

span::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip-wrapper:hover span {
    visibility: visible;
}

첫 번째 클래스.tooltip-wrapper는 구성 요소의 용기div에 적용됩니다.이것은 div를 inline-block 로 나타내기 때문에 문서 흐름이 중단되지 않습니다.또한 위치를 상대 위치로 설정합니다.이것은 우리가 부모 div에 비해 하위 범위 (툴팁 텍스트) 를 절대적으로 필요한 위치에 배치할 수 있음을 의미합니다. 마지막 두 규칙은 사용자에게 사용할 수 있는 툴팁을 표시하기 위해 스타일을 추가했습니다.
다음 스타일은 표시할 툴팁 텍스트가 포함된 요소span에 적용됩니다.기본적으로 범위는 숨겨져 있고 부모 div에 비해 절대적으로 위치합니다. 위에 표시된 스타일을 사용하면 도구 설명 구성 요소의 시작과 끝 표시 사이에 포함된 내용 위에 도구 설명이 표시됩니다.
다음 양식은 이른바 위조원소다.그러면 DOM에 요소가 추가됩니다.이 스타일의 역할은 도구 설명 텍스트의 밑에 작은 화살표를 만들어서 도구 설명이 포장 중인 내용을 가리키는 것이다.
사용자가 부모 div에 커서를 걸면 최종 스타일은 도구 설명 텍스트를 포함하는 범위를 표시합니다.
이게 다야!

툴팁 사용

툴팁을 사용하려면 사용자가 툴팁 텍스트의 내용을 표시하기 위해 툴팁 텍스트 주위에 둘러싸여 원하는 메시지를 추가하기만 하면 됩니다.만약 모든 것이 순조롭다면, 그것은 이렇게 보일 것이다...

총결산

요컨대, 이 글에서, 저는 Blazor 응용 프로그램에 간단한 재사용 가능한 도구 알림 구성 요소를 만드는 방법을 보여 드리겠습니다.전체 구성 요소는 9줄의 Razor 코드만 있고 JavaScript가 필요하지 않으며 대략 36줄의 CSS가 필요합니다.새로운 CSS 격리 기능을 사용할 수 있는 기회도 제공됩니다.그물5는 바로 모퉁이에 있다.
이 글은 내가 평소에 쓴 것보다 훨씬 짧지만, 블로그 글을 다시 한 편 쓸 수 있어서 정말 좋다.나는 지금 어느 날이든 Blazor의 MEAP를 발표할 수 있기를 바란다. 그래서 일단 그것을 사용할 수 있다면, 나는 블로그에 그것에 관한 문장과 네가 그것을 어떻게 얻는지 발표할 것이다.