'2022/11/17 글 목록

2022/11/17 (4)

[Blazor] 원형 버튼 만들기

웹 프로그래밍/Blazor 범범조조 2022. 11. 17. 21:50

개요 Blazor 원형 버튼 만드는 방법에 대해서 정리 진행합니다. 원형 버튼 만든 이유 현재 TodoList 를 만들면서, Blazor 개념을 익히고 있습니다. 여기서 단순 버튼보다, 보다 새로운 버튼을 만들고자 원형 버튼으로 변경하고 싶어서 만들어 보게 되었습니다. 원형 버튼 컴포넌트 재사용을 위해서 원형 버튼 컴포넌트를 따로 만들어 주었습니다. CircleButtonComponent.razor 라는 컴포넌트 프로젝트 하나 생성해 주었고 다음과 같이 코드를 작성 진행하였습니다. @ButtonContent @code { [Parameter] public bool IsClicked { get; set; } [Parameter] public string? ButtonContent { get; set; } ..

[Blazor] 부모 컴포넌트에서 자식 컴포넌트 주입 받기

웹 프로그래밍/Blazor 범범조조 2022. 11. 17. 20:49

개요 Blazor 에서 부모 컴포넌트에서 자식 컴포넌트 자체를 주입받는 방법에 대해서 정리 진행합니다. ChildContenr(자식 콘텐츠) Razor 구성 요소는 자식 콘텐츠를 RenderFragment 로 캡처하고 해당 콘텐츠를 구성 요소 렌더링의 일부로 렌더링 할 수 있습니다. 자식 콘텐츠를 캡처하려면 RenderFragment 형식의 구성 요소 매개 변수를 정의하고 이름을 ChildContent 로 지정하여 사용하면 됩니다. ChildContentComponent.razor Component with child content @ChildContent @code { [Parameter] public RenderFragment ChildContent { get; set; } } 위와 같이 자식 컴포넌..

[Blazor] MouseOver, MouseOut 이벤트 적용하기

웹 프로그래밍/Blazor 범범조조 2022. 11. 17. 06:11

개요 Blazor 에서 MouseOver, MouseOut 이벤트를 적용하는 방법에 대해서 정리 진행합니다. MouseOver, MouseOut 이벤트 사용이 필요한 부분 MouseOver, MouseOut 이벤트 사용이 필요한 부분은 개발을 진행하다 보면 많이 있습니다. 저 같은 경우는 TodoList 를 만들면서, List 항목에 Mouse 를 올려두면 삭제(휴지통) 이미지가 뜨고, 다시 리스트 항목을 벗어나면 삭제(휴지통) 이미지가 사라지도록 하기 위해서 MouseOver, MouseOut 이벤트를 사용하였습니다. 그럼 Blazor 에서 실제로 어떻게 MouseOver, MouseOut 이벤트를 선언하여 사용하는지 예제 코드를 통해 알아보도록 하겠습니다. TodoListComponent.razor ..

[Blazor] 삼항 연산자를 이용한 Class CSS 속성

웹 프로그래밍/Blazor 범범조조 2022. 11. 17. 00:06

개요 Blazor 에서 삼항 연산자를 이용하여 Class CSS 속성을 변경하는 방법에 대해서 알아봅니다. Class 속성에서 삼항 연산자 사용이 필요한 경우 Blazor 에서 ToDoList 를 개발하던 중, Check 값에 따라서 Text Color 값을 변경해야 할 일이 있었습니다. Check 가 되어 있으면 검은색의 Text, Check 가 해제되어 있으면 회색의 Text 로 변경되도록 개발해야 하는 경우가 있었는데, 이럴 때 Class 속성에서 삼항 연산자를 통해 2개의 CSS 속성 값을 적용해 줄 수 있습니다. 예제 코드를 통해서 어떻게 사용하는지 보여드리겠습니다. TodoListComponent.razor TodoListComponent.razor 컴포넌트는 ToDoList 의 데이터를 표시..

1

Sidebar

Copyright © BeomBeomJoJo All Rights Reserved

Designed by JB FACTORY

티스토리툴바